user2107351
user2107351

Reputation: 25

Can't change background of elements in aside tag html5

I checked my code multiple times. I can't see anything wrong with it. I can change the background of everything but the news in the aside tag. What's wrong with it? This is the css code. I called the aside tag news. My id of the aside tag is correct in html. I checked that before asking this question.

*{
margin: 0px;
padding: 0px;
}

h1{
font: bold 20px Tahoma;
}

h2{
font: bold 14px Comic Sans MS;
}
header,section,footer,aside,article,nav,hgroup{
display:block;
}

body{
text-align:center; 
}

#whole_wrapper{
border:1px solid brown;
width: 1000px;
margin: 20px auto;
text-align: left;
background-color:orange;
}

#top_header{
background:beige;
padding: 20px;
}

#main_menu{
background:lightgreen;
color:blue;
}

#main_menu li{
display:inline-block;
list-style:none;
padding:5px;
font: bold 14px Tahoma;
}

#main_section{
float:left;
width:660px;
margin:30px;
}`  

#news{
float:left;
width:220px;
margin:20px 0px;
padding:30px;
background-color:red;
}

#bottom_footer{
clear:both;
text-align:center;
padding:20px;
border-top:2px solid beige;
}

article{
background-color:azure;
border: 1px solid navy;
padding:20p;
margin-bottom:15px;
}

Upvotes: 0

Views: 2427

Answers (1)

Mooseman
Mooseman

Reputation: 18891

You have various typos in your CSS. Also, be sure to specify specific colors instead of declarations such as blue or beige. Here it is cleaned up, with no edits to the colors.

*{
    margin: 0px;
    padding: 0px;
}

h1{
    font: bold 20px Tahoma;
}

h2{
    font: bold 14px Comic Sans MS;
}
header, section, footer, aside, article, nav, hgroup{
    display:block;
}
body{
    text-align:center; 
}

#whole_wrapper{
    border:1px solid brown;
    width: 1000px;
    margin: 20px auto;
    text-align: left;
    background-color: orange; /* Use a specific color instead */
}
#top_header{
    background: beige; /* Use a specific color instead */
    padding: 20px;
}
#main_menu{
    background:lightgreen; /* Use a specific color instead */
    color:blue;
}
#main_menu li{
    display:inline-block;
    list-style:none;
    padding:5px;
    font: bold 14px Tahoma;
}
#main_section{
    float:left;
    width:660px;
    margin:30px;
}
#news{
    float:left;
    width:220px;
    margin:20px 0px;
    padding:30px;
    background-color:red; /* Use a specific color instead */
}
#bottom_footer{
    clear:both;
    text-align:center;
    padding:20px;
    border-top:2px solid beige; /* Use a specific color instead */
}
article{
    background-color:azure; /* Use a specific color instead */
    border: 1px solid navy; /* Use a specific color instead */
    padding:20p;
    margin-bottom:15px;
}

Upvotes: 1

Related Questions