How to Create a CSS Header
Cascading style sheets, or CSS, help you organize the design of your Web pages through the use of classes. A class is a set of style properties that specify size, positioning or other behaviors for the elements assigned to the class. Create a header CSS class and assign it to a div element to create a header section on your Web page. This class can be reused as a template on many Web pages.
Other People Are Reading
Instructions
-
-
1
Add the following code between the <head> tags of your HTML document:
<style type="text/css">
.header{
background:#A0A0FF;
padding:3px;
margin-bottom:3px;
}
body{
margin:0px;
padding:0px;
}
</style>
The .header block of code defines the style properties of your header. The background property specifies its color. Use any valid CSS color name or a hexadecimal RGB value, such as #A0A0FF. The padding property specifies the amount of gutter space around the content in the header, and the margin-bottom property separates the rest of the page's content from the header. The body block removes the gutter space of the whole page, so that the header can meet flush with the edge of the browser window.
-
2
Place a div element at the top of the body section of your HTML document, assigning it to the header class with the class attribute:
<div class="header">Header Content</div>
-
-
3
Save the page and load it in a Web browser. Your header appears at the top of the page with its height sized to accommodate the content within it. Any content placed after the div element appears below the header. Reuse this class on any page you want to have a header.
-
1
Tips & Warnings
Place your header class in an external style sheet to make the properties even more reusable.
