CSS Tutorial
This tutorial is not intended to be a complete guide on writing CSS, but to help people get started creating their own style. There are plenty of more detailed tutorials available on the Web deal with CSS in more depth.
The basic format of CSS
CSS documents describe how each HTML tag is supposed to look on the user's machine, allowing you to make an entire web site
have the same theme without having to copy all the style information between documents. It also allows different 'classes' for
each tag, so you can easily select how you want particular instances of that tag to look.
The basic format of a CSS document is:
[tag] {
[style information]
}
For example:
body {
background: white;
color: black;
}
Colours
Colours are specified by using a short name, or by giving their RGB values. There are plenty of tools out there to help you
pick a colour - try Tucows for
example. For most cases, however, the short names are enough to pick the colours
Full information about colours can be found on the W3C site
here.
Images
You can also use images for backgrounds as well. To specify an image, enter url( {full image address} ), i.e.
url(http://www.guest-book.co.uk/images/background.png)
Basic formatting
You can set the colour for the text using color commands, i.e. color:black. Note the American
spelling - colour doesn't work!
The background can be set using background, where you can specify a colour, an image, or both. You'd normally set
the background to an image, then a colour - that way, if the person is browsing with images turned off, or if there's a problem
getting the image, the text can still be read.
For example: background : url( http://www.your-host.com/some.image ) white;
would try to load the image
to display as a background, but fall back to a white background if there's a problem.
You can set the alignment of the text using text-align, setting it to left,right or
center (once again, watch that American spelling!). This is only really used in 'block' tags, like
<p> or <div> and affects everything inside them, including other <p> and
<div> tags.
You can also set the width that a particular block will occupy, with the aptly named width command. Widths can be
specified in two ways - absolute (in pixels) or variable (as a percentage of the window width). If you need a block to be an
exact width (to match a background, for example) then you should specify the width in pixels, otherwise it's best to use a
percentage (the text will flow better in different sized windows).
Using a CSS stylesheet
Although you can put style information straight into a HTML page, that's not entirely what it was designed for - they are
normally seperate documents that are linked to by a HTML document. This allows more than one HTML document to share the style,
making it easier to ensure that your entire site looks the same.
Stylesheets are linked in the <head part of a HTML document, like this:
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
This tells the browser to link to a document, whose relationship is a stylesheet, which
contains text information in the format of a CSS stylesheet. The href tells the browser
where to look for the stylesheet - you can store a stylesheet anywhere that the user's browser can reach, not just in the same
directory or server that the documents are being held on.
News
Sign Up
CSS Guide
+ Guestbook entries
+ 'Sign Guestbook' link
+ Page selector
+ Example styles
CSS wizard
XML/RSS feed
Terms & Conditions
©2004 Richard Wallman. All rights reserved. All trademarks recognised.
Need help? Contact us at
We welcome any suggestions on how we can improve this service - please email us at
Please report any abuse of the system to .