paragraph should be purple, or that an image should have ten pixels of blank space around it, or that a heading should be a certain size. By understanding the concepts put forth here, you'll be able to learn and use the rest of CSS much more quickly.

However, that's the good news. The bad news is that this chapter will contain a good many caveats, warnings, and discussions of browser bugs and inconsistencies between operating systems. Remember, though, that CSS is not supposed to be a totally precise layout language -- and besides, many of the issues discussed in

Monday 22nd of January 2018 11:20:04 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. Reduce updating and maintenance time
  4. Increased accessibility (fewer, or no, HTML tables; no invalid junk markup)
  5. Adhere to W3C recommendations, improving interoperability and ensuring greater longevity (sites will not become obsolete)
  6. Better, more professional appearance (line–height, borders, padding, margins)
  7. Increased readability (line–height, borders, padding, margins)
  8. 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 »

bold, so that it's easier to distinguish from its neighbors:

<P STYLE="margin: -1.75em 0 0 0; font-weight: bold;">
This paragraph has a negative top margin...

We can see in Figure 7-18 that the paragraph has been pulled up so far that it's practically overlapping the end of the previous paragraph. This is the expected effect.

In a like manner, setting a negative value on the other sides willsmaller strip. The only plastic used is that which was on the stripto begin with, so it only appears at the beginning and end of theinline element.

7.3.8. Margins: Known Issues

As useful as margins are, a number of problems can arise with theiruse -- enough, in fact, that they warrant their own section,instead of just a small warning box.of the three major browsers natively supports the selection ofalternate style sheets (shown in Figure 1-4).

As of this writing, the one browser that does recognize alternatestyle sheets (Internet Explorer for Macintosh) will not apply thestyles from any LINK element with aREL of alternatestylesheet unless that style sheet is selected bythe user.