So I am pasting the code here:
<!doctype html>
<head>
<title>Skeleton website</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
background-color: gray;
}
.pagewidth
{
width: 1250px;
/*background-color: gray;*/
}
#header
{
text-align: center;
background-color: white;
}
.clinks
{
display: inline;
background-color: white;
}
#maincontent
{
background-color: black;
}
#partition_1
{
width: 310px;
min-height: 100px;
background-color: red;
float: left;
border-left: solid 1.25px black;
border-right: solid 1.25px black;
}
#partition_2
{
width: 310px;
min-height: 100px;
background-color: blue;
float: left;
border-left: solid 1.25px black;
border-right: solid 1.25px black;
}
#partition_3
{
width: 310px;
min-height: 100px;
background-color: green;
float: left;
border-left: solid 1.25px black;
border-right: solid 1.25px black;
}
#partition_4
{
width: 310px;
min-height: 100px;
background-color: violet;
float: left;
border-left: solid 1.25px black;
border-right: solid 1.25px black;
}
#partition_1_h
{
width: 310px;
height: 20px;
background-color: orange;
}
#partition_2_h
{
width: 310px;
height: 20px;
background-color: pink;
}
#partition_3_h
{
width: 310px;
height: 20px;
background-color: white;
}
#partition_4_h
{
width: 310px;
height: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<div class = "pagewidth" id = "header">
<div id = "logo">Logo goes here</div>
<div id="controllinks">
<div class = "clinks" id="Clink1">Link 1</div>
<div class = "clinks" id="Clink1">Link 2</div>
<div class = "clinks" id="Clink1">Link 3</div>
</div>
</div>
<!-- <div id = "headerlinks"></div> -->
<div class = "pagewidth" id = "maincontent">
<div id = "partition_1">
<div id = "partition_1_h"></div>
</div>
<div id = "partition_2">
<div id = "partition_2_h"></div>
</div>
<div id = "partition_3">
<div id = "partition_3_h"></div>
</div>
<div id = "partition_4">
<div id = "partition_4_h"></div>
</div>
</div>
<div class = "pagewidth" id = "footer"></div>
<script type="text/javascript" src = "jquery.min.js">
</script>
</body>
A pretty standard skeleton for a website, I think! So here's my question: Why isn't the background-color: white in the #header styling portion getting applied? If you notice way up where at the start of the styling section, I have applied 0 margins and padding for all elements unless otherwise specified. After that I made sure to add different background-color attributes to all the different elements on the webpage. They work just well and perfectly override the * css styling. However, as far as the header id is concerned, it is having trouble overriding the gray applied to the entire webpage with the white that is specified. Does anyone know why this might be happened? I am thoroughly confused and honestly a little frustrated. This has got to be a minute detail I am missing out on, but I need a second pair of eyes and a hand to smack my head and point me in the right direction.
Thanks a ton! Appreciate it a lot!
Cheers.
It is because you have applied background-color: gray to all the elements. This means the #logo and #controllinks elements have a background colour of gray. As these elements sit inside the header you will not see the background colour of the header.
Instead you should give the body a background colour of gray instead of all elements.
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: gray;
}
See the codepen here