Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Header tag using CSS

    ●  Headers are a basic part of most web pages. Headers and banners across the tops of your pages set the tone for your entire site.

    ●  The viewer's eye constantly checks them for reassurance and guidance that they are on the same site.

Learn About:

CSS Code Body Tags HTML tags

  •   If you've been following this series of tutorials, you have created a CSS document with body, html, container tags, and maybe some sort of background image or color.

  •     This tutorial is forth in a series:

1 - Body    2 - HTML    3 - Containter  4 - Header    5 - Nav     6 - Content   7 - Footer  

Step #1: Create a New ID ~

Hopefully you've already done the CSS Container tutorial …

Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and click on

… select ID and call it header.

Step #2: Format the #header width ~

Click Box, set the width to 100 % [percent] …



The width should be 100 percent because the container is only 80 percent.



Therefore the width is 100% of 80%. Confusing? Yes. Will you eventually get it? Yes. So Don't Panic …

Step #3: Height ~

Set the height to 200 pixels or whatever the height of your banner image is …

Step #4: Color ~

Choose another color in Illustrator from this tutorial - (If you don't have your swatch colors yet - get them now) …

… copy the HEX number of your color …

… click Background …

click background

… and paste the number of color into the Background-color of your header.

paste the number

Click OK.

Step #5: Insert Header Div

Open your index page for this project …

… click inside the #container div & delete the text, if any.

Then go to: Insert > Layout Objects > Div tag

… and insert the header div.

Step #6: View your Work ~

Hit to view your work.

Here's what we've got so far …

so far

Don't panic if yours doesn't look like this.

Just keep going. Remember, these assets are just general instructions meant to be modified to your individual needs.

Last Step: Save and Attach ~

Make sure your new styles.css document IN THE ROOT FOLDER OF YOUR NEW PROJECT, attach it and continue working …

new styles sheet

Other Resources: