Writing your own Web Page, Cascading Style Sheet Tutorial

A Free Crash Course in Web Design using Web Standards

by Phil Markey

Welcome back to my Free Web design tutorial using Web standards & Style Sheets

So far in lesson one we started from scratch building the basics of a Web page. Then in lesson two we completed the html part of the whole document. Now I'm going to teach you the power of Style Sheets.

Lesson 3

You can write a style sheet into the HEAD part of your document using the opening and closing STYLE tags. Look at this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>a title for your page goes in here</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="14 days" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {
 font-family: helvetica,arial,sans-serif;
 color: rgb(56,56,56);
 background: rgb(255,255,255);
}
h1 {
 margin: 0 0 5px 30px;
 font-size: 12pt;
 color: #000000;
}
h2 {
 margin: 0 0 5px 60px;
 font-size: 10pt;
 border-left: 0;
 color: #000000;
}
</style>

</head>
<body>
...

If you don't declare the style type within your tag then you'll get an error in this html version. The type we're using is text/css there are others which are irrelevant for what we're building. The first style that we're imposing on our document is the html style. This will apply to the whole document. It dictates the font type, if the person viewing your page does not have the first font in the list installed in their computer then it will default out on the second in the list if they don't have that either then it will default out on any similar sans-serif to the first 2 that they do have. You can add several fonts to the list but it's generally best to keep it to 2 or 3. Then we have the colour of the text, then the background colour of the page. Note. "colour" is spelt the american way "color".

TIP - Don't ever have the text colour the same as the background colour as an attempt to hide text from view. A search engine will look for these methods of hiding text in a page and remove you from the search engine's listings, and you really really don't want that to happen!

The other two styles that we've added to this style sheet are there to manipulate the header tags H1 & H2. The margin is the white space around the block element, I'll discuss block-level elements in the next lesson. We've also added a font size to these two tags, because, generally speaking default header tag font sizes are either too large for the bigger tags and too small for the smaller ones. We can make them just the right size to suit our page here without having to change the tag to a smaller one (i.e. changing a H1 to a H4 to make it look good). Now, notice the text colour definitions are different to the one I used in the html style! This is simply a different way of doing it. You can use either way or you could even just write color: red; for example.

The first method of adding colour is using the RGB method. These are the 3 colour channels for mixing colours Red, Green & Blue. To mix colours professionally you need to understand BINARY code. BINARY code works like this: There are 255 bits to a byte and there are 1024 bytes to a megabyte. The byte code multiplies by 2 to double the number each time. Therefore, 2 × 2 = 4 × 2 = 8 ... 16 ... 32, 64, 128, 256, 512, 1024. The bit code runs from 0 to 255, the smaller the number the darker it is, and the higher the number the lighter it is. Doing this within the 3 colour channels gives you varying levels of brightness per colour and therefore mixes your colours. The other method that looks like this: #000000; also uses the RGB colour channels the first 2 digits after the (#) are the red channel, the second 2 digits are the green channel and the last 2 are the blue channel. The second method is more difficult for you to understand because of there being only 2 digits per channel and therefore the numbers can only reach 99. To make up the difference we use letters A to F (dark to bright) for the brightness.

I hope I haven't confused you now with all of this! Here's some examples: Pure white = #FFFFFF; or #ffffff; or rgb(255,255,255); or simply white;. Black = #000000; or rgb(0,0,0); or black;. #AAAAAA; is not pure black but grey. Red = #FF0000;. Blue = #0000FF;. Green = #00FF00;. A dark green would be something like #008000; by raising the middle green channel to a higher number while keeping the red and blue channels on a low black value. Try playing with the numbers to see what colours you can make by yourself. IMPORTANT: Don't use the UPPER-CASE letters in these or any tags in this XHTML version, all tags must be in lower-case.

I just want to mention the font sizes before we move on! Notice that we've used font-size: 12pt; & font-size: 10pt; for the H1 & H2 tags. pt = points. We could have used pixels px but 12px is not the same size as 12pt. We can also express a percentage for the size like these examples: 80% which is smaller than the default size, or 130% which is bigger than the default size. Percentages are useful to use when you don't know what screen resolution the person viewing your site is using, this will be a percentage of whatever that is. But generally speaking most designers use points or percentages for font sizes and pixels for block element sizes. I'll come to block elements in the next lesson.

Save your document and open it in Firefox. Notice how clean and tidy your page is now!
I want to show you a different way of using style sheets in-line in your document.

...
<body>
<p>Here we have your paragraph of text but then in the middle of it we need to change the style of the text to <span style="font-style: italic; color: red;">red italics</span> for a while before going back to the same text as before.</p>
...

That paragraph would print like this:
"Here we have your paragraph of text but then in the middle of it we need to change the style of the text to red italics for a while before going back to the same text as before". You can see how useful this is sometimes. For this we use the SPAN tags for obvious reasons.

Did you notice that we did not apply a style to the <p> paragraph tag? this is because the default html style is managing that for us. So all paragraphs will be styled the same throughout the whole document. But what if we want one paragraph to be styled different to all the others? All you have to do for this experiment is to go back to your main style in the header and add this:

...
<style type="text/css">
html {
 font-family: helvetica,arial,sans-serif;
 color: rgb(56,56,56);
 background: rgb(255,255,255);
}
h1 {
 margin: 0 0 5px 30px;
 font-size: 12pt;
 color: #000000;
}
h2 {
 margin: 0 0 5px 60px;
 font-size: 10pt;
 border-left: 0;
 color: #000000;
}
.bold {
 font-weight: bold;
}

</style>
...

This is a class. It is defined as a class by the dot before the word. The word can be any name you want providing it is unique. A class can be applied to anything we want to apply that class to in the document. Lets apply it to the whole of the first paragraph in your document like this:

...
<p class="bold">Your text...

Or use it with a SPAN tag like this:

...
<p>Here we have your paragraph of text but then in the middle of it we need to change the style of the text to <span class="bold">bold text</span> for a while before going <span class="bold">back</span> to the same text as before.</p>
...

That would print out like this:
"Here we have your paragraph of text but then in the middle of it we need to change the style of the text to bold text for a while before going back to the same text as before".

Of-course it is easier and better to use the <b> tags to make a word bold-type. The class style and span tags are better used with colours or highlights like I've been using to teach you this.

I mentioned before that you can change all your 1000 or more document's styles by just changing a single document. This method of using style sheets is the most powerful method of using them. We're going to inject this separate style sheet into the head of all your documents. Other advantages for doing this is that your individual file sizes are reduced, therefore making them load faster, and also by downloading this style sheet separately it will be stored in the cache memory of the user's computer, therefore saving the need for downloading it over and over again for each page of your site, thus saving even more download time. What I want you to do now is copy the style sheet that you've just made in the head of your document and paste that into a new document in your text editor. As displayed in the image to the right:

Now make a new folder within your html folder called styles. Save this file as style1.css within the styles folder.

Now delete the style sheet that you wrote in the head of your document.

And now add this new line to the head of your document:

...
<meta name="revisit-after" content="14 days" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles/style1.css" />
</head>
<body>
...

Save your document and open in Firefox. Also save that line into the head of your templete page so that all of your future documents will load the same style sheet.

We'll come back to style sheets again a little later on. Because I first want to talk about page layout again and the use of block level elements within the page.

NextGo to Lesson Four


All the best,

Phil Markey
Retired Professional Web Developer

Valid XHTML 1.0 Strict