There are several different ways you can apply a style sheet to your Web site. The method you choose will depend on the goals you set and what you're looking to change. Each of the following types of style sheets apply to your Web pages in unique ways.
External style sheet
An external style sheet is the most effective way to create a unified style for your entire Web site. This style sheet is saved as a single file separately from all of your Web pages, so when you want to make a site-wide style change, you only need to change one file.
You must apply the external style sheet to each page by placing a <link> tag between the <head> </head> tags at the top of the page. In HTML the <link> tag has no end tag, so the style sheet link would look something like this:
<head>
<link href="/directory/file.css" rel="stylesheet" type="text/css">
</head>
Internal style sheet
An internal style sheet applies to a single page of the Web site and appears within the <head> </head> tags of that page only. It looks something like this:
<head>
<style type="text/css">
</style>
</head>
Inline style sheet
The inline style sheet is the least effective way to use style sheets because it applies only to a single element. If you use too many of these types of sheets, you will have to go back through all of the code on all of your Web pages to make changes to the style affecting these elements.
An inline style sheet appears directly within the opening tag for the element to which it applies. If, for example, you wanted to apply a rule to a single paragraph on one of your Web pages, the inline style sheet would look like this:
<p style="selector{property: value;}">
Content of the paragraph.
</p>
Cascading
When you have a combination of style sheets, inline and external for example, the browser will "cascade" them into a single style sheet. There is an established hierarchy for applying the rules:
- Inline style sheet
- Internal style sheet
- External style sheets
- Browser default style
Ready to Learn More?
Once you master the basics of style sheet usage, you can find many advanced tutorials on the Web. You might also try viewing the code on Web sites you find attractive or well-designed. Just keep practicing and soon you'll reap the benefits of using CSS on your Web site.