OK so what is CSS or cascading stylesheets? Well it's basically a really easy way to style web pages and make them look good.
And the best thing about it is, you can write it once and use it on any page you want by using one little line of code!

Examples of how CSS can be used:
Here's a page for example that has no styling: Link
And the same page but this time with styling: Link

Advantages of CSS

* Make web pages look good with ease
* Change all your pages by editing only one page.
* When it comes to making CSS layouts, you have instead a mess of table code.

Disadvantages

* Older browsers do not execute CSS in the same way or in some cases at all.
* You may achieve a look you like only to find it different when you view it in different browsers.

Before you start..

You will need for this tutorial

* A text editor or HTML editor, some good ones are Crimson editor: http://crimsoneditor.com/english/download.html or the classic notepad. You can use Dreamweaver, it depends what you are comfortable with.
* When practicing with CSS, it helps to have at least two browsers to check for bugs, Internet explorer, Firefox and Opera are good ones.

You should know

* A reasonable understanding of HTML or XHTML



You should also want to think about who your audience is, for instance if you want to target Internet explorer 5.0 or below users, CSS isn't going to be much use. Your audience should be: Firefox version 1+, Safari, Internet Explorer 6.0 and Opera.


Setting the stage

So there's three ways to add CSS to a page, the first one is to write it straight into the web page, to do this,
add this code into the head tag:



the head tag is a reference of where to put the code and is nothing you have to add in. Also all the CSS goes inside the style tag and a html comment.
The reason for this is, some older browsers don't support CSS as well and as a consequence display all the CSS as text inside the web page.
But if you display it in a html comment, it still works but doesn't display if the browser can't execute it.

The second way is to add 1 line of code into the same place on the document:



Make sure your file with styles in it is saved as a .css file. People tend to keep there style sheet in the same location as the HTML files
but if you don't make sure you have the path right to the style sheet.

The third way involves putting this in your head tag



The structure of CSS


OK so CSS is broken down into three things

selector{
property: value;
}

The selector is what the styles effect, the property is the part of the selector you're styling and the value is the measurement of the property.
I will go into more detail as the tutorial goes on.


The selector

The selector is what you want the style to apply to, so basically its any html tag eg. body, a, li, td etc.
And you can apply the same styles to several selectors

That would look like this:



Did you notice '{' that goes after the separator to show you have finished with the selector and want to start the properties and values.
When you want to end a particular style you add another one '}' at the end after everything.


The Property

The property is how you want the selector to look, so basically you are styling the selector through these properties.
There is an extensive list here

Some examples are:


REMEMBER: if there is a space between the words in the property use a dash or it wont work

background color: WRONG background-color: CORRECT


The Value

The value is basically the measurement of the property, this can be digits or words, a list of all the possible values for properties can be found also at: http://www.w3schools.com/css/css_reference.asp

The value can be measure in size:

* pixels (px)
* percent(%)
* em, one em is the same as the font size of the current element
* inches(in)
* centimeters(cm)
* millimeters(mm)
* points (pt)one pt is equivalent of 1/72 inches.
* pica(pc) equal to 12 points.

And colours, you can use:

* ordinary hex codes with html, #LETTER e.g #FF0000.
* colour name e.g red
* rbg colours (rgb(255,0,0))
* and rbg percentage, (rgb(100%,0%,0%))

NOTE: if you put a space between that value and the unit e.g 12 px. It won't work.

After you have finished with the unit put a semi colon ';'after the unit to show you have finished with that property.


Classes

You come across a problem, you want to add styles to say all you table cells except one or two, a navigation bar for instance.
This is the part where classes come into play.

In terms of CSS, it looks hardly any different. An example of how to write a class is :



notice the dot at the beginning states that it is a class. Anything after the dot and before the '{' is the name of that class.

Then say you wanted to add those styles to a table cell you add this in to the code.




Ids

Now IDs are almost identical to classes, the only difference is that IDs are used only once in a page. People tend to use IDs
when they are making div layouts to set up the main structure of the div, background/background-image, size and alignment for example. They then use classes to style the text and links
etc. To set up an id, you have to basically do the same as a class except you use a # instead of a fullstop.

It should look like this:



and


in your code.



Media Types

Another handy feature of CSS is the ability to define styles for different types of media.

Media types include:

* screen: for computer screens
* print: for printers
* handheld: for small handheld devices
* projection: for projected presentation e.g slideshows
* braille: for braille tactile feedback devices
* aural: for speech and sound synthesisers
* embossed: for paged braille printers
* tv: for TV like screens
* tty: for media using a fixed-pitch character grid
* all: all types of media

So to add a media type into your CSS, put an @ then media a space and the media type




so far.

open the part for the selector, property and value with a '{'

add your selector, property and value as normal, and close the whole thing with a '}'

so it should look like this.



and you can have multiple medias in the same style sheet, so it might look like this:



A way this could be used, is on a computer screen have the background red and when printing white, that would look like this:





Pseudo Classes


In CSS, pseudo classes are used to add different styles to selectors.

Pseudo classes look like this:



you can also use classes with it:



The most common use of pseudo classes is with the anchor tag, or link. That looks like this:



The order you put these in is important or else they won't work effectively. a:link and a:visited go first,
but, a:hover must go after a:link and a:visited and a:active must go after a:hover.

There are two more pseudo classes apart from the anchor. These are :first-child and :lang.

The :first-child class lets you set a style for the first part of a selector. For example, you want to set the first paragraph on a page to
be a different font size, you do this.



so if your HTML code was this:



The lang: class is used, to specify what language is used in a stylesheet.


That will make all text colour in english, red.


Pseudo elements


Pseudo elements are very similar to pseudo classes.

Pseudo elements include:

* First letter, add a style to the first letter
* First line, add a style to the first line
* :before, add content before something
* :after, add content after something

like pseudo classes you can use CSS classes with pseudo elements.

So first line, say you want the first you pick a selector, lets say paragraph and you want the first line to be red, but the rest to be black. Your code should look like this:



There are certain properties you can use with first-line, the list is:

* font size, color, family,
* Color properties
* letter-spacing
* Word-spacing
* text-decoration
* line-height
* text-transform
* clear
* background properties
* vertical-align

Internet Explorer 5.5 and above are the only versions to support the first line pseudo element.

Secondly, the first letter. It's exactly the same as the first line class.



Again there are certain properties you can use,

These are:

* background properties
* color properties
* font properties
* padding properties
* margin properties
* text-decoration
* border properties
* vertical-align (only if 'float' is 'none')
* text-transform
* clear
* float
* line-height

The before: class is basically what it sounds like, you want to put anything before something, eg a hyperlink, and you want a image to appear before every hyperlink.

It would look like this:



The after class is exactly the same as the before, it should look like this



This states that after every anchor tag, that picture will be displayed.

Extras

Now I know how you all like to keep your code clean, so a little tip: In HTML you can just add a comment to label your code:
well you can just label your stylesheets by adding



Also declaring in XHTML, contrary to whatever you may hear, you HAVE to end all tags to be XHTML compliant.

so if the tag has a closing tag, e.g .
You end it like this you add a forward slash after the tag and before the >


Examples

font examples:





Link examples:





background examples:

Background color:


(red background colour)

background image:



Example here: Link

background repeat sideways:



Example here: Link

background repeat down:



Example here: Link




In this tutorial I have covered the basics and essential of CSS. Hopefully you should go away with a good idea of how to apply CSS to a web page.

Thank you for reading.
Matt