Hide
In-line styles are easy to understand, but highly impractical. You insert the style attributes into the relevant HTML tag. For example, to change the font size of a paragraph, you would enter the following:
At the opening tag,
<p style="font-size: 130%">
The effect:
This is an example of a paragraph which uses an inline style sheet.
However, if you were to change the font of all the text on the page, you would be forced to edit every single in-line style for the individual paragraphs – a rather tedious process. Use this when you want to apply a special style to just one element in the entire website.
View Flash illustration of writing in-line styles
TOP
Hide
In embedded styles, all your style information is stored in the HTML enclosed by the style tags. This is usually found in the head section.
Let's take a look at an embedded style:
<style type="text/css">
p { font: Verdana, sans-serif }
</style>
Note the standard style tags: <style type="text/css"> and the ending tag </style>
By using embedded styles, all the paragraphs would have the font type Verdana. Embedded style sheets thus save time and effort in styling all the individual paragraphs.
View Flash illustration of writing embedded styles
TOP
Hide
But what if you want to have your entire site in the same style? Should you insert an embedded style into every single page? What if you decide to change your website font? Should you have to manually modify the style sheet of every individual page?
Perhaps the most useful styling type which web designers use are the external style sheets. In external style sheets, your style sheet is placed in a separate file with the extension .css. Each of the individual pages will then link to the style sheet, and the styles would be applied to every single page.
The way to link to an external style sheet:
<link rel="stylesheet" type="text/css" href="style.css" />
There are numerous benefits of using external style sheets. First, modifying a single external style sheet effectively changes the styles of all the pages linking to that style sheet. This is not only convenient and is without doubt a tremendous time saver.
Moreover, in ThinkQuest it is common to have a site having multiple style sheets. A typical scenario will be to have a default stylesheet for screen display and an alternate stylesheet for a printable page. Another frequently encountered situation will be sites implementing a stylesheet switcher which allows users to specify their preferred look and feel through different skins or themes (Visit the winning site DRM: Two sides of the story for an example of choosing a preferred style sheets). Having external style sheets make multiple style sheets a breeze.
Also, web browsers only need to download the style sheet once. This saves bandwidth and speeds up the display of your site.
Note that in-line styles take precedence over embedded styles which take precedence over external styles. So you could have sophisticated styling to your site with good planning and careful design. Now that you know how to get started, get ready to start an external style sheet for your website.