Friday 15th of December 2017 08:50:25 PM

Style Guide

CSS: Style Sheet Guidelines (3)

 

The Style Guide cannot possibly teach you all there is to know about CSS. But the following resources will get you up to speed:

  1. Online Guides & Articles
  2. Online Tools & Advanced Information
  3. Recommended Books
 

Online Guides & Articles

CSS Guide
John Allsopp’s complete online tutorial
Fear of Style Sheets
A gentle introduction from alistapart.com, plus tips on “no-fault CSS” to accommodate bad browsers (1998-1999)
Fear of Style Sheets 4
From alistapart.com, showing how type sizes fail in CSS and explaining why CSS pixels are the only sure means of controlling type size on the web; however, since CSS pixels can create an accessibility hazard ...
Size Matters
... Todd Fahrner, an invited expert to the W3C’s CSS Working Group, shows how to work around font–size keyword implementation flaws in Netscape 4 and IE4/5 (Win) to control type sizes while maintaining accessibility (from alistapart.com)
Little Boxes
Owen Briggs’s clickable CSS layouts (Open Source)
A Web Designer's Journey
From alistapart.com: showing how to design sites exclusively in CSS, work with the CSS box model, and use different types of links to turn off CSS in bad browsers
Practical CSS Layout Tips, Tricks, & Techniques
From alistapart.com: Mark Newhouse shows more ways to use CSS to replace (X)HTML tables
« Top
 

Online Tools & Advanced Information

CSS Validator
Check your Style Sheet for errors
1-click validators
One–click validation "bookmarklets" from David Lindquist
Favelets
Advanced CSS "bookmarklets" (IE only)
Web Review Master Compatibility Chart
More than you ever wanted to know about poor CSS support in browsers, compiled by Eric Meyer
SelectORacle
English translations of CSS–2 selectors (advanced)

There's a downside: as of this writing, web browsersdon't get this fixed alignment right, so this example was justan interesting theoretical exercise.

6.2.6. Bringing It All Together

Just like with the font properties,

Box Model Hack
Working around the flaws in IE5/Windows’s CSS Box Model (advanced)
« Top
 

Books

Cascading Style Sheets: Designing for the Web
by Håkon Wium Lie and Bert Bos (Addison-Wesley: 1997)
Though hardly recent (1997), this book has the advantage of having been written by world-class experts. Lie and Bos are W3C members, and Lie is widely considered “the father of CSS.”
Cascading Style Sheets: The Definitive Guide
by Eric Meyer (O'Reilly: 2001)
Eric Meyer is a world expert on CSS, an invited expert to the W3C's CSS Working Group, and currently serves as the Web standards evangelist for Netscape Communications (which is one reason Netscape 6.01 is so much better than Netscape 6.0). His book is both advanced and comprehensive.
Taking Your Talent to the Web
by Jeffrey Zeldman (New Riders: 2001)
Zeldman is a web designer, CSS advocate, and group leader of The Web Standards Project. His book is written for graphic designers and intermediate developers, and its chapter on CSS clarifies many issues while helping you avoid the snares of bad browsers. Disclosure: Zeldman helped prepare this Style Guide.
« Top

The next section presents Style Sheets for your use on NYPL projects. »

« CSS Section Index | Steal These Style Sheets! »

P {font-weight: 100;} /* looks the same as 'normal' text */P SPAN {font-weight: 400;} /* so does this */STRONG {font-weight: bolder;} /* bolder than its parent */STRONG B {font-weight: bolder;} /* bolder still */<P>This paragraph contains elements of increasing weight: there is an<SPAN>SPAN element which contains a <STRONG>strongly emphasizedelement, and that contains a <B>boldface element</B></STRONG></SPAN>.</P>
Figure 5-12

Figure 5-12. Moving up the weight scale

specification.

There is one important question here, which is this: what happens to the document display when an element is floated out of its parent element by using negative margins? For example, an image could be floated so far up that it intrudes into a paragraph that has already been displayed by the user agent. In this case, it's up to the user agent to decide whether or not the document should be reflowed. The CSS specifications explicitly state that user agents are not required to reflow previous content to accommodate things which

Only the first and third paragraphs match the rule because they arechildren of BODY. The second paragraph is a childof DIV, and therefore a grandchild ofBODY, so it does not match the rule.

Child selectors must have at least two or more selectors separated bythe > symbol. It is possible to make a childselector part of a contextual selector as well:

DIV OL>LI EM {color: purple;}
"on top?" You'll note that few of the examples in this section use background colors for all elements. That's because if they did, content might get overwritten by the background color of a following element. The CSS specification does not say what should happen when elements overlap in this manner; instead, it's left up to implementors to decide.

It has been argued that all foreground content is always shown "in front of " all background content, and the behavior of floated elements seems to support this interpretation. On the