Web Development Summary 5: Implimenting multiple CSS sheets on one Page

Cascading style sheets control the look of your page. One web page can have many style sheets attached. The style sheet closest to the code overrides any of the previous declarations in the other style sheets. For example if you declare that links will be green in one style sheet and then in another that is attached after it set them to be yellow the links will be yellow instead of green.

One good use for having multiple style sheets attached to the same document is that you can have a different one for different types of media. The way you want your page to display for computer screens if usually different than the way you want it to display on a cell phone or other mobile device with a smaller screen. When users want to print a web page they don’t usually want everything you show on a browser, such as the navigation. By attaching and declaring a different style sheet for each of these media types you can in effect have a different page for each, but only write the code once.

In order to use style sheets for multiple media types you must declare the media type in the linking statement for each style sheet. The default is screen, but it is still good to declare the style sheet for computers as screen so that it is clear what each one affects. Here is the code to link a CSS sheet:
<link href="reffernttothecss.css" rel="stylesheet" type="text/css" media="mediatype" />

By using the different media types you can alter the look of the page using the same elements without overriding them. The different style sheet is only called when a device of its type accesses the page. For an example of how this works open a print preview of this page.