Monday 05th of December 2016 05:22:25 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
a certain value. Figure 8-27 shows a fewpossibilities.

Figure 8-27

Figure 8-27. Scaling images with the width property

It's also possible to scale an image (or other replacedelement) using height:

<IMG SRC="test.gif" STYLE="display: block;" ALT="test image"><IMG SRC="test.gif" STYLE="display: block; height: 50px;" ALT="test image"><IMG SRC="test.gif" STYLE="display: block; height: 200px;" ALT="test image">
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
border-right-widthIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

Sets thewidth of the right border of an element, which will inherit theelement's background, and may have a foreground of its own (seeborder-style). Negative length values are notpermitted.

border-styleIE4 P/Y IE5 P/Y NN4 P/P Op3 Y/-

Sets the style of the overall border ofan element, using the color set by border-color or the foreground ofthe element itself if no border-color has been defined. CSS1 does notrequire recognition of any values besides none and

Of course, it's still possible to use these properties to keep an element from exceeding a certain size, as in this:

max-height: 30em; max-width: 20em;

The question here, though, is what happens if the content of the element doesn't all fit into the specified element size. Does it get cut off at the boundaries, or does it spill outside the positioned element? That's what the next section will attribute options wrap the text around the image.  The other ALIGN options position the image relative to the current line only, and do not wrap other lines: 
TOP aligns top of image to highest element in the line. 
TEXTTOP aligns top of image with highest text in the line. 
MIDDLE aligns middle of image to baseline. 
ABSMIDDLE aligns middle of image with middle of largest element in the line. (800). Furthermore, if we were to insert a STRONG element into the B element, it would come out like
Figure 5-14:

<P>
100 <SPAN> 400 <STRONG> 700 <B> 800 <STRONG> 900
</STRONG></B></STRONG></SPAN>.
</P>
Figure 5-14

Figure 5-14. Weight numbers, again

If there were yet another B element inserted into Macintosh and Opera 3.6 will center elements using auto margins.

The other possibility is when one of the margins and the width are set to be auto. In this case, then the margin set to be auto is reduced to zero:

P {width: auto; margin-left: auto; margin-right: 100px;}

The width is then set to the value necessary to