A-level Computing 2009/AQA/Computer Components, The Stored Program Concept and the Internet/Webpage Design/HTML & style sheets





In HTML it is possible to add colours, fonts and other styles to the web pages that you build, however this is not recommended and HTML should be used for structure only. To add colours, fonts, etc. we will use Cascading Style Sheets, also known as CSS.

Style rules
A style sheet is made up of Style Rules. Each Style Rule has three parts, a selector, a property and a value:

For multiple properties you separate them using a semicolon;

Selectors
You need to know three types of selector:
 * type, selects all elements of a certain type on the page e.g.  selects all the heading 1s and turns them green
 * class, selects all elements of the class you have specified and applies the style to only those elements
 * ID, selects the item with the single ID that you have specified .  You can only apply an ID once in an HTML document

Type
Take the HTML behind a simple website: As we probably know, this would build the following page:

You might think my claims are a little over the top, but we could try to make the site better by adding some colour to the title using the following CSS rules: We can't just place this directly into the page, we have to create a new section inside the  tags, this is called embedding CSS, we'll look at another method, External Style Sheets later:

What this will do is change the heading to green, and change each paragraph to red and italic:

Class
Take another look at the HTML behind a simple website:

As you can see there are classes attached to some of the HTML tags, namely the 'textb' and 'texts' classes. On their own they don't do anything, we need to write some CSS style rules to make them come to life, remember that a class selector starts with a (.).

ID
Take yet another look at the HTML behind a simple website: As you can see, I have assigned an id to each of the paragraphs, this means that I can now style them separately from each other. Remember that an ID selector starts with a #.

Each id rule applies to a different paragraph, unfortunately I set #para2 to white, so you can't see it!

Style sheets (Cascading Style Sheets or CSS)
You should be pretty comfortable with the use of CSS rules, we are now going to look how these rules are linked with the HTML. As we know the style (CSS) of a web page’s contents should to be separated from its structure (HTML), and when these two things come together, it creates the page that you see in your web browser. There are two methods of linking style to structure that you need to know:


 * Embedded style, blocks of CSS information inside the HTML document
 * External style sheets, i.e., a separate CSS file referenced from the HTML document

Embedded style
Blocks of CSS information inside the HTML document. You can see that inside the head tag we have a block of CSS that applies to the HTML below it:

External style sheets
External style sheets use a separate file to store the style information (a .css file) and link the file from inside the HTML document.

home.html

style.css

As you can see above the HTML file links to the CSS file through the line:. You could get an HTML page to link to multiple CSS files and link a CSS file from multiple HTML files. External style sheets are a better way of linking CSS to HTML than embedding CSS in HTML as you can:

There is an awful lot more to learn about CSS and a new version is currently being released alongside HTML5. Don't get left behind, learn all about CSS2 and CSS3 at w3schools.