Tuesday 25th of July 2017 02:31:05 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
Figure 7-55

Figure 7-55. An inline element with a border displayed across multiple lines of text, with the border boxes closed

It's also acceptable for the lines to be "open" asshown in Figure 7-54.


Borders cannot be applied to inline elements inNavigator 4.x orExplorer4.x/5.x. Only Opera 3.x draws borders aroundinline elements, and it only caps the beginning and end of the

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
is supported in IE4 for Windows, but not IE4 for Macintosh. Thepossible support values are:

Style declaration is made important,thereby raising its weight in the cascade. Important declarationsoverride all others. In CSS1, important author styles override allreader styles, even important ones. In CSS2, this is reversed, sothat important reader styles always win out over the author'sstyles, important or otherwise.

according to their values for vertical-align. By default, this will cause all text in the line to be aligned along their baselines, but of course different vertical-align values will have different effects. All of the elements could be top-aligned, for example. We'll return to vertical alignment later in the chapter, but for now will assume that everything is baseline-aligned.

Now the line-height comes into play. Let's assume the following case: likely to be one of the first parts of the specification to beimplemented quickly. Therefore, while you might not be able to doeverything described here as soon as you read this, expect most (ifnot all) of this to be included in browsers released in the year 2000or later.

First, in addition to the existing selector mechanisms likecontextual selectors, we have several new selector symbols that willmake it a lot easier to construct very specific, very sophisticatedselections -- without having to resort to sprinkling classes orto its left.

This rule also prevents floated elements from overlapping each other. Let'ssay you have a BODY that is 500 pixels wide, andits sole content is two images that are 300 pixels wide. The first isfloated to the left, and the second to the right. This rule preventsthe second image from overlapping the first by 100 pixels. Instead,the second image is forced down until its top is below the bottom ofthe left-floated image, as depicted in Figure 8-32.document. It may look wrong, but it isn't.

The example shown in Figure 6-49 is correct because the origin image has been placed in the center of the BODY element and then tiled along the y-axis in both directions -- in other words, both up and down. In a similar fashion, when the repeat direction is horizontal, the background image is repeated to both the right and the left, as shown in Figure 6-50: