Blogging Tips

Understanding CSS

CSS stands for Cascading Style Sheets. Its job is to control the presentation of a web page document, written in (x)HTML. The idea is that your web document, written in (x)HTML, contains the content and structure of your page, and then you apply the CSS to give the page colour and layout, keeping content separate from design. To understand more on this way of working I recommend reading SitePoint’s – What is CSS?.

There are 3 ways in which we can apply CSS styles to a web page.

In an external style sheet
In an internal style sheet
Using inline styles

CSS Rulesets

For an internal or external stylesheet, the CSS is made up of rulesets, which contain the selector (usually an (x)HTML tag, id or class), then the properties and their values to apply to that selector, eg.

selector1 {
    property1: value;
    property2: value;
}
selector2 {
    property3: value;
    property1: value;
}

We’ll be dealing more with CSS and the various properties available over the forthcoming weeks.

External Style Sheets

To link to an external style sheet you can either use the link tag or import the style sheet in. With some versions of Internet Explorer still being a bit buggy with the @import method, it’s usually a good idea to stick with the link tag.

The Link Tag

To use the link tag you insert the following code into the head section of your (x)HTML document (ie. between the <head>…</head> tags).

<link type="text/css" href="/css/style.css" rel="stylesheet" />

Here the attribute href contains the path to the style sheet. This can be relative to the page eg. ../css/style.css or relative to the root of the site eg. /css/style.css. The rel then usually contains the value of ’stylesheet’ to tell the document that the linked file is a style sheet. You can also specify a value of ‘alternate’ to specify an alternative style sheet. This won’t be loaded by default but the user can switch to it via their browser settings. However, we’ll get onto alternate style sheets another time!

The link tag is also used for linking other files so be sure to have a correct rel attribute in there. The type attribute tells the browser what type of content the file contains, which for style sheets is plain text css code. Finally, we have an optional attribute of media which lets you tell the browser how and when the style sheet should be used. Examples of media values is all (default), screen (for colour computer screens), handheld (for handheld devices eg. PDA) and print (for print preview and printing a document). If media is omitted then it is set to all by default.

The @import Method

To use the @import method we insert the following into the head section of the web document

<style type="text/css"> @import url(/css/style.css); </style>

The value of the path inside the brackets of the url should either be relative to the page importing the file or relative to the root, as with the href value of the link tag. Although Internet Explorer can have problems when you specify media types with the @import method, there’s no problem using this method within an external style sheet, so you could link to an external style sheet using the link tag in the top of a web document, and then in the external style sheet you could use the @import method to include various style sheets. This is ideal for large sites where multiple style sheets are used for easy structure.

The content of an external style sheet will contain rule sets which are made up of selectors and their property value pairs. A typical example could be

body {
    background-color: #ffffff;
    color: #000000;
}
h1 {
    color:#ff0000;
}
etc.

Only this type of coding should be in a CSS style sheet. No HTML tags (in diamond brackets) or anything else should be there otherwise the style sheet will probably not load correctly.

The Internal Style Sheet

The internal style sheet is similar to the external version, in that all of the rules are kept together, however instead of it being applied via a link tag or @import rule, all of the rules are inserted between style tags in the head section of the document. For example

<style type="text/css>
body {
    background-color: #ffffff;
    color: #000000;
}
h1 {
    color: #ff0000;
}
</style>

As you can see, this is the same CSS code as that of an external style sheet. Again, the style tag can take a second attribute called ‘media’ which can allow you specify different rules for different types of media, similar to the external style sheet method.

Inline Styles

Inline styles are CSS styles that are included via the style attribute for any (x)HTML tag. You add in the property value pairs into the attribute to change the style of that particular tag eg.

<body style="background-color: #ffffff; colour: #000000;">
    <h1 style="color: #ff0000;">Hello World!</h1>
    ....
</body>

Which Way?

The most suitable method of applying CSS to your web pages is via an external style sheet. It’s more efficient for updating, and will reduce the amount of bandwidth required on your site, as once the file is loaded for the first page visit, it will be stored in the user’s browser cache throughout the site.

You can have multiple pages calling this style sheet and if you had, for example, 100+ pages on your site and wanted to change the colour of all the text, you would only need to change the one style sheet file and upload that. All of your text changes colour instantly. Imagine having to change all 100+ pages if they used an internal style sheet or had inline styles?! Even if you use something such as Dreamweaver, which allows you to use a template, and you changed the internal style sheet in that, you would still need to upload all 100+ files.

Written by Sarah from Stuff By Sarah
Posted on October 23rd, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

5 Responses to “Understanding CSS”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

Christopher Ross says:

October 23, 2008 at 3:55 pm

Sarah, thanks for a wonderful post! It’s always refreshing to see somebody else is passionate about CSS.
Mike Huang says:

October 24, 2008 at 1:41 am

Have been trying to figure out the IE6 CSS problem. Tough crap

-Mike
Sarah says:

October 24, 2008 at 2:45 am

Hi Mike, if you’ve got an IE6 problem post up in the forums and we can help you there

Trackbacks

Blog Roundup for October 24th :: Christopher Ross says:

October 24, 2008 at 6:43 am

[...] I’m also giving away a copy of the Adobe CS4 Suite as well. Sarah wrote a nice piece on understanding CSS this week, Chris has a cool new trailer or two over at Oddity. I’ve started reading work over [...]
The HTML Document Head says:

October 30, 2008 at 3:01 pm

[...] allows you to link to external files and include them into the site. Last week we covered how to link to a CSS Stylesheet [...]