Learning to write a web page

 ___________ 
|           |
| S T Y L E |
|           |
|           |
|           |
|           |
|           |
|___________|

Style sheets

 ___________ 
|           |
| S T Y L E |
|           |
|           |
|           |
|           |
|           |
|___________|

When you have decided on a recognisable look for your website, you may want to look into using style sheets. The standard at the moment is CSS (Cascading Style Sheets). In a file with extension .css you indicate all the standard styles you have thought of: e.g. a background colour, a font style and colour for the headings, a specific alignment of your own special logo with the surrounding text at the top of your pages, that sort of thing. If you then make a link from every page which you want to have these particular styles to the .css file, you do not have to type all those styles in every page separately. A space and time saver!

Linking the style sheet with the HTML files

In the <head> of every HTML for which you want to use a style sheet, just below the <title> for instance, you include a <link> tag, as follows:

<link href="kkweb.css" rel="stylesheet" title="KKWeb" type="text/css" />

The href refers to the actual .css file, the relationship between the present HTML file and the linked file is 'stylesheet', the title can be anything that makes sense, and the type teaches the browser how to deal with the .css file.

Example

body { background: #ffff00;
       color: black;
       font-family: Times, Times New Roman, Lithos, Haeberli, Tekton, fantasy, serif }
h1 { color: #000000 }
h2 { color: #000000 }
h3 { color: #000000 }
h4 { color: #000000 }
h5 { color: #000000 }
h6 { color: #000000 }
table { border: none }
td { vertical-align: text-top;
     text-align: center }
pre { white-space: pre }
img.center { align: center }

CSS is a language in itself, easily as extensive as HTML. So it would be best to look up information (and a dictionary of terms you can use) on the web. The most obvious one is: CSS at W3C and their recommendations/specifications for CSS1 and CSS2. A very good follow-on from my very short introduction to CSS can be found at BrainJar.com: Using Style Sheets.

Back to contents

What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces

Course created by Maria Turkenburg