www.GetPedia.com
* The Ebook starts from the next page : Enjoy !

(http://veerle.duoh.com/comments.php?id=208_0_2_5_C)
Designing a CSS based template - part I
This is the start of a step-by-step based tutorial about how to
create a CSS based template page. This will be a tutorial
consisting of several parts: part 1 covers the creation of the
navigation buttons in Photoshop CS*, the 2nd part will be the
creation of the background, next on the list is the header and
layout of the page and finally the implementation in CSS and XHTML.
Now some of you may wonder why in God's name I start with the creation of the navigation
buttons, but my initial intention was to give a small tutorial about the creation of these simple
buttons. But once I was on the roll the thought came to my mind, why not do the complete
course.
Create a glassy beveled navigation button
Create an RGB document, 178 x 22px white background. Create a new lager (call it \"button\")
and fill it with gray #ececec. Add a new layer (call it \"highlight\") and draw a 1px white
highlight line on top and on the left (using the pencil tool, 1px width). Fade out the pixel line
on the left bottom a bit using the Erase Tool (select brush, 20px, 50% opacity).
Create a new layer (call it \"bullet\"). Draw the pixel bullet using the Pencil Tool (1px,
#727272). You can of course choose your own fantasy pixel bullet.

Create the glassy bevel effect by drawing a path (#d6d6d6) using the Pen Tool.
There you go! You have your button, now that wasn't so bad was it?
Creating the rollover effect.
To create the rollover effect we simply duplicate our layers and change the colors. First we
link the layers together in the Layer Palette. Then we choose \"New Set From Linked\" in the
Layer's Palette dropdown menu. Now duplicate that layer set by right clicking and holding
down mouse button (or click hold down mouse + control for Mac users with a one button
mouse) next to the layers' name. Choose Duplicate layer set in the dropdown menu. Name it
\"button over\".
Now you can go over each layer and change colors to create your rollover button. These are
the colors I used in my example here:
• button background color: #bfe3ff
• color of glassy bevel: #a5d1f3
• color of the pixel bullet: #e4001b
Download the Photoshop source file of this tutorial.
*Basic knowledge of this program is required.

Designing a CSS based template - part II
Today I will bring you the next step of our tutorial about designing a CSS based template
page. This part is about choosing the right color scheme and creating a nice background
pattern for our webpage.
As you all know, my initial idea was to give you a small tutorial on how to create glassy
buttons in an easy way. That's why it might look a bit odd to you that we will think about
color-schemes in the 2nd part of our tutorial. This should actually be our first step, then the
creation of the buttons, the background etc.
Choose your color-scheme
Anyhow you might have a head start on today's subject. To choose the right colors for your
weblog is a matter of personal choice, it reflects who you are, what you like etc.
Actually explaining to you what you should choose is probably impossible although there are
a few tips that I always try to follow:
• use at least 1 contrasting or highlighted color and use that to give accents to your page.
Use that color for your text links, this way they will be very visible.
• make sure you use not too much different colors, otherwise you'll end up with an
unattractive chaotic layout. I mostly take 3 colors, 2 subtle ones and 1 to highlight.
• from these 2 subtile colors I use darker and lighter variations, I'll stick within the same
range of those 2 colors. If you use less then 3 it might end up in a rather boring look,
although if you use enough variations you can get interesting results too. This could
work if you're looking for minimalism.
Use the Hue/Saturation (control+u for Win / command+u for Mac) to play arround and see
variations of your colors. Actually all those examples above are created this way, starting
from the first example and using this technique to achieve the other 3. To come up with my
first matching colors I used my own post as a guideline. In this post you'll find several color
wheels.
RECOMMENDED! If you still haven't a clue which direction you should start looking, then
maybe this movie might help you out. Actually this is really worthwhile watching for
everyone it's awesomely inspirational. (link seen on Angie McKaig's Assorted Sweets).

Time to draw some patterns
It's pixel drawing time now! Start with a document of 30x30 pixels, RGB, background color
of your choice. Draw some pixel dots using the Pencil tool in Photoshop. Here are some
examples that might get you started:
Most of the time you'll spend in creating these, is by experimenting in various ways.
Personally I don't know of any tricks on how to come up with ideas. What I mostly do is start
with a background, choose a color that is very close to the background and start drawing dots.
If I create a background with lines, I duplicate that layer, move it a bit up, down, left or right...
and start playing with the layer mode, opacity etc.
These enlarged versions are the actual patterns, cropped at the right place to achieve a
seamless repetition. The hard part is sometimes figuring out the right place to crop. The way I
do it is using the rectangle Selection tool, and draw a square (hold down the shift key to get a
square selection) from the top left corner to the bottom right corner of the pattern. To define
these 2 corners you have to think about the top left starting point of the pattern and go down
in a diagonal way and stop right before the exact same pixel as your starting point. Keep in
mind that for patterns where you use lines on 45° (like the blue pattern in my example) or my
blogs pattern that you have to watch all corners to get a perfect match.
Once you have your square where you think it should be go to the Image menu and choose
Crop. Select your pattern and choose Define Pattern... from the Edit menu and give your
pattern a name. Now you need to test your pattern. Create a new document of 300x300 pixels,
Select All (control+a for Win / command+a for Mac), choose Fill... from the Edit menu and
select Pattern from the dropdown menu and select your pattern from the 2nd dropdown, click
OK and check the result.

The next part will be about the actual framework and layout. The focus then will be about
how to create an attractive header and title, including title ornaments. Hope you enjoyed this
part and if you have any insights on the creation of backgrounds, please do share thanks ;-)
Download the pattern examples in Photoshop format.
Designing a CSS based template - part III
Finally we're off for the third part of our CSS tutorial. This will be our last design part, after
this it will be \"slice and dice\" time and the beginning of the XHTML and CSS conversion.
Here are some details of the final result:
I chose for the pink green buttons, maybe a bit girly I know but I like the combination of the
prink with the green.
Today we will create the entire template design. You'll get some tips and advice on how to
create a header background, how add a finishing touch like ornaments, and a few resources on
where to find those special Dingbats or ornamental fonts.
Creating the header background
In part I and II we created our buttons and chose our colors. Now it's time to look
for a picture that contains the colors of your preferred color pallet to create the
header background. If you look at my color pallet you see that we have green and
pink. I decide to use only the very flashy fluorescent pink for the little accents
(like the bullets in the navigation) and a darker cherry for my banner combined with pink and
a little green accent in our icon.
When looking in my iPhoto collection I came across this picture (taken at Ibiza btw). Since
the red of the flower is a bit too red I changed it to a more suitable pinkish color. I used
Adjustments >Hue/Saturation (control + u Win, command + u for Mac), chose \"Reds\" (to
change only the red color in my picture) from the Edit popup menu and set the Hue to +24.

Next step is choosing a nice detail that contains some suitable colors that might create an
interesting effect. This will all become clear in the next step when we will be adding our filter
effect. Creating this special background header will ask some creativity and it will need some
experimenting until you get what you like. This is the part of the picture I think could be nice
experimenting with.
The picture is of course reduced here, I started from a bigger image (1600x1200px). I added
one of my favorites filters on it Filter > Artistic > Paint Daubs. In Photoshop CS it's really fun
playing around with the Artistic filters since you not only get to see a live preview of the
result, you also have an overview of all the possible effects shown by little thumbnail image.
This makes it easy to play around until you have the effect you want. Here is my result:
This image is blended into my cherry colored background. As finishing touch I drew some
lines (paths) using the Pen tool. I command (Mac)/control (Win) clicked the layer and used
the Brush tool to color the border of my selection pink and I faded it a bit by using an Opacity
of 30 for that layer. Then I duplicated this layer, flipped it a bit, rotated it etc. then again
duplicate it etc.
Download a QuickTime movie to see how this is done.
I added a little ornament on the right (created with the font Tamuz). We will get back on the
ornaments later on, but this is the result so far:
The title of our blog template
The title of your blog is something personal and I kind of like it when it has a little icon or
logo. After all you want you blog to be something special, something recognizable, something
you can associate yourself with etc. For this tutorial I chose a cactus, but to be honest further
then the fact that I love cactuses it has little extra meaning. But my choice is also because this
little icon suits perfectly in the design and the color scheme I chose. And finally, the font I
used for my title is Bon Guia. Here is the final header:

Some links to get you started:
• Minion Ornaments, Tamuz, Klunder Script Kreatures, Big Cheese from Emigre
• Adobe ornamental fonts (like Woodtype Ornaments or Poetica Ornaments)
• a list of free Dingbats fonts
The final result
Further from the header and the buttons we haven't got any big challenges to solve. Let's
implement all this together in one page and see what the final result is. The final touches are
of course as important as the rest so don't forget to add a little icon or ornament. In my
template I used a green Minion Ornament next to the title and I created little exit link icons
for my favorite links. This doesn't look bad, hope yours look even better at the end and
hopefully you had some fun creating it! Don't hesitate to sent us a url to share the result ;-)

Designing a CSS based template - part IV
Now that our color paint and pencils are tucked away, we can move on to part 4. In this
chapter we will concentrate on slicing our design and determine the DIV containers.
The question you need to ask is, what are the different parts of our design? What are the
different components of this page? By doing that we'll have our answer on how to slice it up.
If you are a web designer it might be a rather easy answer since you are thinking about the
next step, the dividing into separate DIV containers ... and no, no tables. With CSS and
XHTML we create not only lighter web pages, we also make things much more flexible and
much more accessible.
This is how I see my different areas, components or whatever you call them:
• the header
• the left
• the content
Exporting the gifs and jpegs
These are the different elements you need to export to gif or jpeg:
• 1. header
• 2. bg_navbutton
• 3. bg_navbutton_over
• 4. bullet_extlink
• 5. bullet_title

Ok, you probably think, \"what about the background?\" That's right, it's not listed here. This
needs a little explainging. We want a smart solution, since we still want our content centered
if we stretch our window. Here is how you should export your background. It's 1600 pixels
wide and 5 pixels high (this should be enough... unless you are the proud owner of an Apple
30 inch Cinema Display ?).
Implement the background by using CSS
This is the CSS code we need to have our centered background:
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
}
Our background is a 5 pixels high \"line\" which is repeated vertically (repeat-y) starting
horizontally centered (50%) at the top (0) of our browser window. Background-attachment:
fixed, means the background will not scroll with the content, it is \"fixed\". We use the body
tag as our selector, since our background should be applied to the entire body of our page.
View the result here.
Adding our first layout DIV containers
Now we will be adding the first layout DIV containers: our header, left and the content.
Here is the CSS for our header:
#header {
text-align: center;
}
Now we use an id selector to create the header container div. An id selector is always applied
to only 1 element of the page. An id attribute must be unique within the document. Our header
needs to be centered, that's why we use \"text-align: centered;\" This line is added to our code
in the body:
<div id=\"header\"><img src=\"images/header.jpg\"
alt=\"My blog\" width=\"692\" height=\"90\" /></div>
You'll notice that when you add this header image that it doesn't align at the very top of the
page. That's why we add a \"margin: 0\" and\"padding: 0\" into our body tag selector:
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
}
View the result here.

If all of this is really very new to you, then this full introduction to CSS is a must read to get a
better understanding of the matter. Good luck! ;-)
Designing a CSS based template - part V
In our previous part we implemented our very first CSS code. In this part of the tutorial we
will be implementing our navigation on the left.
But first things first. When creating webpages we always have to make them as accessible as
possible. If you read the comments on part part IV, you'll notice that someone mentioned it
would be better to use a h1-element for the main header since this is more semantic code and
it makes a site more accessible to search engines as well as people with no CSS. This is of
course too important to overlook, so I've altered our code this way.
The image replacement technique
• Adjusted webpage

This technique is actually called the image replacement technique. It means that we use text in
our HTML code instead of the actual image. The header image will show in browsers that
support the CSS (as a background image \"background: url(images/header.jpg)\") and the text
will be invisible (because of the \"text-indent: -9999px\"), since our CSS code places the text
outside our viewing area. In older browsers or in screen readers (used by blind people) you'll
see the text instead. This way we have more accessible code.
h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
The width and height are necessary to define the space for our header background image. The
\"padding:0\" and \"margin:0\" are needed to make sure our image aligns nicely to the top of our
page. Furthermore, I've moved the \"text-align: center\" into our body tag selector since all the
content should be centered. However, the content within the container should not be centered,
so we add a \"text-align: left\" there. Our container has \"margin: 0px auto\" which means it will
appear at the very top (0px) and centered (auto).
Implementing the navigation
To implement the navigation buttons on the left we first create an id container holding the
content on the left:
#left {
width: 178px;
}

So far the only thing we need to define is its width. Within this left container we have the div
id container for the navigation, called navcontainer. The best way to create a navigation with
CSS is to use a bullet list as HTML code and create CSS styles to it to change its design. Like
this (\"#\" is used as a dummy link. ):
<div id=\"navcontainer\">
<ul>
<li><a href=\"#\">Home</a></li>
<li><a href=\"#\">About me</a></li>
<li><a href=\"#\">Contact me</a></li>
<li><a href=\"#\">Articles</a></li>
<li><a href=\"#\">Photo roll</a></li>
</ul>
</div>
This creates a simple bullet list. Since we don't want bullets but nice buttons instead, we will
remove those bullets in our CSS and use background images instead. This is the CSS code:
#navcontainer {
width: 178px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}
The first piece of code defines the width of the navigation container. The second part defines
the \"ul\" tag within the navcontainer. \"margin:0\" and \"padding:0\" makes sure there is no space
between and around the buttons and it removes the left-indentation. \"list-style-type: none;\"
removes the standard HTML bullet. Then we have the text specifications and the last one is
there to create a white line at the bottom of our navigation to finish the navigation nicely.
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
This defines the \"a\" tag or link tag within our navcontainer, which affects each button of the
navigation. First we have \"display: block;\". Display sets how or if an element is displayed.
Here it's set to \"block\" which is needed to convert our links to actual \"blocks\" or actual
buttons. Below we define the width and height of each button.
Rollover states can be achieved by converting the a elements within the list to blocks using
display: block; and swapping background colors using the a:hover pseudo-class. This is how
the code looks:

#navcontainer a:link, #navcontainer a:visited {
background: url(images/bg_navbutton.gif);
color: #5C604D;
text-decoration: none;
}
#navcontainer a:hover {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
The color sets the \"color\" of the text and the \"text-decoration: none\" is there to remove the
standard underlining of a link.
It's always necessary to make your navigation as clear and simple as possible, so that's why I
added an extra style to apply to the button of the current section. I've called it \"current\" and
this is the CSS code:
#navcontainer li a#current {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
This style defines the \"current\" id within the bullet link tag (li a) of the navcontainer. The
properties and values listed are the same as our hover state. The only thing needed now is to
add the current id to our HTML code:
<div id=\"navcontainer\">
<ul>
<li><a href=\"#\" id=\"current\">Home</a></li>
<li><a href=\"#\">About me</a></li>
<li><a href=\"#\">Contact me</a></li>
<li><a href=\"#\">Articles</a></li>
<li><a href=\"#\">Photo roll</a></li>
</ul>
</div>
• View the final result

A lot of good CSS navigation examples and tutorials can be found on:
• Listamatic, one list
• Listamatic 2, nested lists
• Listutorial, tutorial on CSS based lists
That's it we have our navigation up and running!
Designing a CSS based template - part VI
Now we will add the content part of our webpage. Next week we'll be adding the (favorite)
links under our navigation and I'll also explain how to create a footer.
Adding the main container for the content
First we add a new id selector in our styles and we give it the width 514px (692px - 178px):
#content {
width: 514px;
float: left;
}
Since the navigation \"floats\" on the left, we need to add a \"float: left\" to our \"left\" id. But we
also need to add it to our \"content\" id selector because it also floats left within our main id
container:
#left {
width: 178px;
float: left;
}

We add this to our XHTML code:
<div id=\"content\">this is the right</div>
If the above doesn't make any sense to you, I'm sure you'll find these very helpful:
• More about Float basics
• Floatutorial
Still, our content now sticks to the navigation on the left, we want a bit of space of course so
we add some padding to our style of the content container:
#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}
Or we can use the shorter version:
#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}
This is exactly the same: the first value defines the padding for the top, the 2nd for the right,
the 3rd for the bottom and the 4th for the left. If we add the padding we need to edit the width
of our container since the actual width has now increased with 20px padding (20px left, 0 for
the right). We need to change this to 494px. But since we want some space on the right (so
that the text doesn't stick to our right border) we deduct it with 15 and use 479px instead.
You could argue with me on the last part and say \"hey, why don't you just stick to \"width:
494px\" and use \"padding-right: 15px\"? Aha good point! Yes I tried that at first and all looked
well in Safari, FireFox and Mozilla, but it didn't in Internet Explorer. The entire content
jumped underneath my navigation (underneath my \"left\" id container). Apparently there
wasn't enough space left for I.E. to make it fit on the right. This is actually the only
explanation I have for this. By using my little trick everything is still perfect in every browser.
Adding the title
To create our title we add a header tag in our XHTML code:
<h2>This is the title</h2>

Now we will add a style for this tag to define the look of it:
#content h2 {
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #80866A;
background: transparent url(images/bullet_title.gif) no-repeat;
width: 454px;
padding: 0 0 0 30px;
}
We use #content h2 which means we give a style to the header 2 tag (h2) within our content
id. It means that all h2 tags within the content div will be viewed in this style. We could also
just use \"h2\" without the id preceding, this would mean that this style would be applied to all
h2 tags within the webpage. Adding this id in front can be handy if you want to use another
styled h2 in the left container (#left h2) for example.
<div id=\"content\">all h2 tags here will have this style</div>
The first line of our CSS sets the style for the font: the font-weight (normal), the font-size
(18px) and the font-family. Again, just like the padding, this is the short version, it sets all
these values for the different font properties in 1 line of code. Next we have the color of the
text, third the values for the background which is our bullet. Again I've used the short version,
I define the background-color (transparent), the background-image (url to the image) and the
background-repeat (no-repeat) just in 1 line. Last with the total width of our header and the
padding (top, right, bottom and left).
Adding the text
This is the style for the text of the content:
.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}
We use a class now (dot in front) since we will use this style repetitively in our webpage. The
first line sets the style for the font, starting with the font-size (11px) and line-height (18px)
followed by the font-family. In the 2nd line we define the color of the text. And last but not
least we add some space between paragraphs by adding a margin-bottom of 10 pixels.
In our XHTML code we add a paragraph tag under the h2 tag that holds our text and we apply
the class \"text\" to it.
<p class=\"text\">Here comes the text</p>

Adding the image
This is the style for the image that is aligned right:
.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}
Again we use a class for this since we should be able to apply this style a couple of times
within our webpage. Our image floats right within our text div container, so we add
\"float:right\". Next we set a padding of 7px around the image and we add a white background.
This will create a white area of 7px around the image. Next, we add a 1 solid pixel border in a
specified color. The last line is again the short version of border-width (1px), border-style
(solid) and border-color (#bac1a3). You can add another class for the left aligned images and
call it \".imageleft\" and use the same properties and values except for the floating part, you
change \"float: right\" to \"float: left\".
Here is the final result

Designing a CSS based template - part VII
UPDATE: Before we start part 7 I want to correct a minor mistake of mine, mea culpa. When
adding blocks of text I told you to put this between div tags but that is not semantically
correct. It should be between paragraphs instead. This way everything still looks fine when
the CSS stylesheet is dissabled. Doing so allows you to use top and bottom margins to adjust
the vertical spacing between paragraphs. This way we also don't need to use linebreak tags
anymore.
With this out of the way, bring on part 7. We will add a footer that sticks to the bottom of the
browser window. I decided not to add the favorite links in this part yet because it would be
too much. After all, this will be rather challenging and there is a lot to read too.
First I need to inform you that things are quite different when creating a footer that sticks to
the bottom of your browser window in CSS compared to table layout. Unfortunately since
Safari is such a young browser some things are still missing like min-width and min-height
which we need for our footer (min-height). The good news is that support for this is coming.
More on vertical positing and adding footers can be found in this very interesting article on A
List Apart by Bobby Van Der Sluis. Actually, I recommend you to read this before continuing
since it explains it all so clearly, and I really don't think I can do a better job here.
After reading the entire article you should know that we need to have 2 major containers to
make this work: 1 container holding all the content and one container with the footer. Our
container that holds the entire content is the \"#container\" id. This is the very first div in the
code (after the body tag) which closes just above the closing tag of the body. In other words
our footer div should be placed below the closing tag of the \"container\" id div:
<html>
...
<body>
<div id=\"container\"> ... </div>
<div id=\"footer\"> ... </div>
</body>
</html>
This is the CSS code we add for the footer:
#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}

We add a footer with a dark green background and we give it a 9 pixel border at the top, in the
same color as our frame. We define width and add \"clear: both\", which means that there are
no floating elements allowed on both the left or right side of the footer. The footer is aligned
the same way as our container by \"margin: 0px auto\" which has the same effect as a centered
aligning. To leave some space around the text we add a padding of 5px on top and bottom.
The position of the footer is relative. Explanation about positioning of elements can be found
here on the W3C website.
Next we add styles for the text and text links for our footer:
#footer h2 {
maring: 0;
text-align: center;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #D3D8C4;
}
#footer h2 a:visited, #footer h2 a:link {
color: #D3D8C4;
text-decoration: none;
border-bottom: 1px dotted #D3D8C4;
}
#footer h2 a:hover {
color: #F7F7F6;
text-decoration: none;
border-bottom: none;
background-color: #A5003B;
}
We use h2 tag for our text:
<div id=\"footer\"><h2>....</h2></div>
We add this piece of code just under the closing div tag of the \"container\" id, in other words
just above the closing body tag.
Next we add the javascript that Bobby Van Der Sluis suggests. This is necessary to make sure
the footer sticks at the bottom of the browser window in Safari.
Make sure that the id you're referring to in the javascript has the same name as the one in your
content.
If you preview what we have so far, you'll see that the footer doesn't show in Safari.
What is happening in Safari? It might (not sure) occur because we have 2 (left) floating
containers (#left and #content) above that needs to be cleared. I've written an article about this
collapsing effect a while ago, but Eric Meyer published a full article about this matter which
make things even more clear. As Andy Budd mentioned in my comments back then \"When
you float something you take it out of the normal flow of the document, thus it takes up no
vertical height.\" Couldn't said it better ;-)

To fix this we need to add a clearing div:
<div class=\"clear\">&nbsp;</div>
We add this class:
.clear {
clear: both;
}
Here is the final result.
In our next part we will be adding the favorite links under the left navigation buttons. Hope
you have learned a lot ;-)

Designing a CSS based template - part VIII
This is the last part of our tutorial. We will add the favorite links on the left and link our styles
in a separate CSS stylesheet.
Adding the XHTML code
First we will add the xhtml code for our favorite links:
<div id=\"favlinks\">
<h2>My Favorite Sites</h2>
<ul class=\"extlinks\">
<li><a href=\"http://stopdesign.com/\">Stopdesign</a></li>
<li><a href=\"http://www.simplebits.com/\">SimpleBits</a></li>
<li><a href=\"http://www.mezzoblue.com/\" >Mezzoblue</a></li>
<li><a href=\"http://www.zeldman.com/\">Zeldman</a></li>
</ul>
</div>
First we put all our links in a div container and give it an id name \"favlinks\". This id is
necessary to define width, margin and padding of the box containing our title and links
through styles. Next we have our title between header tags. This will also be styled through
css together with our list below it which also has a style defined. For the links we use a class
style because this way we can use it repetitively in our page. So you could add another similar
list of links with a header title. But if you do so make sure it is added in the \"favlinks\"
container div or add another div id around these links to keep everything in the right place.
The CSS code
First we define our \"favlinks\" div id container:
#favlinks {
width: 163px;
padding-left: 15px;
margin-top: 10px;
}
We define the width of the box and give it a padding-leftso that it doesn't stick to the left. We
also leave some extra space at the top and add some margin there. The width of our container
is not 178px like our navigation, it is 163px since we added a left padding of 15px (163+15
makes 178). This is called the Box Model, also nicely presented in 3D by Jon Hicks.

#favlinks h2 {
font: normal 16px Georgia, Times New Roman, Times, serif;
color: #5C604D;
margin: 0 0 10px 0;
padding: 0;
}
Next on the list are the styles for the header tag where we have our title. First 2 lines should
be obvious by now, color and font styles. Below the padding and margin. We only added a
10px margin on the bottom. Padding and margins are needed for the header tags if we don't
want to have very big gabs between the title and the links below, just some space exactly how
we want it, and for me that is 10px at the bottom.
#favlinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}
On to our next step in defining our listed links. First we make sure the standard bullet is
hidden and that our margins and padding are set to zero, just like we did for the navigation in
part 5.
ul.extlinks li {
background: url(images/bullet_extlink.gif) no-repeat 0 3px;
font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
padding-left: 12px;
}

We've added a class called \"extlinks\" to define our links. We use \"ul.extlinks li\", which means
that we style the li tag within the ul class \"extlinks\". First we add a non-repeated background,
our bullet and we position it 3px from the top (y position) and 0px from the left (x position) to
make sure the bullet aligns perfectly next to our links. We define the font style and then we
add a left padding to make sure our text leaves some space on the left for our bullet.
.extlinks a:link {
color: #A5003B;
text-decoration: none;
border-bottom: 1px dotted #A5003B;
}
.extlinks a:visited {
color: #6F2D47;
text-decoration: none;
border-bottom: 1px dotted #959E79;
}
.extlinks a:hover {
background-color: #C3C9B1;
color: #A5003B;
text-decoration: none;
border-bottom: 1px solid #A5003B;
}
And last but not least we define the colors and other styles for our links. We use a bottom
border of 1 pixel which becomes solid when we roll over. To make sure we don't have a
double border, we need to hide the standard underlining by adding \"text-decoration: none\".
Font styles aren't necessary to add since they are already defined in the li tag style. We've also
added a background color in the rollover state. We degraded the color a bit for the visited
links and changed the bottom border with a subtile color, less visible. This way people know
which links they've visited, things remain subtile and you can still make the difference. When
adding these styles please make sure you that you are use the right order first links, then
visited, hover and last active (if you want). There is a nice trick I learned from reading The
Web Standards Solutions book by Dan Cederholm from Simple Bits, to makes sure you
remember the correct order: LoVe /HAte (L from links, V from visited,...)
Here is the final result.

Creating the external stylesheet
Now that we have finished our design and I hear you yelling \"Huray!\" Just one more
(important) thing (trying not to sound like Steve Jobs here...). You've noticed that I always
include my styles within my webpage. But most of you will know this is not the right way to
do this. You should put your styles in a separate stylesheet and link it to your document. I
only did it this way to make things easier for you to learn because it's all there in 1 document.
But like I said this is NOT the way. So we copy all our styles and paste them in a new
document and save it as \"styles.css\".
Linking the stylesheet
<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"styles.css\" />
This line of code is what we replace our old code with. Since this style sheet will be used to
be displayed on a computer screen, we add media=\"screen\". You could add another stylesheet
by adding a link to another stylesheet and add media=\"print\". This stylesheet will then be
applied when people print your webpage. Very handy if you have a heavy colorful design on
your screen and if you want to make sure when people print it it looks perfect on paper too.
Other media types are also possible, more info can be found here.

Here is the final result with external stylesheet.
Now that our series are finished I'm really curious what you have done with the knowledge
learned here. Don't hesitate to share what you've created in the comments. Hope you enjoyed
it.