The document contains CSS code for the styling of an Awoko newspaper HTML website, which focuses on business, finance, editorial content, entertainment, features, and sports. It includes various styling elements for layout, headers, columns, sidebars, and footer, ensuring a structured and visually appealing format. Additionally, it suggests creating an HTML file named index.html to serve as the main page of the site.

1. Css code for a awoko newspaper html website which provides business and finance, editorial,
entertainment.,features and sport.
Css code for a awoko newspaper html website which provides business and finance, editorial,
entertainment.,features and sport.
Solution
//Name this css file as style.css
@charset "utf-8";
/* General */
body {
margin:0px;
font-size:12px;
background-color:#ffffea;
}
body * {
outline:none;
}
.float {
float:left;
}
body form {
margin:0px;
}
#page {
width:100%;
background-image:url(images/body_bg2.png);
background-repeat:repeat-x;
}
#wrapper {
width:966px;
margin:0px auto 0px auto;
}
#left {

2. width:12px;
height:219px;
background-image:url(images/left_effect.png);
background-repeat:no-repeat;
background-position:0px 157px;
}
#center {
width:942px;
}
#right {
width:12px;
height:219px;
background-image:url(images/right_effect.png);
background-repeat:no-repeat;
background-position:0px 157px;
}
/* Header */
#header {
padding:2px 0px 2px 0px;
}
#search {
width:50%;
float:left;
}
.search_field {
height:18px;
border:1px solid #e3c6c4;
}
#top_links {
width:40%;
float:right;
margin:4px 0px 4px 0px;
font-family:Georgia, Arial, Helvetica, sans-serif;
}
#top_links * a {
color:#FFF;

3. text-decoration:none;
}
#top_links ul {
padding:0px;
margin:0px;
float:right;
}
#top_links ul li {
list-style:none;
margin-left:15px;
float:left;
}
#logo {
width:222px;
margin-right:16px;
margin-top:15px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#000;
line-height:25px;
text-align:center;
}
#logo a {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:202px;
height:72px;
margin-right:auto;
margin-left:auto;
display:block;
}
#top_ad {
width:374px;
margin-right:21px;
margin-top:15px;
height:90px;
}

4. #today_quote {
width:309px;
margin-top:15px;
}
#quote {
width:219px;
text-align:right;
margin-right:5px;
padding:5px;
font-size:14px;
}
/*Middle*/
#middle {
border-top:1px solid #df202d;
border-left:1px solid #df202d;
border-right:1px solid #df202d;
}
.scroller {
background-color:#fef407;
height:22px;
width:auto;
color:#959595;
font-family:Georgia, 'Times New Roman', Times, serif;
line-height:22px;
padding:0px 5px 0px 5px;
}
#main_menu {
width:100%;
font-family:Georgia, Arial, Helvetica, sans-serif;
line-height:29px;
font-size:12px;
text-transform:uppercase;
background-image:url(images/body_bg2.png);
background-repeat:repeat-x;
background-position:top;
background-color:#c0010e;

5. height:30px;
}
#main_menu * a {
color:#FFF;
text-decoration:none;
}
#main_menu ul {
padding:0px;
margin:0px;
width:100%;
text-align:center;
}
#main_menu ul li {
list-style:none;
margin:0px 10px;
display:inline-block;
}
/*Three Columns*/
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright, .colmid, .colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.col1, .col2, .col3 {
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower

6. instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background:#eee; /* right column background colour */
background-image:url(images/sidebar_right_bg.png);
background-repeat:repeat;
background-position:48px 0px;
}
.threecol .colmid {
right:20%; /* width of the right column */
background:#fff; /* center column background colour */
border-right:1px solid #ccc;
}
.threecol .colleft {
right:60%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */
background-image:url(images/sidebar_left_bg.png);
background-repeat:repeat;
border-right:1px solid #ccc;
}
.threecol .col1 {
width:58%; /* width of center column content (column width minus padding on either
side) */
left:101%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:18%; /* Width of left column content (column width minus padding on either
side) */
left:23%; /* width of (right column) plus (center column left and right padding) plus
(left column left padding) */
}
.threecol .col3 {
width:18%; /* Width of right column content (column width minus padding on either

7. side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left
column left and right padding) plus (right column left padding) */
}
/* Footer */
#footer {
width:100%;
background-image:url(images/body_bg2.png);
background-repeat:repeat-x;
background-position:top;
background-color:#c0010e;
height:30px;
color:#FFF;
font-size:12px;
}
#footer_content div {
width:460px;
float:left;
padding:5px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-size:12px;
line-height:20px;
}
#footer a, #footer a:visited, #footer a:active {
color:#FFF;
text-decoration:none;
}
#footer a:hover {
text-decoration:underline;
}
/* Sidebar 1 */
#sidebar_content1 ul{
list-style-type:none;
margin:0px;

8. padding:0px;
}
#sidebar_content1 > ul > li {
margin-bottom:10px;
}
/* Sidebar 2 */
#sidebar_content2 ul{
list-style-type:none;
margin:0px;
padding:0px;
}
/* Polls */
.widget_polls-widget * {
margin:0px;
padding:0px;
}
.widget_polls-widget h2.widgettitle {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-weight:700;
margin:10px 0px 10px 0px;
}
.wp_poll_question {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#d21320;
margin:10px 0px 10px 0px;
}
.wp-polls-ul li {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
line-height:18px;
}
.pollbar {
margin:10px 0px 10px 0px;

9. }
.wp-polls-ans {
}
.vote_button {
text-align: left; width:90px;
}
.Buttons {
outline:none;
}
.view_results a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#d21320;
text-decoration:none;
text-align: right;
line-height:23px;
}
.widget_archive {
margin-top:20px;
}
.widget_archive h2{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-weight:700;
margin:10px 0px 10px 0px;
}
.widget_archive a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#d21320;
text-decoration:none;
text-align: right;
line-height:23px;
}
#front_posts .post {
border-bottom:1px solid #CCC;

10. width:254px;
float:left;
margin:0px 4px 0px 3px;
padding:5px;
text-align:justify;
height:425px;
overflow:hidden;
}
.post {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
}
.post img{
display:block;
border:0px;
}
#front_posts a {
text-decoration:none;
color:#000000;
}
/*THUMBNAIL CSS*/
.cute-post-thumbnail{width:250px;height:152px;border:0; margin:10px 0px 5px 0px;}
.post h3{
margin-bottom:0px;
padding-bottom:0px;
}
.post a{
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
color:#000000;
}
.post h3 a{
font-size:1.2em;
font-weight:700;
}

11. .post div.entry {
margin-top:20px;
}
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0px;
padding: 0px 5px 0px 5px;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;

12. margin: 0;
}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
h2.pagetitle {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:2em;
font-weight:700;
color:#000000;
}
.archive_image {
width:250px;
display:block;
margin:0 auto 0 auto;
}
.navigation_top, .navigation_bottom {
display:block;
height:20px;
}
.navigation_top {
margin-bottom:50px;
}
.navigation_bottom {
margin-top:50px;
}
.navigation_top a, .navigation_bottom a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.2em;
font-weight:700;
text-decoration:none;
color:#d21320;
}

13. .frontpages {
margin-top:20px;
}
.frontpages img{
border:none;
display:block;
width:169px;
margin:2px auto 2px auto;
}
.top_add_sidebar ul {
list-style:none;
margin:0px;
padding:0px;
display:block;
width:374px;
height:90px;
overflow:hidden;
}
--------------------------------------------------
-----------------------------------------------------
Create html file name it as index.html
----------------------
Awoko Newspaper
Awoke News Paper
AdvertsBusiness & FinanceEditorial Awoko Tok TokEntertainmentFeaturesNewsSports