Im a newbie to CSS and created this html file for my testing…but the results are not what I expected..
Here are my questions,
- What would be the correct width of my IE window.
- What would be the perfect height of my window..When I specify a value nothing changes.
- I have created 3 divisions- Header, Footer and content..When I view it..there is a big space between each of these sections..Why do they occur?
Code follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
width:1400px;
height:1000px;
}
h1
{
color:orange;
text-align:center;
}
#div-1
{
background-color:red;
}
#div-2
{
background-color:Green;
}
#div-3
{
background-color:Blue;
}
</style>
</head>
<body>
<div id="div-1">
<h1>Header<h1>
</div>
<div id="div-2">
<h1>Content<h1>
</div>
<div id="div-3">
<h1>Footer<h1>
</div>
</body>
</html>
First, you don’t define the width or height of the window in CSS. It just doesn’t happen. You may specify the width of particular elements on your page, but that is a slightly different matter. Remove your
heightandwidthproperties.Second, your divisions have spaces between them due to the default margins that are set on
h1tags. If you want to remove them, then setmargin: 0on yourh1in your CSS.Third, you may want to check out this CSS tutorial at HTMLDog