Monday 30th of November 2015 08:54:09 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
as a pixel value, so you get something like what's shown inFigure 4-29.

Figure 4-29

Figure 4-29. Internet Explorer 3 and line-height factors mean big trouble

According to the CSS specification, user agents are free to setwhatever value they think best for the default keywordnormal, but the suggested range is 1.0 to 1.2,depending on what works best for the display medium and the font inuse. Most browsers seem to use something in the vicinity of 1.2, butof course that could change with a new browser, or even a new version

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
background color of your document:

BODY {background: silver;}P {background-color: gray; padding: 1px; border: 0.1px solid gray;}

It is necessary to set a border-style for thistechnique to work. Whether you use that specific property, or simplya value of the border property, doesn'treally matter.

Of course, by doing this, you're setting a border on the do not collapse. If you float an image with 20-pixel margins, therewill be at least 20 pixels of space around that image. If otherelements adjacent to the image -- and that means adjacenthorizontally and vertically -- also havemargins, those margins will not collapse with the margins on thefloated image, as we can see in Figure 7-65:

P IMG {float: right; margin: 20px;}
Figure 7-65

Figure 7-65. Floating images with margins

(To resurrect the old paper-and-plastic analogy, the plastic margins

11.2.6. The Incredible Shrinking Text!

Here'sa fun thing to do: make your document text so small that itcan't be read by the human eye. You can do this usingcompletely correct CSS and a bug-free browser. Here's the

The easiest way to set the foreground color of an element is with the property color.


This property accepts as a value any valid color, as discussed in Chapter 3, "Units and Values", such as #FFCC00 or rgb(100%,80%,0%). It has the effect of setting the color of the text in the element, as shown in Figure 6-1:need to be yellow, so we declare:

.sidebar A:link {color: yellow;}.sidebar A:visited {color: yellow;}.sidebar A:active {color: yellow;}

This will keep the links yellow no matter what, just as they are now.Figure 11-3 shows us the new, improved,FONT-tag-free sidebar which results from thepreceding styles, and this markup: