Your first web site Part 3 - CSS, the styling languge of the Web

From Web Education Community Group
Revision as of 19:35, 23 August 2011 by Cmills (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Surfing the web is easy, creating the web is too!

Introduction

In the last article, I took you through the head and body contents of the sample web page template, showing you what all the different parts do, and giving you a fairly complete knowledge of the basics of HTML. Download the template now if you haven’t already done so, by clicking on the previous link.

In this article I will start looking at Cascading Style Sheets — or CSS. This is what you use to change the look and feel of your web page. Maybe you want to change the font that your text uses, or give your page a nice bright background color, or give your content more room to breathe? CSS is the tool you need!

There is so much that you can do with CSS that several full books have already been written about it. In this article I am just going to go through the very basic concepts. In the next one I will look at the CSS in the example template, and introduce you to a few of the things you can do with it. For a thorough treatment of CSS, go and check out the Opera web standards curriculum.

Getting started with CSS

CSS does not use elements like HTML does, rather it uses a system of rules. A CSS rule looks like so:

A CSS rule, with the vital parts of it highlighted - selector, curly braces, property, property value, semi-colon

The components of this CSS rule are as follows:

  1. The selector is the part of the rule that states what element, or elements on the HTML page the CSS is applied to. In this case, we are saying apply this rule to all paragraph elements on the page
  2. The curly braces are a required part of the the CSS rule. These have to be present to contain all the properties, otherwise errors occur
  3. Property: The properties of the selected element(s) you want to manipulate via CSS are listed here. You can list one, or as many as you like! color is one property of paragraph elements that you can manipulate via CSS
  4. Property value: after each property name, you need to include a colon (:) followed by the value you want to change that property to. In this case, we have chosen the colour blue
  5. Semi-colon: every property/property value line must end with a semi-colon (;), otherwise the rule won’t work properly

So, the above rule, in English, is saying Find all paragraphs on the page and change the colour of their text to blue. There are so many different properties in CSS that I can’t hope to cover them all in this article, but I’ll cover some of the most important ones to get you started.

You don’t have to write the CSS all neatly on sepraate lines like this; I have presented the rule like this to make it easier to read. Presenting it as p { color: blue; } will do exactly the same thing, but it isn’t as easy to read. Bear this in mind as you write bigger and bigger stylesheets.

CSS selectors

The selector in the above example is about as simple as you can get. It simply selects all elements of that type on the page. But there are other types of selectors to consider. Below I’ll run through the selector types that we will see in this article series:

  • Element selector: The one we’ve just seen, this selects an element type. Example: p { color: blue; }
  • ID selector: Selects an element with an id attribute equal to the specified value. Example: #contactdetails { color: blue; }. Note the hash symbol (#), which denotes the selector value as an id. Remember that you can have only one of each id per page
  • Class selector: Selects all elements with a class attribute equal to the specified value. Example: .contactdetails { color: blue; }. Note the dot (.), which denotes the selector value as a class. You can use the same class multiple times on each page
  • Descendant selector: If you put two (or more) element names together in a row, separated by a space, you are telling the rule to select any element (starting from the right hand side) inside another element, inside another element, etc. Example: div p { color: blue; } selects any paragraph inside a div, and turns their text blue
  • Combination selector: It is possible to combine multiple types of selector together for really specific selections of elements. This is where it can get really complicated, so be careful. Example: div.contactdetails p { color: blue; } colours the text of any paragraph inside a div with a class of contactdetails blue

For more complete coverage of the different CSS selector types, check out the web standards curriculum CSS basics article.

Choosing colours in CSS

There are many ways to specify what colour you want in CSS, such as hexadecimal values, RGB values, even HSL values. In this article however I am sticking with colour keywords to keep things simple, even though they are not recommended best practice these days.

Read up more about the best way to specify colour values once you have become comfortable with the contents of this article series.

Applying CSS to your HTML

In the HTML head section earlier on, we looked at the following line, which applies the CSS to our HTML in the example template:

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

The CSS is all placed in a separate file (known as an external stylesheet), with an extension of .css (just the rules in a big long line, no head section or anything needed — check the CSS file out for yourself). The above line points it at the HTML file, so it will style it.

There are actually two other ways to apply CSS to HTML:

  • Internal stylesheet: You can include your CSS rules inside a style element inside the head of your document — this is called an internal stylesheet. This has exactly the same effect as putting your rules in an external file and linking to the file, except that they will be locked inside one HTML document, and you couldn’t reuse the styles by linking other HTML documents to the same CSS file.
  • Inline: You can apply styles to one specific element in an HTML document by including them inside a style attribute on that element. As you can imagine, this is even less reusable.

So, stick to external CSS files for now, as it is the best way to go in most cases. Reuse is the big beauty about external CSS files — you can style as many HTML documents as you want with one external styleshet, thus ensuring that every page on your site has the same look and feel. Following on from that, if you want to update a style across all your HTML pages (for example turn the text of all paragraphs from blue to red), you only need to make the change in one CSS file. Imagine if you had 500 HTML pages on your site, and you had to make the same style change across every file!

Summary

So there we have it — the basics of how CSS works. In the next article I will show you some of this knowledge in action, and go through the sample template to show what all of the CSS in there does. This will not give you a complete knoledge of CSS, as it is a vast topic, but it will at least get you started comfortably on the road to understanding it.