PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Understanding CSS

Posted by on 23rd Oct 2008 | 3 comments

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.

  1. In an external style sheet
  2. In an internal style sheet
  3. 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.

[sourcecode language="css"]selector1 {
property1: value;
property2: value;
}
selector2 {
property3: value;
property1: value;
}[/sourcecode]

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

[sourcecode language="css"]body {
background-color: #ffffff;
color: #000000;
}
h1 {
color:#ff0000;
}
etc.
[/sourcecode]

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

[sourcecode language="css"]

My Secret "Blogging Success" Video Course has been Leaked!

Grab a Copy Now Before I Lock Them Away Forever!

Arrow