Introduction to CSS

Who should read this tutorial?

As I'm writing this tutorial, I have in my mind an audience of Web designers with some experience in building web sites with either HTML/XHTML or WYSIWYG editors, there is no assumed previous knowledge of CSS.

Why use CSS?

In the earlier days of the Web, designers used deeply nested tables to produce their layouts. Although they managed to do this with great precision and accuracy, it wasn't easy, nor the right thing to do. Maintaining a site of deeply nested and interlinked tables was not a pleasant job, it could take hours, or whole weeks of re-designs just to change a few presentational aspects.

It was the wrong thing to do for another reason, tables just weren't meant to be used in this way. Tables where designed to hold tabular data (structured information, such as a calendar) which would load as one entity on a page, as you wouldn't want it loading bits at a time because this would be confusing, so when people built entire sites in them, the site became very slow.

This is where the W3C stepped in to save the day. The W3C oversee the technical development of the web, and decided that Web designers needed a way to separate content from style The solution, CSS. CSS was developed solely for this purpose, and provides web designers to link to a separate style sheet which contains all the presentational data.

With CSS you can either store your styles within your HTML/XHTML document, or you can store it in a separate file called *.css. I suggest you use the later

How do I write CSS

CSS consists of one or more rules. Each rule will have a selector and properties. The selector defines the HTML element(s) to which the rule applies and in a CSS rule it is followed by a curly brace. After the curly brace are the properties. A collection of one or more properties describe the appearance of all the elements in the document that match the selector. This is the basic syntax for a CSS rule

h1 {
color: black;
background-color: white;
font-size: large;

}

The h1 element is the selector in this case and sets this rule to apply to all level one headings. The selector is then followed by two properties. The first property defines the specific property that is being modified, in this case it is "color" which refers to the colour of the text. The property that finishes the pair describes the value(s) of that the property will take on, so the text will now be the colour "black". The rule is then closed with another curly brace

This CSS rule may also be written slightly differently, although it is not advisable, and I am only mentioning it to give you all the information you might need in the Wide World Web. The last element of a CSS rule, in this case "font-size: large;" need not have a following semi-colon. I suggest that you never omit this semi-colon as it can make things more difficult for you in the future, for example if you come to add another property to a rule you will have to remember to add a semi-colon to the previous property.

With the above rule (and assuming you have correctly linked your style sheet to the page) all of you level one headings will appear with black text, a background colour of white and in a large font size. You may have already noticed that this seems to be a bit vague, and if your getting worried that CSS isn't all its cracked up to be, don't worry, you will soon see it's true power.

CSS properties

CSS has the power to change the style of almost every element of XHTML. CSS can give you the power to style text, links, images, forms, tables and position them with the pixel perfect positioning.

Styling text

With the power CSS grants you, you can style text in a hundred and one different ways.

The code example bellow shows how you can edit the appearance of the H1 element

h1 {
color: black;
background-color: white;
font-size: large;
}

The color property defines the text colour of the element. Notice that color has been spelt the American way, this is very important as the English "colour" will NOT work. The property that has been assigned to this is "black", as you can imagine anything in a H1 tag will appear black (unless you over-ride this property).

The colour has been specified in text, it can also be specified with a hexadecimal value of the colour. The hexadecimal value is a six digit value preceded with a # character. This six digit character represents the RGB value of the colour, for example the code will look like #RRGGBB, where RR GG BB = the Red Green and Blue attributes of the colour. To set the colour of the text to black, you would use the following.

h1 {
color: #000000;
}

You could also shorten this to 'color:#000;' and then CSS will take the first digit and use it has the fourth, the second as the fifth and third as the sixth. To show this more simply I will use the hex code for a bright orange, #ff9900, this can be shown as #f90 for short. CSS provides many shortcuts like this so watch out for them in my tutorials as it can end up saving you a lot of time once you know them all like the back of your hand.

Now that the text colour has been set, we can define the background colour. I have assigned the background colour to white. This has been set with the background-color property. You could of also set this with the shorthand property "background". Again I have set the colour property with a text version, this can also be changed to a hexadecimal value. The code example below shows the appropriate CSS code.

h1 {
background-color: #FFF;
}

Last but not least is the font-size property. This has been set to "large". Large is the equivalent value to the browsers large text setting. Similar to the hex values for the colour property you can set a more specific value. To set a specific font size you can use a variety of properties. Some of the available properties are, pt, px, pc, em, % and inches. Out of this selection the most commonly used are px (short for pixels), and more recently the em value. PX allows you to set the text according to the number of pixels on the screen, setting the font to 12px will mean that a height of 12 pixels on the screen will be displayed. The em property is more recent and is becoming ever more popular. This property is relative to the users default font size preferences. For example if you set the font size to 1.25em then the size will be 125% of the users default settings. If the user has their default text setting to 16px then they will see 20px.

For each of the three above properties, we have discovered a different property selector. The properties of hexadecimal and em are the properties that I suggest you use for must of your settings. These settings allow for much more flexibility for the user and the designer. The hex value allows you to choose from a much wider range of colours, and the em allows you to apply flexible font size values which further aid the accessibility of your site.