How to Use CSS Div Tags
Web developers often divide Web pages into sections, such as a header, body and footer. Several elements within HTML are used to define a Web page's layout, including tables, layers and div tags. Tables used to be the preferred choice for dividing Web pages. However, because of the limitations of tables related to page load, flexibility and compatibility with Web browsers, more Web authors are using div tags and CSS for their layouts and formatting.
Other People Are Reading
Instructions
-
-
1
Click "Start," "Programs," "Accessories" and "Notepad."
-
2
Type or copy and paste the following HTML code into Notepad:
<html>
<style type="text/css">
#header {
background-color: #0066FF;
height: 50px;
width: 600px;
}
#body {
background-color: #FFFF99;
height: 300px;
width: 600px;
}
#footer {
background-color: #009900;
height: 50px;
width: 600px;
}
</style>
<body>
<div id="header">This is a header of the web page</div>
<div id="body">This is the body of the web page</div>
<div id="footer">This is the footer of the web page</div>
</body>
</html>
The preceding code uses HTML div tags (<div></div>) to create a page layout that consist of a header, body and footer. It uses CSS coding within the style tags to format their attributes, including their background color, width and height.
-
-
3
Click "File" and "Save as." Select "All files" as the "Save as type."
-
4
Name your file and place an .html extension at the end of the file name to save it as an HTML document. Example: mypagelayout.html.
-
5
Locate your document on your hard drive and double-click on it. It should open up in your Web browser. You should see a color page layout consisting of three divisions: a header, a body and footer.
-
1
