An Introduction to Style Sheets
Before you begin the next two tutorial chapters, we recommend that you have completed all previous tutorials or have a sound understanding of HTML website development.
Style sheets allow you to specify a series of formatting options for each type of element and thus help maintain consistency throughout a website. For example, the specification might define options for a heading ( <h1> ) element, including the font size and style of the heading, as well as its colour and the spacing of other objects around it.
The advantages of style sheets include:
- They save time because you only need to define the style for an individual HTML element once, and the style will be applied to every element in every webpage that uses that style sheet.
- They make your pages easier to modify because all you need to change is the style definition, and all webpages using that style sheet will automatically use the new formatting options.
- Style sheets provide formatting functions not previously available in the original HTML specification, such as accurate spacing between objects in a website.
- They help to separate a webpage's content from information which defines how the webpage should be displayed.
Individual styles can be set either independently from other webpages by defining the styles within the actual webpage's code or the styles can be defined in a separate file, allowing many webpages to access it and thus allowing a consistency to be maintained throughout multiple pages.
In the case of an individual style sheet file, it is usually identified by the file extension .css. For example, a website might consist of ten individual webpages, each linked to a style sheet file called styles.css. If one formatting option, such as the size of headings throughout the website needs to be modified, the styles.css style sheet can be changed. As a result, all webpages linked to the styles.css file, will have the new heading formatting applied.
It is important to note that although style sheets were introduced in 1996, some older web browsers may not support them. If you intend on using style sheets in your website, you should develop your webpages so that their design does not solely rely on their use.
Where to from here?
Creating style sheets is discussed in the next chapter.
