12.5. Cascading Styles

So where does the "cascading" in Cascading Style Sheets come from? It comes from the fact that styles can stack, or override, each other. For example, suppose that an internal corporate Web site's appearance varies depending on the department that owns the various documents. It is important that all the documents follow the corporate look and feel, but the Human Resources department might use people-shaped bullets or other small changes unique to that department. The HR department doesn't need a separate, complete style sheet for its documents. The department needs only a sheet containing the differences from the corporate sheet. For example, consider the following two style sheet fragments:

corporate.css

body {
  font-family:verdana, palatino,  georgia,  arial, sans-serif;
  font-size:10pt;
}

p {
  font-family:verdana, palatino,  georgia,  arial, sans-serif;
  font-size:10pt;
}

p.quote {
  font-family:verdana, palatino,  georgia,  arial, sans-serif;
  font-size:10pt;
  border: solid thin black;
  background: #5A637B;
  padding: .75em;
}

h1, h2, h3 {
  margin: 0px;
  padding: 0px;
}

ul {
  list-style-image: url("images/corp-bullet.png")
}
...

humanresources.css

ul {
  list-style-image: url("images/hr-bullet.png")
}

The humanresources.css sheet contains only the style definitions that differ from the corporate.css sheet, in this case, only a definition for ul elements (using the different bullet). The two sheets are linked to the HR documents using the following <link> tags:

<head> <link ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial