-->
Bookmark and Share

Using Style Sheets

Review the W3C CSS standard recommendation.

Using Media Types Effectively

By default, style rules apply to all media types. Say you had a complex set of style rules for a page that just didn't look good when printed.

You could create a separate style sheet just for printing with rules that override each and every rule in the default style sheet.

body {
  background-color: #ffff00;   /* yellow on black text */
  color: #ffffff;
}

h2 {
  background-color: #004040;   /* green on purple headers */
  color: #00ff00;
}

th {
  background-color: #ff6600;   /* red on orange table headers */
  color: #ff0000;

  ...other rules...
}

@media print {

  body, h2, th {
    background-color: #ffffff; /* print as black on white */
    color: #000000;
  }

  ...other overrides...
}

But that could be cumbersome. Instead, you could simply wrap the default styles in a @media screen { ... } rule. Then, none of those rules would be applied to the printed version and you could simplify the print styles.

@media screen {

  body {
    background-color: #ffff00;   /* yellow on black */
    color: #ffffff;
  }

  h2 {
    background-color: #004040;   /* green on purple headers */
    color: #00ff00;
  }

  th {
    background-color: #ff6600;   /* red on orange table headers */
    color: #ff0000;
  }

  ...other rules...
}

@media print {

  * {
    background-color: #ffffff; /* print all elements as black on white */
    color: #000000;
  }
}

You could also add media="screen" to existing LINK or STYLE tags to achieve the same effect.

Conclusion

We've covered a lot of ground here. But it's not necessary to know every last detail of CSS in order to make use of it. Like any technology, the best way to learn it is by trying some features out on your own pages.

CSS includes many features and was designed to accommodate not just the common visual browser, but other devices as well. Proper use of styles will not only enhance your current web sites, but allow you to reach users in other forms without having to completely rebuild your sites for specific devices.