What is a Style Sheet?
A style sheet can when used effectively, help to keep the look of a site constant without the need of setting the text properties for each page. There are two types of style sheet, external and internal, although the language used in these style sheets can vary. This site uses an external style sheet that defines the font and the colour of each heading type and the main text. Although I will not cover the details of the code and the syntax you should use in your style sheet, I will tell you a bit about how you may wish to use them.
Internal or External Style Sheets?
Well again that depends on what sort of effect you want on your site. If you want to create an overall look for the site (like this one for example), then it will be best to use external style sheets. External style sheets allow greater flexibility and also save time on such sites, because if there is an element of the style you don't like or want to change you only have to change the style sheet and it will transform the rest of your site.
If however you wish each page to be different from the next then internal style sheets would be your answer because you don't want other pages to be affected by the style set in that sheet.
Internal and external style sheets can be used on the same page if you wish, so that you can make a page that looks similar to the other pages, but it maybe uses a different font for example. What you must remember is this, if say the font has been set to different styles in both the internal and the external style sheets, then the font that has been set by the internal style sheet will override that set by the external sheet. The latest "loaded" style sheet is the one that will override all attributes used in the sheet that have been set by other sheets.
Using Style Sheets
Depending on the type of site you have, you may wish to use different style sheets for different conditions, depending on what preferences have been set by the viewers browser.
In this example, we first specify a persistent style sheet located in the file mystyle.css:
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
Setting the title attribute makes this the author's preferred style sheet:
<LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
Adding the keyword "alternate" to the rel attribute makes it an alternate style sheet:
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
In the following example, we specify two alternate style sheets named "compact". If the user selects the "compact" style, the user agent must apply both external style sheets, as well as the persistent "common.css" style sheet. If the user selects the "big print" style, only the alternate style sheet "bigprint.css" and the persistent "common.css" will be applied.
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">
A cascade may include style sheets applicable to different media. Both LINK and STYLE may be used with the media attribute. The user agent is then responsible for filtering out those style sheets that do not apply to the current medium.
In the following example, we define a cascade where the "corporate" style sheet is provided in several versions: one suited to printing, one for screen use and one for speech-based browsers (useful, say, when reading email in the car). The "techreport" style sheet applies to all media. The colour rule defined by the STYLE element is used for print and screen but not for aural rendering.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Examples of uses of Style Sheets used on this page is Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved.