Note that the boldface element in this case is positioned in relationto its parent element's content box, which defines itscontaining block. Without the relative positioning of the parentelement, the containing block would be another element. Consider acase where the element being positioned is a child of theBODY element, e.g., a paragraph or headingelement. With the right styles, the containing block for thepositioned element will be the entire BODY

Monday 22nd of January 2018 11:20:16 AM

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.

example, dotted and dashed styles -- and the element's background should appear in the spaces between the visible portions of the border.

Every border has three aspects: its width, or thickness; its style, or appearance; and its color. The default value for the width of a border is medium , which is not explicitly defined but usually works out to be two or three pixels. Despite this, the reason you don't usually see borders is that the default style is none, which prevents them from existing. If awould be something like what is shown here:

P {position: relative;}   /* establish containing blocks */
<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto;
width: 8em; height: 4em;">...</B>
Figure 9-19

Figure 9-19. The effects of absolute positioning

For the most part, the text in both paragraphs looks fairly normal. In the second one, however, the place where the boldface element would have appeared is simply closed up, and the positioned text overlaps the some of the content. There is no way to avoid this,

Thus, each list item has a 10-pixel top margin and a 15-pixel bottommargin. However, when the list is rendered, the distance betweenadjacent list items is 15 pixels, not 25. This is because along thevertical axis, adjacent margins are said to be collapsed. In otherwords, the smaller of the two margins is eliminated in favor of thelarger. Figure 7-16 shows the difference betweencollapsed and uncollapsed margins.

Figure 7-16

Figure 7-16. Collapsed versus uncollapsed margins

Correctly implemented user agents will collapse the vertically outer edge, as detailed in Figure 8-43.

Figure 8-43

Figure 8-43. The details of floating up and left with negative margins

The math in this situation works out something like this: assume the top inner edge of the DIV is at the pixel position 100. The browser, in order to figure out where the top inner edge of the floated element should be will do this: 100px + (-15px) margin + 0 padding =