CSS Web Header Beginner Tutorial

CSS Web Header Beginner Tutorial

In this Tutorial we will learn how to use CSS to create a basic Web Layout, great for beginners!

This tutorial has been viewed: 11764 times

 

One of many css tutorials for beginners

Welcome to the CSS Header Tutorial! Today we are going to be building a scalable cross platform header which will validate strict XHTML on W3C. Our finished design will look like this:

This CSS Web Header Tutorial is an excellent supplement to all of our photoshop tutorials.

Note: This Tutorial assumes you have a basic knowledge of HTML/CSS editing

Click image to preview CSS Header

Step 1: Your going to need to download all of the images that I use here:

Download CSS Header Files
(size 14.1KB files: index.html, headtop.png, logo.png)

Make sure you save all the files in the same directory!

Step 2: Your going to need to open a text editor (like Notepad Start – Run – Type Notepad) to edit your HTML and CSS create a file named index.html Tip: I personally use VIM as an editor.

Step 3: First of all we need to create the HTML of our website and assign all the various areas different ID’s

index.html

————————————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>

<title>CSS Header</title>
</head>
<body>
<div id=”wrapper”>

<div id=”header”>

<div id=”logo”>

<img src=”logo.png” />

</div>

<div
id=”mainMenu”>

<a href=”link”>Home</a> |
<a href=”link”>Download</a> | <a
href=”link”>More Links</a>

</div>

</div>
</div>

</body>

</html>

Lets break that down:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>

That bit of code declares your website as an XHTML website, which helps be more cross browser compatible (e.g. Internet Exploer/Firefox)

The rest of the code assigns the areas of your page to different ID’s so you can style them in CSS e.g.

<div id=”wrapper”>

Right now your website wont look like much so you will need to use CSS to design it

Open a new document and save it as style.css in the same directory as index.html

Let’s look at the coding for style.css

style.css

———————————-

body{

margin: 0;

padding: 0;

font-family: Verdana;

}

a{

text-decoration: none;

color: #FFFFFF;

font-weight: bold;

}

#wrapper{

width: 100%;

background-image: url(‘headTop.png’);

background-repeat: repeat-x;

}

#header{

width: 80%;

height: 194px;

margin-left: auto;

margin-right: auto;

position: relative;
}

#logo{

float: left;

margin: 80px 0 0 0;

}

#mainMenu{

float:right;

margin: 160px 0 0 0;

color: #FFFFFF;

font-size: 11px;

}

Alright so we will look at it from the top, we first change the body attribute to have no margins or padding this allows the website to be Flush with the window, we also change the Font to Verdana

Next we change the appearance of the links (the a attribute) set it text-decoration to none (no underline) color to #FFFFFF (white) and it’s weight to bold

Now the wrapper is quite interesting. we set the width to 100% of the entire page, set the background image to ‘headTop.png’ and the background-repeat to repeat-x. what that does is makes the background only repeat on the x (horizontal) axis so that it doesn’t spread across the entire page, it only spreads on top. Thats a pretty nifty attribute

Hopefully you are noticing how the #idName controls the id that’s in the HTML e.g. #wrapper controls the div that was given the id of wrapper

The next id we change is the header Which is where the logo and the links are. The width is set to 80% of the page height to 194 pixels (the height of the background image) notice the margin-left and margin-right are set to auto, this is what causes them to center.

Now for the Logo it is set to float: left, this allows it to align to the left of the div without ‘pushing’ things down. I used CSS Shorthand on the margins like this margin: 80px 0 0 0, what does that mean? Well it’s like this margin: top margin#, right margin#, bottom margin#, left margin#. So essentially I only set the Top Margin to 80 pixels which pushes the logo down 80 pixels.

For the Main Menu you do essentially the same thing as the Logo except float it to the right and push it down a bit more pixels.

Don’t forget to link the HTML file to the CSS file like so

<link rel=”stylesheet” href=”style.css” type=”text/css” />

Goes into

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
xml:lang=”en”>
<head>

<link rel=”stylesheet” href=”style.css”
type=”text/css” />

<title>CSS Header</title>
</head>
<body>

My advice is to use this tutorial and then mess around with the settings until you figure out what they all do in CSS

Please Contact Us with any questions or comments

Thanks for reading

Tags: , ,

 
Added By:
  1. Jordan Garn Said: Comment by Jordan Garn on January 8, 2009 at 1:54 am | Permalink
     

    I hope you enjoyed the Tutorial!

    Reply

  2. Brian Said: Comment by Brian on December 15, 2009 at 6:13 pm | Permalink
     

    Awesome tut! Very easy to follow and quite useful.

    Thanks

    Reply

  3. Ignore this tutorial... Said: Comment by Ignore this tutorial... on July 6, 2010 at 4:24 pm | Permalink
     

    You shouldn't be using those spans… they should be DIVS…

    Reply

  4. Ignore this tutorial... Said: Comment by Ignore this tutorial... on July 6, 2010 at 4:25 pm | Permalink
     

    To put it even less subtly: spans are for INLINE content (i.e. content that appears on the same line), divs are for block elements.
    Your page layout should be done using DIVS… So please remove this tutorial, as you're misleading a lot of people.

    Reply

  5. PSDesignZone Said: Comment by PSDesignZone on July 6, 2010 at 5:17 pm | Permalink
     

    Yeah you're right it should be DIVs, I changed it from Spans to divs.

    Reply

  6. public speaking seminar Said: Comment by public speaking seminar on January 2, 2013 at 3:21 am | Permalink
     

    I like the way you wrote this article. I do hope you continue to write more articles like these and touch on more interesting points.

    Reply

 

Leave a Comment