CSS Notes - Web Team Procedures and Notes

This page is intended for use only by the Web Team.

  • Put link styles in this order:
    1. link
    2. visited
    3. focus
    4. hover
    5. active

Print Style Sheets

  • print URLs after the link text on a printed web page:
    • a::after, a::visited::after {
        content:' (' attr(href) ')';
        word-wrap: break-word;
      }
    Example of printed page output:
    • Ohlone College Catalog (http://www.ohlone.edu/catalog/)

  • print image on a printed web page (without the user needing to select the "print background images and colors" option in print settings):
    • setup the position, margins, paddings, width, height, and position (etc.) values for the containing element (example: div.logo) first; then
    • instead of using background-image, use content:url - example:
      div.logo::before {
        content:url(path/filename.jpg);
      }
    • could also use ::after
    [from lynda.com Creating a Response Web Design course]