Sunday 01st of March 2015 01:26:47 PM

CSS Style Guide

 

This Style Guide explains the markup and design requirements for web projects, along with various standards and best practices.

projects authored in valid XHTML 1.0 Transitional and styled with valid Cascading Style Sheets will be described here. See the XHTML and CSS sections below for details. Additional sections of this Style Guide, coming soon, will provide information on writing for the web, naming and filing your documents, and other useful topics and guidelines.

XHTML: Guidelines & Benefits

Library projects must be authored in structural XHTML 1.0 Transitional. Page authors should follow accessibility guidelines in compliance with U.S. Law, and so that our site’s content will be made available to the widest possible number of people, browsers, and Internet devices. In addition, all XHTML must validate.

XHTML Guidelines
The rules of XHTML as compared to HTML—an easy transition
What is XML?
A brief introduction to the foundation of XHTML
XHTML Benefits
Four key benefits of converting from HTML to XHTML
XHTML Authoring Tips & Tools
Simplifying the work process—includes tips on thinking structurally, and tools for hand-coders and Dreamweaver users
XHTML Accessibility Tips
Making sure your pages can be read by all visitors, browsers, and devices
XHTML Validation
Ensuring interoperability by avoiding errors and sticking to standards

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
Tips on authoring and linking to Style Sheets
replaced elements, such as images,are subject to a few crucial differences in how inline formatting ishandled. This difference stems from the fact that replaced elementsare still assumed to have an intrinsic height and width; for example,an image will be a certain number of pixels high and wide.

However, a replaced element with an intrinsic height can cause a linebox to become taller than normal. This does notchange the value of line-height for anyelement in the line, including the image itself.

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.

link popularity
which is the Bold face and which has a numerical weight of 700. Figure 5-11 shows us the visual result of all this.

Figure 5-11

Figure 5-11. Greater weight will usually confer visual boldness

Let's take this all one step further, and add two more rules, plus some markup, to illustrate how all this works (see Figure 5-12 for the results):

/*   assume only two faces for this example: 'Regular' and 'Bold'   */
P {font-weight: 100;}   /* looks the same as 'normal' text */calculations, but will be applied to the right and left ends of theelement. If an inline element has both padding and a background, thebackground may be extended above and below the edges of the line-boxin which the inline element appears, but user agents are not requiredto support this behavior. There is also no defined behavior to saywhether the foreground content of a previous line appears above thebackground of a succeeding line, or is overwritten by thatbackground. Negative values are not permitted.

Example

we've already covered. Some good examples of inline elementsare theEMtag and theAtag, both of which are nonreplaced elements, and images,which are replaced elements.

WARNING

Note that none of this applies to table elements.

There is only one other value for background-attachment, and that's the default value scroll. As you'd expect, this causes the background to scroll along with the rest of the document when viewed in a web browser, and it doesn't necessarily change the origin image's position as the window is resized. If the document width is fixed (perhaps by assigning an explicit width to the BODY element), then resizing the viewing area won't affect the placement of the origin image.

page is a generally bad idea.

There is one other way for a floated element to exceed itsparent's inner left and right edges, and that's when thefloated element is wider than its parent. In that case, the floatedelement will simply overrun the right or left inneredge -- depending on which way the element is floated -- in itsbest attempt to display itself correctly. This will lead to a resultlike