Sunday 25th of June 2017 03:40:53 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
course, but CSS doesn't distinguish between ordered and unordered list items. Thus, you might be able to set an ordered list to use discs instead of numbers. In fact, the default value of list-style-type is disc, so you might theorize that without explicit declarations to the contrary, all lists (ordered or unordered) will use discs as the bullet for each item. In fact, that's up to the user agent to decide. Even if the user agent doesn't have a predefined rule such as
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 alistapart.com 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.)

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 »

(*), and it matches any element in the document.Thus, use this declaration to make sure all elements have a color ofblack:

* {color: black;}

When used as part of a contextual selector, the universalselector can create some interesting effects. For example, assumethat you want to make gray any UL element that isat least a grandchild of the BODY. In other words,any UL that is a child of BODY(the paper) is the same as the document size, at least for that page.In a web browser, though, the viewing area can change as the userresizes the browser's window. This will cause thebackground's origin image to shift as the windowchanges size. Figure 6-56 depicts several views ofthe same document. So in a certain sense the image isn't fixedin place, but it will remain fixed so long as the viewing areaisn't resized.

Figure 6-56

Figure 6-56. Centering still holds, even if the image is "fixed"

* {color: black;}

When used as part of a contextual selector, the universalselector can create some interesting effects. For example, assumethat you want to make gray any UL element that isat least a grandchild of the BODY. In other words,any UL that is a child of BODYwould not be gray, but any other UL -- whetherit's child to a DIV, a list item, or atable -- should be gray. This is accomplished as follows: