CSS Tutorial: CSS Codes in the 3-Column Website Template Explained

*This is a very long article. Please use the CSS Tutorial: Content links in the right navigation column to navigate to the desired section of the page.

This tutorial is based on the style.css file in the free 3 column website template. You should download it so that you can follow the step by step explanations.

About Cascading Style Sheets (CSS)

You can create a website with only HTML codes but updating it will be an unnecessary chore. That's why HTML codes go hand in hand with CSS codes to make fancy and easy to update websites.

CSS codes and HTML codes are Siamese twins. Just imagine one big warehouse that contains all the household furniture you can think of, all thrown together. Then imagine a house that has all the furniture neatly arranged in their rightful place. You know; the couches in the living room, the beds and the wardrobes in the bedrooms and so on. The first example is a website without CSS while the second is a website styled with CSS codes.

The image below is this very webpage without CSS. Compare that to what this page looks like with CSS. No doubt, CSS makes the page look better.

You can create this website to look the same as what you can see with only HTML codes. But please don't do that! You will spend forever creating your website and writing thousands more HTML codes than you would normally need to write for your website. I do not even want to talk about the amount of time it will take you to make a simple change to your website.

In fact, now that I know the advantages of using CSS, I cannot create a website based only on HTML codes even if the website will have only 2 pages.

There are two ways you can apply CSS to your website:

Internal Style Sheets

This is when you have the CSS codes sitting right inside each page of your website. This means that the CSS codes are only styling the HTML elements of that page.

I personally see this as the same as creating your website using only HTML codes. When you want to make simple style edits to your website, you will need to go into every page to update the styles. I am not a huge fan of this method of implementing CSS on your website.

The only exception is if you need to display one page of your website in a completely different way from the rest of the pages of your website, then you can implement internal CSS for that page. But once you need to use this same style for more than one page, it is more advisable to use an external CSS file. And this brings us to the other way you can implement CSS on your website.

External Style Sheets

To use external style sheets on your website, all you need to do is create a separate file that contains all the CSS rules. Then place a link to that CSS file in the <head></head> section of your HTML file. When browsers try to read your HTML codes, they will follow the link to your style sheet and use its rules to display the contents of your website.

You can link to more than one external style sheet from the head section of your web pages. And because it is called "Cascading" Style Sheets, the browsers will read the rules in the order you place the files in your index.html file. This means that if you have contradicting rules for the same HTML element in the two files (you shouldn't), then the browser will apply the last rule it sees in your style sheets to the element.

With external style sheets, you can change the style and layout of your website in minutes, even seconds depending on the change you want to implement. I can change the color of all the hyperlinks in the content of this website in seconds. It will actually take me a longer time to upload the new CSS file to my webhost than to update it. If you create your website with only HTML codes or internal style sheets, you will have to go into every page and make the change. Just imagine if you have hundreds of pages on your website!

So please don't be afraid to learn CSS. Focus on the positive. Think of all the work you will save yourself by acquiring this simple skill.

Yes, it is actually simple depending on how you view it. If you think that CSS and HTML are difficult to learn, try learning Javascript, C++ or VBasic. HTML and CSS codes are written in English while the other programming languages are written in well, a strange language.

Parts of a CSS Rule

In every CSS file, you will see something like this:

abc {font-size: 1em; color: #0000FF;}

To make this easy to read, you will also see it displayed this way:


abc {
font-size: 1em;
color: #0000FF;
}

The two CSS rules above are the same, but the second one is easier on the eyes, isn't it?

Now let's see what the items mean.

abc is the CSS selector. This is usually an HTML element (body, image, paragraph etc) that you want to style.

Sometimes you see CSS selectors with a hash (#) or a dot (.) in front of it. Examples from the style.css file include: #container, #header, .logo and .banner. These are referred to divs and classes respectively. I will get to that later.

Inside the braces are the declarations for the CSS rule. These declarations are what actually style the HTML elements.

In the CSS rule above, there are 2 declarations: the first one, font-size: 1em; assigns a font size of 1 em to the HTML element abc. This means that in your index.html file, anywhere an HTML tag with the name abc appears, it will have a font size of 1 em.

A CSS declaration must end with a semi colon (;). In fact, if you omit this simple punctuation mark, the CSS code and the one after it will not be applied to your HTML.
In the declaration font-size: 1em; the part that says font-size is known as the property while the part that says 1em is the value. A CSS declaration must have a property and a value, separated by a colon (:). Once again, if you omit this simple punctuation, the CSS code concerned and the one after it will not work.
For declarations that have a value with a unit (1em), the number and the unit must be written as one word. For example 1 em or 1 px is a no-no, rather you should always write these as: 1em and 1px respectively.

The second CSS declaration is color: #0000FF;. This means that every HTML element in the index.html file named abc will have the color with the hex code #0000FF. I will talk more about hex codes and other values that the color property can have later.

These are all you need to know about CSS theory for now.

If we keep talking about CSS theory, we will never get to the contents of that style.css file. You can search for CSS in Google to read more about it. Meanwhile, I will be mentioning what you need to know as we go along.

All the CSS Codes: Explained

As with the HTML tutorial, I will make this tutorial based on the style.css file for the free 3 column website template. I will try as much as possible to explain all the CSS codes in the style.css file and I will do that in the order of occurrence in the file.

CSS Comments

In the style.css file the first thing you will see is:

/*If you have any questions about this template, contact www.tpcreate.com*/

This is a comment in a CSS file. CSS comments are enclosed in /* and */. Notice that the asterisk closed before the forward slash. Opening a comment with /* and closing it with /* will not work.

Comments are ignored by browsers. You should use comments to make notes on your CSS file so that you will remember what does what in the future. You will see more examples of these in the style.css file.

I notice that I start out with few CSS codes in my CSS files but this steadily increases as I add new functionality to my web pages. At some point, I would start wondering what some codes are meant to be styling especially if I used that code to style only one item on my website.

If you used Notepad++ to open this file, you will notice that the comment is green in color. This is how Notepad++ displays comments. When you do not close your CSS comments properly, all your codes from that point of the error forward will turn green, thereby drawing your attention to the error.

Global Reset


*{
margin: 0;
padding: 0;
}

When used as a CSS selector, an asterisk (or wildcard) is the universal selector used to apply CSS rules to all the HTML elements. In this case, the universal selector (*) is used to zero (reset) the margin and the paddings.

Each of the different browsers we use to surf the web (Internet Explorer, Firefox, Chrome etc) apply their own default style, especially relating to padding and margin to HTML elements.

We do not know what these default values are so it will be safe to apply a universal value of zero to the margin and padding properties. We will then specify our own values when we want to. This way, when we apply a padding of say 5px to an HTML element, we are sure that it will have a padding of 5px, not something like (5 + x)px.

The Body Selector


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%; 
color: #333333;
background-color: #d3c2a8;
width: 100%;
height: 100%; 
}

The body selector contains all the styles that you want to apply to the whole HTML document. Remember that in our index.html file, the main parts of the webpage are the <head> and the <body>.

Everything that your website visitors see appear between the <body> and </body> tags.

So whatever values of the properties you declare in the body CSS selector will be applied to all the HTML elements within the <body></body> tags.

Now, let's take the properties and their corresponding values one after the other:

The Font Property

font-family: Verdana, Arial, Helvetica, sans-serif;

font-family is the CSS property used to describe the type of font that you want to display your HTML element with. By specifying this in the body selector, you are telling the browsers that you want all the text on your web pages of your website to be displayed using certain font types; in this case, Verdana, Arial, Helvetica and sans-serif.

So why can't we specify just one font type? This is because we want to give the browser more options in case it does not support our first choice of font type.

Note: A browser supports a font when the website visitor has that font installed on his/her computer. So it is advisable to specify common, easy to read fonts when creating your website. If the font is common then it is likely that your website visitors will have it installed on their computer.

In this case we will prefer the text on our website to be displayed with Verdana, if the browser of our website visitor does not support Verdana, it will try to use Arial to display it. If it does not support Arial, it will try to use Helvetica to display is.

And in the worst case scenario that it does not support the first three font types, it will then use any sans-serif font type it supports to display the text on our website. San serif is a generic font name for all those fonts that do not have small lines extending from the ends of the font.

It is always good practice to specify a generic font family at the end of your font types so that the browser can pick a similar font from the font family. This ensures that your website text is always displayed to you visitors. Generic font types are serif, sans-serif and monotype.

If the name of the font type you want to use consists of more than one word, you should enclose it in quotes. Example:

font-family: "Times New Roman", Times, Georgia, serif;

font-size: 100%;

This font-size property with a percent value works hand in hand with font size values with em as units.

On this CSS tutorial, the unit of the value of the font size property is the em. It is more advisable to use em as the unit of your font sizes. You may see some CSS codes using pixels as units for font values:

font-size: 14px;

When you use pixels for your font sizes, your website visitors using Internet Explorer will not be able to resize the text on your website without resizing the whole page. Other browsers; Firefox, Safari and Chrome do not have this limitation.

The relationship between em and pixels is:

16 pixels = 1 em

Most people can easily imagine how big the font will be in pixels more than em. O yes, we all think in pixels but we need to convert to em because that's the CSS best practice for font sizes.

So if you want to use 14 pixels as the font size for your content; that will be 14/16 which is 0.875em.

Even when you use em as the units of your font size values, Internet Explorer still has the habit of displaying the fonts larger or smaller than they should be when your website visitor adjusts the text size using View > Text Size > … on their browser window. By now, you should be getting used to the problems that Internet Explorer gives to web masters.

So to overcome the IE problem of adding extra sizes to the zoomed fonts, we need to specify the font-size: 100%; property in the body selector. I hope this all makes sense.

So for your website visitors to be able to successfully zoom the text on your website in all browsers, you just need to specify font-size: 100%; in the body selector. Then you can go ahead and specify your font sizes in em anywhere else in your CSS file. This will become clearer as we progress in the CSS tutorial.

The Color Property

color: #333333;

The color property is used to specify the color of text for your HTML elements. Note that this is spelt color and not colour. By placing this CSS tag in the body selector, we are telling the browser to display all the text on our website with a color whose hex code is #333333.

Because this color code is symmetrical, that is the first 3 numbers and the second 3 numbers are exactly the same, we can simply specify this property as:

color: #333;

Other symmetrical hex code examples:

#ffffff = #fff
#000000 = #000
#00f00f = #00f

More About Hexcodes

Hex codes are the hexadecimal notation for the combination of red, green and blue in a color. It is written in the format #RRGGBB where RR is red, GG is green and BB is blue. Only the numbers 0 to 9 and the letters A to F are used in hex codes. So with hex codes, you will never have to wonder if it is 0 (zero) or O (letter O). If it appears in a hex code, then it is definitely a zero.

The values must vary from 00 to FF with FF being the highest value. That said, the hex code #FF0000 is red because red has its highest value while green and blue are zeros. Just imagine you are mixing colors, you pour the highest amount of red possible and nothing for blue and green. The outcome of that color mix will still be red, isn't it?

Don't worry, you will not be doing any color mixing when creating your own website. It has all been done for us by a hex color generator. All we need to do is to get the hex code of any color we like and enter the value for our color property.

If you need to know the hex code of any color you like, go to this website. Click on a color set example Neutrals, Warms, Hues, Blues. Then when you see the color you like, just copy the corresponding hex code (including the #) and use it as a value for any color property.

Using hex codes is my favourite way of specifying colors on my website. They are so specific and you can easily integrate these colors when designing your logos. Graphic design software like GIMP allows you to specify the color of your design by hex codes. This way, it is easy to use the same color theme throughout your website.

There are other ways of specifying the value of the color property on your website. I will mention two of them.

By Color RGB (Red Green Blue)

color: rgb(255,0,0);

As with the earlier example (#FF0000), in rgb(255,0,0), the quantity of each color is specified using numbers. Here, red has the highest amount possible 255 while green and blue has zeros resulting in the color red.

By Color Name

color: red;

There are only 147 color names you can use to specify colors using this method that is why I do not like using it. There are 17 standard color names namely: red, blue, green, white, black, aqua, fuchsia, gray, grey, lime, maroon, navy, olive, purple, silver, teal, and yellow and 130 others derived from the standard ones.

Now on to the next property in the body selector.

The Background Property

background-color: #d3c2a8;

When used in the body selector, the background-color property is used to specify the color of the either side of the web pages of your website.

To change the background color of the body of your website, just get the hex code of your favourite color and use it to replace #d3c2a8 in the back-ground color code.

If you want to use an image for the background of your web pages, the CSS code for that is:

background-image:url('bgdimage.png');

where bgdimage.png is the name of the image you want to use. Notice that the property is now background-image, not background-color.

In the above example, the image is in the same folder as the style.css file. But if you place the image in another folder on your website, make sure that you enter the correct path in the url example:

If the following is your website directory tree:

And you have the bgdimage.png in the images folder. The correct way to link to it from the CSS file is:

background-image:url('images/bgdimage.png');

You should pay special attention to linking between directories if not, your background image will not display.

When using a single big background image on your website, you should add an additional CSS property display: table; to the body selector so that the background image will not shift when you resize the browser smaller than the content width.

width: 100%;
height: 100%;

When you specify 100% in the width and height properties of the body element, then you want to create webpages that will adjust according to the contents of the HTML divs. You are telling the body to expand as far as the content demands.

Even if you assign a width of say 2000px to the container div (#container), the body element will accommodate that even if it means that you will need to scroll horizontally to get to some of the content of the website.

The Link Selector


a:link { 
color: #0000ff; 
text-decoration: underline; 
font-weight: normal;
}  

a:visited { 
color:#0000ff;
font-weight: normal; 
text-decoration: underline;
} 

a:hover {
color: #0000ff;
text-decoration: none;
font-weight: normal;
}

I will discuss the a:link, a:visited and a:hover selectors at the same time because they all refer to how the hyperlinks on your website behave.

Remember that hyperlinks are those words, phrases or images that your website visitors can click on to be taken to another page of your website. Hyperlinks can also take them to another section on the same webpage.

So in your index.html file, unless otherwise stated, anywhere you see the tag <a href ….> and its closing </a> tag, these are the CSS rules that these are guided by.

Now, the first selector a:link specifies the styles the hyperlinks in your index.html file will assume in their normal unvisited state. In this instance, the text will be displayed in the color whose hex code is #0000ff.

This color is blue and is the best color to use for hyperlinks on your website. Many internet users have come to associate this color with hyperlinks so it is best to use it for your website.

The blue hyperlinks will be underlined (text-decoration: underline) and the font will be normal (font-weight: normal). In other words, the font will not be bold. With these properties, the hyperlinks on your website will look like this:

hyperlinks

If you do not want to use blue color for your hyperlinks text, get the hex code of your favorite color and replace #0000ff with that.

Other values for text-decoration are:

line-through: use this when you want to run a line across the text. It has the same function as strikethrough in MS Word.

over-line: use this to draw a line above the text

none: Use this when you do not want to decorate the text.

Though these are valid values, you only want to use underline or none when styling hyperlinks.

For the font-weight property, the other valid values are: bold, bolder or lighter.

You can also use numbers to specify the font-weight: 100, 200, 300, 400, 500, 600, 700, 800 and 900. 100 is the lightest while 900 is the boldest.


a:visited { 
color:#6666ff;
font-weight: normal; 
text-decoration: underline;
}

a:visited is used to specify the style your hyperlinks will assume when your website visitor has clicked on it before. This selector is useful so that your website visitors will know which pages they have been to on your website.

Usually, you want to give the visited hyperlinks a slightly different color from the unvisited ones. This will keep your website visitors happy because they do not want to waste time clicking on a hyperlink to a page they have previously visited.

All other properties, font-weight and text-decoration remain the same as a:link so that your website visitor will still recognize these as hyperlinks.


a:hover {
color: #0000ff;
text-decoration: none;
font-weight: normal;
}

The a:hover selector is used to specify the style of your hyperlinks when your website visitors place their mouse pointers over the hyperlink.

Did you notice that the values of the properties for a:hover and a:link are the same except for the value of the text-decoration property? This means that when your website visitors place their mouse pointers over your hyperlinks, the text will change from being underlined to not being underlined. This simple animated effect tells your website visitor that, yes, they are right on a hyperlink and they can click on it.

Note that:

For the a:hover effect to work, a:visited must be specified.

Thus the hyperlink selectors must come in this order in your CSS file; a:link, a:visited then a:hover.

The Paragraph Selector


p {
font-size: 0.875em; 
line-height: 24px;
margin: 10px 0;
}

The p selector is used to style the paragraphs in your index.html file. Anywhere you see the <p> and its closing tag </p>, these are the CSS properties that are styling it.

font-size: 0.875em;

The font size property is used to declare the font size of the text in a website, in this case the font size of the paragraphs. The value of the font size is 0.875em. As mentioned earlier, the em is the preferred unit of the value of font size. Remember the reason for this?

The units of the value of the font size property must be written together. Write this as 0.875em, not 0.875 em. If you leave a space between the property value and the units, your chosen font size will not be applied in Firefox and Opera.

line-height: 24px;

The line-height property is used to specify the space between the lines in a paragraph. In the example above, we want the browser to apply a space of 24 pixels between the lines in a paragraph.

You can also specify the line height property as a multiple of the font size. In that case you only need to specify a number without the units example:

font-size: 0.875em;
line-height: 2;

In this case, the line height that would be applied equals 2 X 0.875 = 1.75em or 28px.

The Margin Property

margin: 10px 0;

The margin property is used to specify some gap or space between an HTML element and the surrounding elements. In this case the margin is used to create a space between a paragraph and another paragraph, image and what have you.

There are four ways to specify the values of the margin property. Examples:

margin: Apx;

When you specify only one value for the margin property, it means that you want the browser to give a space of A pixels between an HTML element and its neighbours at the top, right, left and bottom of the element.

In other words you are applying the same amount of space on all sides of the HTML elements.
margin: Apx Bpx;

When you specify two values for the margin property, it means that you want the browser to give a distance of A pixels at the top and bottom and a distance of B pixels at the left and right between an HTML element and its neighbours.

In other words you are applying the same amount of space on opposite sides of the HTML element.
margin: Apx Bpx Cpx;

When you specify three values for the margin property, it means that you want the browser to give a distance of A pixels at the top, a distance of B pixels at the left and right and a distance of C pixels at the bottom between an HTML element and its neighbours.

The first value is the space to be applied to the top, the second value is the space for the left and right while the third value is the space for the bottom of the HTML element.
margin: Apx Bpx Cpx Dpx;

When you specify all the four values for the margin property, it means that you want the browser to give a distance of A, B, C, D pixels at the top, right, bottom, left respectively between an HTML element and its neighbours.

So the values are applied in a clockwise direction starting from the top as shown by the blue arrow in the image above.

The above depiction of the margin property is referred to as the shorthand property. To specify the margins for an HTML property in long hand we use:

margin-top: Apx;

margin-right: Bpx;

margin-bottom: Cpx;

margin-left: Dpx;

I am sure you are able to figure out what each long hand margin property does. Use them to specify your margins if you don't feel like using the shorthand margin property.

Just remember that:

margin-top: Apx;

margin-right: Bpx;

is the same as:

margin: Apx Bpx 0 0;

Note that I did not bother to list the margin-bottom and the margin-left properties in the first instance because their values are zeros anyway. But I need to list it in the second instance, if not the browser will think that I want to apply Apx to top and bottom and Bpx to left and right.

And I bet you can tell what the margin: 10px 0; does to our paragraphs. It means that there will be a space of 10px between our paragraphs and any HTML element above it and below it (be it an image, another paragraph or a video). But there will be no space between our paragraphs and anything to the left or right of it.

Pretty straight forward, huh? You see, CSS is written in English language not some programming jargon.

margin applied to paragraphs

The Padding Property

We may as well talk about the padding property here because it is quite similar to the margin property. The only difference is in the name and the description.

The padding property is the distance between the border of an HTML element and its contents. A good example of where the padding property is evident is on the image in the template. You can see that there is a space between the image and its border. This is due to the padding property.

The padding may not be evident when applied on a paragraph because there is no visible line bordering the paragraph but the padding still does its job of creating the required space.

If you apply a background color to an HTML element with padding, the whole area including the padding takes on the new color. But margins are not affected by the background color of an HTML element.

margin and padding applied to an html element

You specify the padding property the same way as you would a margin property. So to avoid repetition, please read about the margin property and you will understand how to specify the padding property.


p.smalltext {
font-size: 0.625em; 
line-height: 14px;
margin: 6px 0;
}

The p.smalltext selector does the same task of styling paragraphs in our index.html file. In this case, the p.smalltext selector is styling a special type of paragraph named by the class .smalltext. Remember when I mentioned in the HTML tutorial that classes are denoted by a dot (.) in the style.css file? This is one instance of this.

Any HTML element you see in the index.html file with the tag <p class="smalltext"> is being styled by the p.smalltext selector.

You use this method to set an HTML element apart by giving it a different style. Anywhere on your HTML document where you want to use small text in your paragraph, just include class="smalltext" in the <p> tag and a 0.625em text (10px) will be applied there.

This class only applies to whole paragraphs. If you want to style a group of text within a paragraph, you will need to create a selector that is named .smalltext only and use the span tag to style the text in your HTML file. I will illustrate that below.

In your CSS file, you should have:


.smalltext {
font-size: 0.625em; 
line-height: 14px;
}

In your HTML file you should have:


<p>This is to illustrate the use of the span tag to style <span class="smalltext">some text</span> within a paragraph</p>

The span tag is used to create an element within another element. In the above illustration, we have made "some text" behave like an element using the span tag so that we can style it with CSS.

So the above example will display like this:

This is to illustrate the use of the span tag to style some text within a paragraph.

The Unordered List Selector


ul {
font-size: 0.875em; 
line-height: 22px;
margin: 10px 0 10px 30px;
}

The ul selector is used to specify the style for unordered lists in our HTML document. Anywhere you see <ul> </ul>, these are the CSS properties that are styling it.

The styles for the unordered lists are:

Their font sizes will be 0.875em or 14 pixels (denoted by font-size: 0.875em;)

The space between the lists will be 22 pixels (denoted by line-height: 22px;)

The whole list will have a margin of 10px at the top, zero at the right, 10px at the bottom and 30px to the left of the list (denoted by margin: 10px 0 10px 30px;)

The schematic for this list is as follows:

List Style Type for Unordered Lists

The default list style type for unordered lists is disc. So when you do not mention a list style type, the disc list style will be used to list your unordered lists.

Item 1
Item 2
Item 3

You can specify another list style type by specifying the list-style-type property in the ul selector.

The following value of the list-style-type property: list-style-type: circle; will display your lists as:

Item 1
Item 2
Item 3

While the following: list-style-type: square; will display your lists as:

Item 1
Item 2
Item 3

You can also use an image as the item marker of your unordered lists. The syntax for that property is:

list-style-image: url('mylistimage.png');
list style with image

This URL is valid for when you have the image in the same folder as the CSS file. If you have the image in another folder, you should ensure that you link to the folder where you have the image with respect to its location from the CSS file.

The Ordered List Selector


ol {
font-size: 0.875em; 
line-height: 22px;
margin: 10px 0 10px 30px;
}

The ol selector is used to style the ordered lists. Ordered lists are those list that are in increasing order of numbers, letters, roman numerals and what have you.

1, 2, 3 …

I, II, III …

a, b, c …

List Style Type for Ordered Lists

The default list style type for ordered lists uses decimal numbers. So when you do not mention a list style type, the browser will use 1, 2, 3 … to list your ordered lists.

Item 1
Item 2
Item 3

To specify other list style types for your ordered lists, we use the list style type property. The following value of the list-style-type property:

list-style-type: lower-alpha; will use the lower alphabets for the item markers in your list.

Item 1
Item 2
Item 3

Other values of the list-style-type property are:

upper-alpha A, B, D etc

Item 1
Item 2
Item 3

lower-roman i, ii, iii etc

Item 1
Item 2
Item 3

upper-roman I, II, III etc

Item 1
Item 2
Item 3

The Headings Selector


h1 {
font-family: Georgia, Times, serif;
color: #000000;
font-size: 1.5em; 
font-weight: bold;
padding: 15px 0;
}

I will discuss all the header selectors in one go as they are all pretty much styled the same way. The header selectors (h1, h2, h3, h4, h5 and h6) are used to specify the styles for the headings in our HTML document, from the most important heading h1 to the least important heading h6.

You do not have to specify all the headings tags. As you can see in the CSS file, there are only h1, h2, h3 and h4 selectors styling the <h1>, <h2>, <h3> and <h4> tags in our HTML file.

font-family: Georgia, Times, serif;

We talked about the font-family property while discussing the body selector. The same description applies here. In this case, we have decided to go with Georgia or Times or any Serif font for our h1 headings.

If we want our headings to have the same font style as the rest of the text on our webpages, there would be no need to specify that again here. In that case, the specification in the body element will suffice.

We have also chosen a text color with hex code #000000 which is black and a font size of 1.5 em (24 px).

Our padding property padding: 15px 0; means that the browser will add a padding of 15px to the top and bottom of our h1 headings and none on either side of it.

You can make the headings on your website look fancy by adding a background image. To add a background image to your headings, you need to add the background-image property to the list of properties in the h1, h2 to h6 selectors.

By background image, I mean something like this:

The CSS property for that is:

background-image:url('images/myheadingimage.png');

Once again, replace myheadingimage with the name of your image file and the URL should point to the correct folder where you have the image file.

By default, this background image property repeats the image vertically and horizontally but that's not we want. So we use the background repeat property to tell the browser that we do not want this.

background-repeat:no-repeat;

So if we want to apply a background image to our h2 headings, the full list of properties for our heading selector will be:


h2 {
font-family: Georgia, Times, serif;
color: #000000;
font-size: 1.5em; 
font-weight: bold;
padding: 15px 0;
background-image:url('images/myheadingimage.png');
background-repeat:no-repeat;
}

I used this same method to display the images you see with the h2 tags on this website. In this case though, I applied a lot of padding to the left of the heading to move it right, away from the image.

Now, let's fast-forward to the h4 selector. The CSS properties listed in the h4 selector are what specify the styles for the headings in the left navigation column.

Take a look at the website template in a browser. You see the Visit my City, Getting there and the Where to Stay headings? Those use h4 headings and are styled by the h4 CSS selector.

Every property in the h4 selector is the same for the other headings h1, h2 and h3. The only exception is the border bottom property.

border-bottom: 1px solid #d3c2a8;

Now, take another look at the headings on the left navigation column. You see those underlines? They are controlled by this border bottom property.

The border bottom property is used to specify all the properties of the bottom border in one declaration.

You must declare the values in this order: border width, border style, and border color.

So in this case the border-bottom property is applying a border whose width (thickness) is 1 pixel. It also says that the border will be a solid line and that the hex code of the color is #d3c2a8.

Remember, this only applies to the bottom of the border. If you want a border to appear right round the heading, you will need to use the border property without any sides specified, like this:

border: 1px solid #d3c2a8;

With border width and border color, you can choose any thickness or hex color code you want but with border style, the following are the valid values:

none: no border applied

solid: The border is a continuous line.

dotted: The border is a dotted line.

dashed: The border is a dashed line.

groove: For defining a 3D border.

and many more.

Border is an extensive CSS property so I advise that you read this page and get as much information as you can on the topic.

The Container Div Selector


#container {  
width: 1000px; 
background-color: #ffffff;
margin-top: 5px; 
margin-left: auto;  
margin-right: auto;  
}

At last, we get to the almighty divs. The #container CSS selector is used to style the big guy that holds the Header, Top Navigation bar, left navigation bar, main content, right navigation bar and the footer of our web page.

The corresponding HTML code that the #container CSS selector styles is <div id="container">. This tag is right after the <body> code in our index.html file. Click anywhere inside the <div id="container">, between the angular brackets and the closing </div> tag will be highlighted further down the HTML file. Everything between these two highlighted tags obeys the CSS rules of the #container selector.

Remember:

If a CSS selector is preceded by a #, the div it styles in the HTML file will be an id.

If a CSS selector is preceded by a dot (.), the div it styles in the HTML file will be a class.

Remember that schematic in the HTML tutorial that talks about the different divs? Here it is once again:

The values of the properties you specify in the #container selector will apply to the sub HTML elements unless you specify another value further down the CSS codes.

width: 1000px;

The width property is used to specify the width of the container. In this case, we want our container to be 1000 pixels wide. That's self-explanatory, isn't it?

background-color: #ffffff;

With this background property, we are saying that we want our container to assume the color whose hex code is #ffffff. If you want your website to have a different color, this is where to change it.

margin-top: 5px;

In the #container selector, the margin-top property is used to set a small gap between the container of your website and the bottom of your browser toolbar.

margin-left: auto;
margin-right: auto;

These two CSS codes are used to center the web page in your browser window. If for any reason you want your website to be left aligned, then you should remove the margin-left and margin-right properties altogether.

The Header Div Selector


#header {  
position: relative;
text-align: left;  
color: #000;  
width: 1000px;
padding: 5px 0;
overflow: hidden;  
}

The #header CSS selector is used to style the header of our web page.

The corresponding HTML code that the #header CSS selector styles is <div id="header">. This tag is right after the <div id="container"> code in our index.html file. Click anywhere inside the <div id="header"> and the closing </div> tag will be highlighted. Everything between these two highlighted tags obeys the CSS rules of the #header selector.

position: relative;

The job of this CSS property is not immediately obvious. We will talk about it when explaining the next CSS selector (.banner).

text-align: left;

The text-align property is used to horizontally align text in a web browser. This means that the values for the text-align can either be left, right or center.

By default text is aligned to the left in all major browsers. I will skip the width and padding properties because we have talked about them earlier.

The Overflow Property

overflow: hidden;

The overflow property is used to tell the browser what it should do if for some reason the content of an element overflows its boundaries.

When we say overflow: hidden, we are telling the browsers that if the contents of our header overflow the boundaries we have assigned to it, the browser should hide everything outside the boundary. In this case, if the contents of the header overflow the 1000px width we have assigned, everything beyond 1000px will be hidden.

Other values for the overflow property are:

visible: When you say overflow: visible; you are telling the browser to display the overflown contents anyway even though it will be outside the boundaries of the element.

scroll: When you say overflow: scroll, you are telling the browser to hide the overflown elements but it should put a scroll bar so that your website users can scroll to see the hidden contents if they want to. I use this value a lot on this website whenever the codes I provide flows beyond the width of the content column. You can see an example here.

The Logo Div Selector


.logo {
width:200px;
height:110px;
}

The .logo CSS selector is a customized div created to style the logo of your website. The corresponding HTML tag is the <div class="logo">.

Since this is customized, you can call it any name you like. It can be .mylogo, .mycat or whatever you like but make sure that:

The name does not start with a number because the style will not be correctly applied in Firefox if you do this. So a CSS selector with the name .1mylogo is a no-no.
The name you choose for your CSS selector matches the HTML tag. Example if you choose to name the div for styling your logo .mylogo, then the HTML tag must be <div class="mylogo">.

width:200px;
height:110px;

The width and the height properties in this CSS selector allocate a space of 300 pixels and 110 pixels for your logo. You should normally make these values the same as the dimensions of your logo. If you specify dimensions less than your logo, some parts of your logo will be hidden.

In this website template, your logo is left aligned but on rare occasions, you may want to display your logo at a certain distance to the right in your header. You may even want to move it further down within your header. In that case, we will need more CSS properties to tell the browser exactly that. In the next CSS selector we will discuss how to do this.


.banner{
position: absolute;
top:30px;
left:470px;
width:468px;
height:60px;
border: 2px solid #000080;
}

The .banner selector is the div we created specifically to style the banner advertisement on our website. This CSS selector styles the <div class="banner"> in the HTML file. You can use this div to display any element in the header of your website. You only need to make a few changes to fit what you want to display.

If you do not want to display adverts or any other element where this div is positioned, simply delete the .banner selector and its properties in the CSS file (style.css). Then go to your index.html file and delete everything from the <div class="banner"> to its closing </div> tag.

To make sure you've got the correct closing </div> tag, click anywhere on the <div class="banner"> tag and Notepad++ will highlight the corresponding closing </div> tag for you.

The Position Property

position: absolute;
top:30px;
left:470px;

The three CSS properties above go together when you want to absolutely position an HTML element in another HTML element that has an absolute or relative position. In this case, we want to position the banner away from its normal position (below the logo) within a relatively positioned element (the header).

To be able to achieve this:

The position property must be specified for the HTML element being positioned. This goes without saying.
The value of the position property for the same element must be absolute. That is why we have position: absolute; for the banner div.
The value of the position property for the containing element should be relative. This is why we have the position:relative; defined in the #header selector above. This works for me personally.

I find that if I assign a relative position to the immediate parent of what I want to absolutely position, the element with the absolute position will spill off the main containing element if the browser window is resized.

Even though the rule says that the parent can have absolute position, this does not work for me. In fact, setting the position value of the header to absolute messes up the positions of all the other HTML elements.

Parent = containing element = Header

What I want to absolutely position = banner

top:30px;
left:470px;

After setting the values of the position properties, you should then use the top and left properties to position the absolute element.

The top property specifies how far down from the top of the header we want to place the banner. In this case we want to place the banner 30 pixels from the top of the header.

The left property specifies how far to the right we want to place the banner. In this case we want to place the banner 470 pixels from the left edge of the header.

border: 2px solid #000080;

The border property is used to specify a border around an HTML element. We have earlier discussed the border property.

In this instance, we are using the shorthand form which specifies the three values for the border property in one declaration. The values are in the order: border width, border style and border color.

The Topnav Div Selector


#topnav {
color: #ffffff;
background-color: #000080; 
float: left;
width: 1000px;
}

The #topnav selector is used to style the top navigation bar of our web page. The top navigation bar is denoted by <div id="topnav"> in the HTML file.

We are very familiar with 3 of the properties in this CSS selector. I will discuss the float property and touch a bit on the background-color property because there is something important I want to say about it.

background-color: #000080;

Remember when we specified a background color of #ffffff in the body selector? That meant that the background color of all our HTML elements would be white.

Now we want our top navigation bar to have a different color so we specify this new color in the #topnav selector to counter what we have in the body selector.

Browsers apply the CSS rules in the CSS file from top to bottom. This is why it is called "Cascading" Style Sheets. So when the browser sees the background color of #ffffff in the body element it says "oh, the owner of this website wants me to display every background in white" and applies it.

When it comes to the #topnav selector and sees a different specification for the background color, it says "oh, the owner wants me to display this one differently" and changes to the new color.

So until you counter whatever value of a property you specified in the body selector, the browsers will apply what it sees in the body selector to the HTML elements.

float: left;

The float property is used to push an HTML element to the left or right within its parent element.

The float property does not allow for a distance of float to be specified. Once you say float left, the element moves all the way to the left and if you say float right, the element moves all the way to the right of the containing element. The default direction of the float property is left.

The Content Wrapper Div Selector


#contentWrapper  {
float: left;
width: 100%;
}

The purpose of the #contentWrapper is to present the important content of your website to the search engines first. While the left navigation bar appears first to our human visitors, the search engines see our important content first as you can see in the HTML codes.

The float: left; property keeps the content column to the extreme left of our website which means that the search engines will see Header then contentWrapper before everything else. The wrapper occupies the entire width of the browser window as indicated by width: 100%.

And if you look at your index.html file, you will see that the content wrapper encloses only the content div. And if it comes before everything else and encloses only the content, then that means that content can come before the left navigation column as well without messing up our display in the eyes of our human visitors.

The Content Div Selector


#content {
width: 600px;
margin: 0 200px 0 200px;
padding: 5px 0;
}

We use the #content selector to list the properties that style the content column of our website template. What you will normally find within the content div are properties that define dimension, paddings and margins.

The width property in the content selector specifies that the width of our content div as 600px.

The margin property here has a special role. Remember the order in which the values of the margin property are assigned to the sides of the element? When there are 4 values of the margin property, they apply to the sides of the element in the following order: Top > Right > Bottom > Left.

So in this case:

The value of the top margin is 0px. This means that there will be no space between the content column and the top navigation bar.

If you look at my website (tpcreate.com), you will see there is a space between my content column and the top navigation bar. If you want this style for your website, then you should add a value to this margin property. The space I used for mine is 10px.
The value of the right margin is 200px. This means that there will be a space of 200px from the right edge of the container to the right edge of the content column. This creates a space for the right navigation column. What this tells us is that our right navigation column must have a width of 200px or less.
The value of the bottom margin is 0px. This means that there will be no space between the footer and the content column.

As with the top margin, if you want a space between your content column and the footer, then you should add some value here.
The value of the left margin is 200px. This means that there will be a space of 200px from the left edge of the container to the left edge of the content column. This creates a space for the left navigation column. And this means that our left navigation column must be 200px wide or less.

The value of the padding property is 5px for all sides of the content column. This means that there will be a space of 5px between the top, right, bottom and left edge of the content column and its contents.

Your website will not look professional if the content of any of your website columns is flush with the edge of that column.

So with the padding property, you should apply a value and see what it looks like in your browser. Keep adjusting the value of the padding property till you get the desired space.


#content img {
padding: 5px;
border: 2px solid #d3c2a8; 	
}

The #content img selector is a style specifically set up for the images in your content column. All the images that are not in your content area example your logo, will not benefit from this style. This is a good way to set a style for a specific group of elements on your website.

The padding property assigns a padding of 5px all around the images in the content column of your website. This property is why you see a space between the image and its border. If you do not want your website images to be styled this way, you can remove the padding property completely.

The border property assigns a solid border that is 2px thick to all images in your content column. The image border will assume a color with #d3c2a8 hexcode. If you do not like this color, you can get the hexcode of any color you like and replace this one with that.

If you do not want your images to have a border, you should remove this property from this selector.

Tip:

If you want your images to have a border, no padding and still have a space between it and the text on your website, then you should remove the padding property and add a margin property with any value of your choice. An example code for that is:



#content img { 

margin: 5px;

border: 2px solid #d3c2a8; 	

}

If you already have some margin assigned to the paragraphs of the neighbouring text, the margin may appear too wide. In that case, you may remove the margin from the selector above and still have some space between your image and the surrounding text.

The Left Navigation Div Selector


#leftnav {  
float: left; 
text-align: left;  
width: 180px;  
margin: 5px 5px 5px -995px;  
border: 1px solid #d3c2a8;  
padding: 10px 0;
}

The #leftnav selector contains all the properties that style our left navigation column. This selector is self-explanatory because we have discussed all the properties in it earlier in this tutorial.

The only property whose values look strange is the margin property:

margin: 5px 5px 5px -995px;

For content-first to work, the left margin is specified as -995px. First we have applied a 5px margin to all this sides of our left margin. This is what makes the border appear inside the column. If you want your border to appear at the edge of the column just like I have on this website (tpcreate.com) then you should make the values of your margin property:

margin: 0 0 0 -1000px;

It has to be -1000px (where 1000px is the full width of the container). Remember that we presented our content to the search engines first using the #contentWrapper div? So we are using the minus sign to forcibly display the left navigation column on the left of the content column. This is only for the display and our human visitors. The search engines will still see our content first.

Another way to explain the minus sign is this: remember that we assigned the maximum width (width: 100%) to the #contentWrapper div.

This means that theoretically the next div in the line of codes will start 1000px to the right of the contentWrapper. This is why we need to assign a margin of -1000px to the left side of the left navigation column so that it will move 1000px to the left.

In the website template, we want a margin of 5px on all sides of our left navigation column so we will subtract this 5px from 1000px. This way, we will only push the left navigation column 995px to the left, leaving a left margin of 5px.

force left nav to move left with negative margin

We left a space of 200px for the width of the left navigation property in the #content selector yet we have assigned a width property of only 180px here. This is because we have to make sure that the sum of the width, margin and border thickness does not exceed 200px. In this case, we have:

180px (width) + 5px (left margin) + 5px (right margin) + 1px (left border) + 1px (right border) + 4px (left padding) + 4px (right padding) = 200px

So you should share the available space to all the properties that you want to use on the element. If you increase any of the values, you should decrease another one to compensate. When the sum of the widths of your left navigation column exceeds the allocated width, your left navigation column will start to overlap the content column.

It is better to have a sum less than 200px than something greater.


#leftnav ul {
list-style-type: none;
margin: 0;
}

The #leftnav ul selector is used to style the navigation links in the left navigation column. In the template, the navigation links are the Fly There, By Bus etc links.

We use the list-style-type property to specify the type of numbering or bullets that our left navigation links will have. In this case we have assigned the value none to the list-style-type property because we do not want our left navigation links to have any numbering or bullets.

If you want to use images as bullets for your left or right navigation links like I have done on this website, you may be tempted to use the CSS code:

list-style-image: url('mylistimage.png')

That's OK but you will find that the list images are displayed outside the column and it is more work to apply the necessary margins and paddings to get the link bullets to display well. I usually avoid any CSS rule that will require more work and codes if I have an alternative.

The more codes you write, the more work you give the browser trying to open your webpages, the slower your website loads and the search engines do not like slow websites. Also your website visitors with slow connections will have a hard time visiting your website.

I will discuss the method I used to display images next to my navigation links in the next CSS selector.

The margin property in the #leftnav ul selector is used to reset the margins once again. I usually do this for child selectors because they may have inherited some margins from their parent selectors, in this case #leftnav. W3Schools say that the margin property is not inherited but I find some margins applied if I do not reset it with the margin property with a value of 0.

To further explain that, #leftnav is a parent selector and any other CSS selector that contains #leftnav is a child. Most times you find that these children have inherited the margins and paddings specified in the parent.


#leftnav li {
margin: 0;
}

The #leftnav li selector is used to style the lists themselves. Any style that is directly applicable to the navigation links should be specified here. Examples include: font-style, font-size etc.

As I was saying earlier, if you want images to appear as bullets for your left navigation likes like I have on this website, then add the following properties to your #leftnav li selector:

background: url(images/icons.png) no-repeat;
background-position: 0 50%;

where icons.png is the name of the image file that you want to use as your bullets. In this case, the image file is located in a folder called images which is in the same folder as the CSS file on your webhost. So please make sure that you link correctly to the image file, if not, it will not display.

Also, when creating the image file, ensure that its height is about the same as the font size you set for your navigation links for example: The font size for my navigation links is 0.875em which is 14px and the size of my navigation links bullets is 15px by 13px. You see that the height is 13px which is almost equal to my font size of 14px.

The no-repeat included in the background property is there so that the list pointers or bullets will not be repeated several times. To see this for yourself, remove no-repeat from the code, save and refresh your browser to see how this would display without the no-repeat.

The background-position property is used to position the pointer with respect to the item it is styling. The first value (0) is used to assign a distance along the x-axis while the second value (50%) is used for the distance along y-axis. The schematic below illustrates how the x value is used to position the image.

The schematic below shows how the y value is used to position the image.

The width of the left navigation column is the x-axis while the height of the item is the y-axis. If we choose the value of 0 as our x component, then the image pointer will be placed at the beginning of the text, if we choose 50%, then it will be placed half way along the text.

If we choose the value of 0 as our y component, then the image pointer will be placed at the top left hand side of the text, if we choose 50%, then it will be placed on the mid-left hand side and if we choose 100% it will be placed at the bottom left hand side.

Ideally, when you want bullets for such links, you should use 0 for the x value and 50% for y value because you want the bullets to appear at the beginning of the text, don't you? Then add the padding property to move the text towards the right, away from the image like this:

padding-left: 10px;

This is so that the text will not overlap the image. So here's the full list of properties for using an image as bullets for your left navigation links:


#leftnav li {
background: url(images/icons.png) no-repeat; 
background-position: 0 50%;
padding: 0 0 0 10px;
margin: 0;
}

Replace images/icons.png with the correct link and name of your image.

The next three CSS selectors control the behaviour of our left navigation links. So we will tackle all three in one go.


#leftnav a {
color: #0000ff;
font-weight: bold;
display: block;     
padding: 3px 0 3px 5px;
text-decoration: none;
}

#leftnav a:visited {
color: #0000ff;
text-decoration: none;
}

#leftnav a:hover {
color: #ffffff;
background-color: #6666ff;   
text-decoration: none;

We have talked about a, a:visited and a:hover with all their properties at the beginning of this tutorial. The only difference between those and these ones is the #leftnav that comes before the a, a:visited and a:hover in the selector names. This means that the styles specified here apply only to hyperlinks in the left navigation column.

As far as these hyperlinks in the left navigation column are concerned, I would like you to pay attention to these two properties:

display: block;
If you want the area around the hyperlinks in your left navigation column to light up when your website visitors hover their mouse pointer above the link, then you must specify this property in the #leftnav a selector.

If you do not want this animation for your website, then remove the display property and its value entirely.
background-color: #6666ff;
The background-color property in the #leftnav a:hover selector works hand in hand with the display property. The background-color property specifies the color of the area around your left navigation hyperlinks when a mouse point hovers above it. You can change the hexcode specified here to any hexcode of your choice.

The Right Navigation Div Selector


#rightnav {  
text-align: left;  
float: left;  
color: #000;  
width: 180px;  
margin: 5px 5px 5px -192px;  
border: 1px solid #d3c2a8;
padding: 2px;  
}

The #rightnav selector contains all the properties that are used to style the right navigation column of our website template. We have discussed every property that appears in this #rightnav selector but I will explain the margin property and its values because it looks strange, doesn't it? I will also touch on the width property because it is used to calculate one of the values you see in the margin property.

width: 180px;
margin: 5px 5px 5px -192px;

Remember that in the #content selector, we left a space of 200px for the right navigation column? This was done with the code:

margin: 0 200px 0 200px

Here we have assigned a value of only 180px to the width property. This is because we have to make sure that the sum of the width of the column, the margins, paddings and all other properties that contribute to the overall width of the column adds up to 200px. In this case, we have that the total width of our right navigation column is:

180px (actual width) + 5px (left margin) + 5px (right margin) + 1px (left border) + 1px (right border) + 2px (left padding) + 2px (right padding) = 196px

This value is less than or equal to 200px and it is OK because it is not only less than by a small amount.

The left margin property has a value of -192px. The value is negative because our #contentWrapper is occupying the whole 1000px width.

force right nav left in content first template

We can simply apply a left margin value of -200px to force the right navigation column to its position. That will definitely make our lives easier but if we do that, you will notice that the space to the right of our right navigation column (after the thin border) is wider than the space to the left of the left navigation column.

To make our website template balanced we move only the necessary distance and the only values we need to subtract are: the width of the column itself (180px), the left and the right margins (total 10px) and the right padding (2px). All these equal 192px. And because we need to move the column towards the left, we have the value of the right margin as -192px.

The Footer Div Selector


#footer {
text-align: center;
border-top: 2px solid #000080;
width: 980px; 
padding: 10px;
clear: both;
font-weight: bold;
overflow: hidden;
}

At last we get to the last CSS selector: #footer. In this selector, we list all the properties that style the footer of our website template. I will explain each of the properties.

text-align: center;

This is the style that centers the text in our footer. If you want the text in your footer to be left aligned, just change center to left.

border-top: 2px solid #000080;

This is the thick blue line you see above the footer of the website template.

width: 980px;
padding: 10px;

Remember that the width of our container is 1000px? The width of our footer, all left and right margins and all left and right paddings must equal 1000px for our webpage to display well. In this case we have a padding of 10px specified for all sides of the footer. This means that the left padding equals the right padding equals 10px each.

Therefore the total width for your footer is:

Footer width (980px) + left padding (10px) + right padding (10px) = 1000px

clear: both;

The clear property with the value both is very important for our footer to display under the left navigation column, the main column and the right navigation column.

The value both means that no elements are allowed on the left and right sides of the footer. With this value, you will never have problems with your footer display such as these:

overflow: hidden;

Remember when we discussed the overflow property here? By choosing the value of hidden for our overflow property in the #footer selector, we are saying that if the contents of our footer goes beyond the 1000px width limit, that content should be clipped. So it will not be visible to our website visitors.

So there you have it! That's all the CSS codes in the free 3-column website template explained. It is now time to create the first page of your website, where you will put all you've learnt here into practice.