Thursday 19th of October 2017 04:17:02 PM

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 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
20-pixel borders as depicted in Figure 7-39:

P {margin: 5px; background-color: silver;border-style: solid; border-width: 20px;}
Figure 7-39

Figure 7-39. Inflating the border width to unhealthy levels

This is all as expected: the style and width combine to create aborder whose color is based on the foreground color of the element.

It's also possible to setwidths for individual sides. This is done

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 »

Even though that might seem like it's more than enough, another area of expansion is in pseudo-class and pseudo-element selectors.

10.2.3.1. :hover

To begin, there is :hover. The basic idea is that the styles in a :hover rule are applied while your mouse pointer is "hovering" over an element. For example, when

<LINK REL="stylesheet" TYPE="text/css"HREF="http://www.mycomp.com/style/site.css">

This ensures that all documents -- even those without their ownstyle declarations -- will use the site's overall stylesheet. Figure 11-1 shows one example of how thepages will appear.

Figure 11-1

Figure 11-1. Final results

as shown in Table 5-3.

Table 5-1. Hypothetical Weight Assignments for a Specific Font

The first three number values are assigned to the lightest weight. The Regular face gets the keywords 400 and normal, as expected. Since there is a Medium font, it's assigned to the number 500. There is nothing to assign to 600, so it's mapped to the Bold font face, which is also the variant to which 700 and bold are assigned. (<A CLASS="external"HREF="...">) to be silver, instead of mediumgray. They'll still be a dark gray once they've beenvisited, of course, unless you add a special rule for that as well:

BODY {color: black;}A:link {color: #808080;}      /* medium gray */A.external:link  {color: #666666;}A:active {color: silver;}A:visited {color: #333333;}   /* a very dark gray */being applied to unordered lists, and vice versa. You can'tcount on this, of course, so be careful.

If you wish to suppress the display of bullets altogether, thennone is the value you seek.none will cause the user agent to refrain fromputting anything where the bullet would ordinarily be, although itdoes not interrupt the counting in ordered lists. Thus, the followingmarkup would have the result shown in Figure 7-80: