Cascading Style Sheets

What is a style sheet?

A Cascading Style Sheet (CSS), more simply referred to as a style sheet, is a separate document that contains all the information about style for your webpage or website. You don't have to use a style sheet - fonts, colours and size can be coded directly into your HTMLHypertext Markup Language (HTML): web pages are written in HTML, web browsers interpret HTML and render or display the end result document - but there are many good reasons for separating your webpage's content and style.

Why use a style sheet?

The main reason for using a style sheet is because it will save time. You might finish your website and decide that you don't like the font and the font colour. If you don't have a style sheet, it could be very time-consuming to change the font and colour for each separate paragraph of text. With a style sheet, you only have to make the change once, save your changes and then refresh your browser and all the text will change accordingly.

Using a style sheet makes it easier to be organised as you create your site, and makes it simpler to make changes. When you want to make a style change, you will know where to look, and not have to search through lines of HTML code.

These days websites aren't just viewed on your computer screen. They can be viewed on mobile phones, PDA [PDA: Personal Digital Assistant - a type of handheld mini computer. ]s and television screens. You may need to apply different styles for different platform [platform: A platform requires to the architecture of a particular piece of technology (and sometimes software). The most common technology platform is the computer, but more recent platforms include mobile phones, PDAs and game consoles. ]s, and style sheets enable you to do this. You could develop one style sheet for use in a normal web browserweb browser: an application used to browse the Internet or view web pages, and another made for mobile phones.

Here is an excerpt from a style sheet used on Bitesize. This part determines which font and size to use for the headings H1 to H3.

Screenshot of a style sheet

How do I get my style sheet to work with my HTML pages?

Using a style sheet is very simple - you put a link to it within the head section of your HTML document. Note that you must use the file extension .CSS for all style sheets.

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

The href attribute is the link to where your style sheet is kept. In the screenshot below, you can see the head information for a GCSE Bitesize webpage. The link to the style sheet can be seen on line 5.

Screenshot of HTML code showing the line of code that refers to the style sheet