Before continuing with the tutorials, please understand that you need a good knowledge of X/HTML before going on to learn CSS. This is assumed in these tutorials.
Introduction
CSS stands for Cascading Style Sheets, and is an on-going recommendation set by the W3C.
It is a pretty simple language, to define how elements on your page (like a link or a paragraph of text) are displayed to the visitor. The CSS is normally put into a style sheet, but can be added as an extra attribute to single elements (tags) in your X/HTML. I would recommend not using the latter method of using CSS, and stick to using it as part of a proper style sheet.
A style sheet can be written in an external text file (in a program such as Windows Notepad), like you may do with your X/HTML. This file can then be linked into your X/HTML, on any number of pages. This creates an instant major advantage to web developers: you can change only one file (the external CSS style sheet), and your entire site will change. That reason alone is good enough to stop coding all your styling information in the markup.
You can have more than one external style sheet in your documents. Maybe you want one sheet for the colors, one for the positioning of your elements, etc. It’s really up to you as a designer :)
What cascading means to you
If you have more than one style sheet, the CSS parser of the browser will read the first sheet, then the second, etc. If you have the same thing defined in more than once place, the first thing will be replaced by the second. More on this later.
How to use CSS
As a good designer, you want your pages to follow the same structure, i.e. menu top-left, title top-center, etc. This makes it easier for your visitors to browser round your site, and also makes it nice and simple to update your site.
You also need good structure to be able to take full advantage of CSS. This means valid X/HTML. Apart from improving other aspects of your document, valid markup helps enormously if you’re planning on having the bulk of your site styled by CSS.
Where to put the CSS
As explained above, the CSS can be in any of three places:
- In a style sheet as part of the X/HTML document
- In an additional attribute for almost any element
- In an external style sheet
As part of the X/HTML document
You put the CSS code in the HEAD of your document, in between the following tags:
<style type="text/css">
CSS stuff here
</style>
Of course, the code applies to elements in that document only.
The style attribute
If you wish to add some style to one particular element only, you can use this method. I do not use it however as it goes against my principal to separate the style of a document from it’s structure (i.e. to separate the CSS from the X/HTML). Here it is anyway:
<a href="index.htm" style="CSS stuff here">
an example tag
</a>
External style sheet
This is my chosen method, and the chosen method of many people, for it’s sheer convenience in site building.
Simply create a blank text file in Notepad, and start typing your CSS. No X/HTML tags required. Call it something like style.css. Anything you like, as long as it has the .css file extension. Then, to add it to your X/HTML document, put this in the HEAD of your document:
<link rel="stylesheet" type="text/css" href="style.css">
You can add more to that tag, but that’s out of scope of this basic
tutorial. The above tag is also for a XHTML document, having / at the end
of it. Remove that for an HTML document, obviously.
One more thing!
Just a little addition to this basics tutorial. Bear in mind that whitespace is ignored by the CSS parsers, so you can format your CSS code any way you like, to make it more readable to you :-)
