News of the Day

Using CSS: How it works

Posted on October 4, 2003 at 02:04 PM in Using CSS | Permalink

I don't really want this to be a "Beginner's Guide to CSS" as there are enough of them around. A good primer for learning CSS is located at W3Schools' CSS Tutorial.

UPDATE: Nick Bradbury found a really good primer for CSS: Bare Bones, No Crap, CSS Text Control Primer.

This article is going to be a very brief skim over the basics, so if you don't understand this article I highly recommend having a look through that tutorial. Most of what will be covered in this article is from the W3Schools tutorial anyway.

CSS controls the style and layout of web pages. This means things like font typeface & size, background colours & images, positioning, margins & padding. As mentioned earlier, this is done to separate the content of a site from it's style information. CSS information is located in one of three places:

  1. A separate CSS file that is linked to from the HTML file using <link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css" />
  2. Contained within <style></style> tags in the <head> section of the HTML
  3. In the style="" attribute of an individual tag in the HTML file
Deciding on which location to use is important, but we will discuss this later.

What it looks like

CSS code consists of three parts: selectors, properties & values. The syntax for this is:

selector {  property: value; }

The selector is generally the HTML element/tag that you are defining the style for, e.g for the <body> tag the selector is body. The property is the CSS property that you wish to define for the selector and the value is the value for that property. See W3Schools' list of CSS properties.

So, for example, if I wanted to make the body of the HTML document have a background colour of red and have a top margin of 20 pixels, the code would be:

body
{
 background-color: red;
 margin-top: 20px;
}

Things to note:

  • The line spacing is purely for readability, this could quite correctly been written body {background-color: red; margin-top: 20px;}
  • The semi-colon at the end of each line, don't forget it because it won't work without it.
  • For anyone who uses British spelling, colour is spelt the American way, i.e. 'color'.
  • The colour value red. There are a number of different ways of specifying colour. See here for an explanation
  • The measurement 20px. All measurement values look like that: number then unit type without a space in between. Have a look at a list of possible unit types.

id & class attributes in HTML are very important to CSS. Have a read through the W3Schools page on this for an explanation.

That's about as far as the basic overview is going to go, as I mentioned earlier, check out W3Schools for a really good primer. Finally, just to demonstrate the power of CSS, here is my homepage, and here is my homepage with CSS turned off. That is how much of a difference CSS can make!

Next time we'll dive into the debate as to which of the three locations mentioned at the top of this article should be used for CSS.

TrackBack - http://www.typepad.com/services/trackback/6a00d8341f134553ef00e550276e908833

Listed below are links to weblogs that reference Using CSS: How it works:

Comments

"I wish the real world would just stop hassling me" - Rob Thomas