Tuesday 17th of October 2017 07:59:28 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
B {margin-left: 10px; background: silver;}
Figure 7-23

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

As expected, Figure 7-24 shows a little extra spaceon the right and left sides of the inline element, and no extra spaceabove or below it.

if either height or width are set to auto for a replaced element, then the value will always evaluate to the intrinsic height or width of the element. Thus, if an image is 150 pixels wide, and its width property is set to the value auto, then its width will evaluate to 150px , as shown in Figure 8-26:

IMG {display: block; width: auto;}
Figure 8-26

Figure 8-26. Replaced elements with auto width are rendered using their intrinsic size

marker, such as a small dot or a number. This marker isn't actually part of the list-item's content area, so you get effects like those illustrated in Figure 8-25.

Figure 8-25

Figure 8-25. The content of list items

In CSS1, very little is said about the placement and effects of this marker with regard to the layout of a document. CSS2 introduces properties specificallyDIV, it doesn't immediately follow the H1. Therefore, we would need to add a child selector and a first-child pseudo-class:

H1 + DIV > P:first-child {text-indent: 0;}

This will match any paragraph that is the first child of a DIV that immediately follows an H1 element. See Chapter 10, "CSS2: A Look Ahead", CSS2: A Look Ahead, for more details.