Saturday 18th of November 2017 04:52:50 PM

Style Guide

CSS Style Sheets & Tips

Library projects must use valid Cascading Style Sheets (CSS) to control typography, color, and other layout elements. Style Sheets must be linked in a way that accommodates the capabilities of new and old browsers.

CSS Guidelines 1, 2, 3
Introduction to CSS (with examples), CSS definitions and benefits, tips on authoring, plus extensive resources
Steal These Style Sheets!
Style Sheets for your use in Library projects
CSS Validation
Ensuring that your Style Sheets are error–free (same as XHTML validation)

A number of valid Style Sheets have been provided for your use. If you wish to create your own Style Sheets, please discuss your requirements with the Branch Library's Web Coordinator.

background-position: -150px -100px;}
Figure 6-46

Figure 6-46. Another set of negative lengths

Negative percentages are also possible in theory, although there are two issues involved. The first is the limitations of user agents, which may not recognize negative values for background-position. The other is that negative percentages are somewhat interesting to calculate. Figure 6-47 shows why.

Figure 6-47

Figure 6-47. Aligning negative percentage points: two scenarios

This isn't to say that you shouldn't use negative values, following the paragraph has been pulled upward. Compare the followingmarkup to the situation shown in Figure 8-23:

Figure 8-23

Figure 8-23. The effects of a negative bottom margin

What's really happening in Figure 8-23 is thatthe elements following the DIV are placedaccording to the location of the bottom of theDIV. As we can see, the end of theDIV is actually above the visual bottom of itschild paragraph. The next element after the DIV isus to the following declarations:

H1 {font: 300% Helvetica,sans-serif; font-variant: small-caps;letter-spacing: 0.75em; text-align: right; padding-right: 1em;}

Figure 11-15 shows us our progress so far.

Figure 11-15

Figure 11-15. The styled title: a work in progress

We're getting close; in fact, the only thing left is that firstletter of the title. We can easily handle it with a:first-letter selector, so let's do that.The "S" is about twice the size of the "K" in

* {color: black;}

When used as part of a contextual selector, the universal selector can create some interesting effects. For example, assume that you want to make gray any UL element that is at least a grandchild of the BODY. In other words, any UL that is a child of BODY would not be gray, but any other UL -- whether it's child to a DIV, a list item, or a table -- should be gray. This is accomplished as follows:

And what is the format of an external style sheet? It's simply a list of rules, just like those we saw in the previous section and in the example above, but in this case, the rules are saved into their own file. Just remember that no HTML or any other markup language can be included in the style sheet -- only style rules. Here's the markup of an external style sheet:

H1 {color: red;}
H2 {color: maroon; background: white;}a block-level element such as a paragraph. There are all these linesof text, and we may well ask, "How did they get there? Whatcontrols their arrangement? How can I affect that?"

In order to understand how lines are generated, let's firstconsider the case of an element containing one very long line oftext, as shown in Figure 8-45. Note that we'veput a border around the line; this has been accomplished by wrappingthe entire line in a SPAN element, and assigningit a border style: