Sunday 20th of May 2012 04:41:30 AM

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
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

Here, if we set values for the left or right margin, they will bevisible, as Figure 7-23 makes obvious:

B {margin-left: 10px; background: silver;}

Figure 7-23. An inline element with a left margin

Note the extra space between the end of the word just before theinline element, and the edge of the inline element'sbackground. This can end up on both ends of the inline if we wish:

B {margin: 10px; background: silver;}

0 for left keeps the left edge of the clipping rectangle against the left edge of the image, but the 10px for top moves the top edge of the clipping rectangle downward 10 pixels. This will cause the top 10 pixels of the image to become effectively invisible.

clip can be applied to any element. Thus, you could display only the top left corner of a paragraph using something like this:

add a class to all anchors that need to be this shade of gray and modify your styles accordingly, with the result seen in Figure 6-4:

BODY {color: black;}
A:link {color: #808080;}      /* medium gray */
A.external:link  {color: silver;}
A:active {color: silver;}
A:visited {color: #333333;}   /* a very dark gray */

Figure 6-4. Changing colors of hyperlinks

This sets all anchors with the class external put to good use. Its basic purpose is to allow HTML authors toassociate other documents with the document containing theLINK tag. CSS1 uses it to link style sheets to theHTML document; in Figure 1-2, a style sheet calledsheet1.css is linked to thedocument.

Figure 1-2

Figure 1-2. A representation of how external style sheets are applied to documents

These style sheets, which are not part of the HTML document but arestill used by it, are referred to as external style