Divs tags are used to separate contents in blocks, or more specifically, divides sections in the html file (content).When you have your contents divided in a number of divs, you can apply whatever fancy styles to your divs for formatting, presentation, design etc (CSS).
Below are the CSS tag styles (tested and optimised on IE 7 only, but works fine in Firefox/Safari)
Just add it in an external css file, and link to it in your html using the <link> tag in the <head> section.
Note: I added a Header (H3) in the HTML file for HTML and CSS in the boxes to the right, so that the whole line is gray.
html{
font-family:"Times New Roman";
color:black;
margin: 0 auto; /* Centred Page */
width:800px;
margin-left:100px;
font-size:14px;
}
#heading{
font-size:20px;
font-weight:bold;
margin:10px 0px 0px 0px;
}
#navigation,#footer{
color:orange;
text-transform:uppercase;
font-weight:bold;
margin:0px 10px 0px 0px;
}
#content{
width:790px;
}
#text{
float:left;
width:500px;
}
#summary{
float:left;
width:250px;
}
#html,#css{
width:300px;
border:thin;
border-style:solid;
border-color:gray;
margin: 0px 20px 10px 20px;
}
h3{
background:gray;
font-size:14px;
color:white;
}
.cssgraybackground{
background:gray;
}
a{
color:orange;
}
ul{
margin-left:0px;
margin-top:30px;
margin-bottom:30px;
margin-right:10px;
}
li{
list-style-type:none;
display:inline;
border-style:solid;
border-color:white gray white white;
border-width:2px;
margin: 0px 0px 0px 0px;
}
No comments:
Post a Comment