Multiple Stylesheets

Another benefit to using CSS is that it cascades—multiple stylesheets can be used on one page, and one page can have multiple sets of styling. If you have multiple, some sets will be preferred over others (meaning if the same element is styled twice, one set's parameters will take precedence over the others). This is good if you want, say, one base style across your whole site, and then unique styling on some pages.

So, in order of least preferred to most preferred, it goes external stylesheets, internal stylesheets, and inline styling.

External stylesheets

External stylesheets are files separate from the HTML pages themselves and are referenced in the <head> section of those pages. They contain only styling information and usually have a .css extension. Here's a link to this site's main stylesheet.

To reference an external stylesheet, put the following line in your page <head>, replacing the href="style.css" with the file name of your stylesheet:

<link rel="stylesheet" href="style.css">

The benefit to external stylesheets is that they can be reused. As many pages as you'd like can use this stylesheet, and you only have to update one page to update the styling information in them all.

If you've specified multiple external stylesheets in your page <head>, ones referenced later in the page will be preferred over one referenced earlier.

As a good example of how multiple external stylesheets can be used, Tesserae pages about CSS load a special stylesheet that tints the banners and changes the colors of links. This is then used on top of the main stylesheet to make the CSS pages the same layout, but visually distinct to the HTML pages.

Internal stylesheets

Internal stylesheets are styling information placed in the page <head> using the <style> tag. It will only apply to that document.

<style>
	body {
		width: 800px;
		background-color: #111; }
</style>

Internal stylesheets are useful if you need document-specific styling information (not shared between pages). It won't be separated from the document anymore, however, and you should only use it when external stylesheets don't give you the flexibility you need. Consider if a second external stylesheet would be better for your purposes.

Inline styling

Any arbitrary element can be styled inside the markup using inline styling, or the style parameter. This is technically valid, but should only be used as a last resort, as this defeats the purpose of separating the styling from the markup.

<h1 style="font-size: 18pt; color: #DA8F12;">

Despite this, inline styling does have a use for testing styling on one element, or if you're absolutely sure this bit of styling won't be reused anywhere.

Order of preference

If multiple sets of styling are present on one page, the browser will prefer them in this order, from least preferred to most preferred:

  1. Browser default styling (yes, browsers do have internal stylesheets to fall back on)
  2. External stylesheets
  3. Internal stylesheets
  4. Inline styling

Summary:

  1. Multiple stylesheets can be used on one page, and one page can have multiple sets of styling. If there's multiple stylesheets, some will take precedence over others.
  2. External stylesheets are external text files containing styling information. They can be reused between as many pages as you want, and you only need to update one file to fix them all.
  3. Internal stylesheets are stored in the <style> tag in the page <head>. They're good if you have styling that only applies to one page.
  4. As a last resort, inline styling can be used to style one element directly on the page itself, but it gets messy and largely defeats the point of CSS.
  5. In order of least preferred to most preferred: Browser default styling, external stylesheets, internal stylesheets, inline styling.

Further reading