Sunday 25th of June 2017 03:51:12 AM

Style Guide

CSS: Style Sheet Guidelines (1)

According to its creators at W3C, Cascading Style Sheets “is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.” Let's expand that definition to see what it means for Web designers and developers:

  1. CSS is a standard layout language for the Web—one that controls colors, typography, and the size and placement of elements and images.
  2. Though precise and powerful, CSS is easy to author by hand.
  3. It is bandwidth–friendly technology: a single 10K CSS document can control the appearance of an entire website, comprising thousands of pages and hundreds of megabytes. (For an example, see the Sophisticated Style Sheet on page 2.)
  4. CSS is intended by its creators (W3C) to replace HTML table-based layouts, frames, and other presentational hacks.
  5. CSS, together with other web standards such as XHTML, helps us separate style from content, making the Web more accessible, and opening it up to more powerful applications and technologies to come.

Laying out pages with CSS instead of HTML tables—or using CSS simply to replace redundant, non–standard HTML hacks, such as invalid extensions to the <font> tag or the <body> tag—provides the following benefits:

  1. Conserve bandwidth (less markup for visitors to download)
  2. Reduce design/development time
  3. Figure 7-7

    Figure 7-7. Comparative paragraphs

    (Again, the background color helps show the content area, and thedashed lines are for illustrative purposes only.) As Figure 7-7 demonstrates, 10 pixels of space are added toeach side of the content area. This is somewhat similar to using theHSPACE and VSPACE attributes inHTML. In fact, you can use margin to set extraspace around an image. Let's say you want 1 em of spacesurrounding all images:

    IMG {margin: 1em;}
  4. Reduce updating and maintenance time
  5. Increased accessibility (fewer, or no, HTML tables; no invalid junk markup)
  6. Adhere to W3C recommendations, improving interoperability and ensuring greater longevity (sites will not become obsolete)
  7. Better, more professional appearance (line–height, borders, padding, margins)
  8. Increased readability (line–height, borders, padding, margins)
  9. More easily transition in future to more powerful standards such as XML (because page content no longer contains junk markup)

On the next page, we explore the basics of CSS and its recommended usage at NYPL. »

« CSS Section Index | CSS Guidelines 2 »

under the CSS specification, and no other browser will do the same thing, so it's best to avoid this altogether.

Even worse, if you try applying padding to inline elements in Navigator 4.x, you get a huge mess. The same sorts of things that happen when you apply margins to inline elements will happen if you apply padding, so it is wise to avoid setting margins, borders, or padding on inline elements.

Opera 3.5 incorrectly permits negativesilver. All this is demonstrated in Figure 10-5.

Figure 10-5

Figure 10-5. Selecting adjacent elements

If you wanted to make any element immediately following anH2 silver, then the universal selector comes intoplay:

H2 + * {color: silver;}

The fact that user agents ignore text between elements can actuallybe used to your advantage in many circumstances. Take, for example, a