Sunday 25th of February 2018 08:17:32 AM

Style Guide

CSS: Style Sheet Guidelines (2)

What CSS looks like

A Basic Style Sheet
Note that the BODY declaration establishes the font family, text color, and background color. Any “child” of the BODY declaration (such as <p> or <ol> or <blockquote>) will use these same fonts and colors unless the Style Sheet specifies otherwise. In CSS, this passing of characteristics from “parent” to “child” is called inheritance.
        Notice also that browser offsets have been turned off via the margin and padding declarations. These declarations replace non-standard attributes to the HTML BODY tag, such as “marginheight” and “marginwidth,” which should never, never, never be used.
Redundant Selectors
Notice that p and li reproduce the font-family information already declared by BODY. According to the rules of inheritance, this should not be necessary. Unfortunately, this redundancy is required to work around the defects of Netscape Navigator 4, which ignores inheritance because it lacks even the most basic CSS compliance.  
A Sophisticated Style Sheet (offsite link)
Demonstrating how CSS can entirely replace (X)HTML table layouts. View in a CSS–capable browser (IE5+, Netscape 6+, Mozilla, Opera 5) to see how the Style Sheet creates the page layout. (View the same site in IE4 or Netscape 4 to see how the layout is hidden from those browsers, since they are incapable of reproducing it.) apply some borders to a SPAN element without anymargins or padding, we'd get results such as that shown inFigure 8-57.

Figure 8-57

Figure 8-57. Inline borders and line-box layout

The borders are placed as they are because the border edge of inlineelements is controlled by the font-size, not theline-height. In other words, if aSPAN element has a font-size of12pt and a line-height of

CSS Usage at NYPL

View Source, and you'll see that this Style Guide has been laid–out entirely with CSS (no (X)HTML table hacks). Alas, for the foreseeable future, most Library projects will employ a combination of CSS and XHTML tables, in order to accommodate non-CSS-compliant browsers such as Netscape Navigator 4 and Microsoft Internet Explorer 4.

Tables and Accessibility

Although XHTML table layouts are less accessible than pure CSS layouts, and although they require additional markup (and thus use more bandwidth), it is entirely possible to create valid XHTML table layouts that work in combination with valid Style Sheets—and that is what this Style Guide recommends.

On the next page, we explore CSS resources to help you learn more. »

« CSS Section Index | CSS Guidelines 3 »

Given the following:

<P STYLE="font-weight: normal;">This is a paragraph which contains a
<B>boldface element</B>, but Navigator 4 won't make the text bold.</P>

That's right: all of the text in the example paragraph will have a normal font weight. For some reason, Navigator 4 doesn't know that it should assign a font-weight of bold (or bolder) to B elements. Similar problems can arise when using STRONG, or any other element that would ordinarily

The result is that the first paragraph has a gray border, having taken the value gray from the foreground color of the paragraph itself. The second paragraph, on the other hand, has a black border because that color was explicitly assigned using border-color.

7.4.4. Shorthand Border Properties

While it's nice to havevalue), and thick. These keywords don't necessarily correspond to any particular width but are simply defined in relation to one another. According to the specification, thick is always wider than medium , which is in turn always wider than thin.

However, the exact widths are not defined, so one user agent could set them to be equivalent to 5px , 3px , and 2px , while anotherreason to use attribute selectors is that the.class and #ID selectors applyonly to HTML documents, or to any other document that uses a languagethat includes the concepts of class and ID. Other languages, such asthose based on XML, might not honor these conventions, in which caseyou'll need to use the attribute selectors instead. Matching hyphenated values