Sunday 25th of January 2015 01:09:49 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
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:visited {color: #333333;} /* a very dark gray */
Figure 6-4

Figure 6-4. Changing colors of hyperlinks

This sets all anchors with the class external(<A CLASS="external"HREF="...">) to be silver, instead of mediumgray. They'll still be a dark gray once they've beenvisited, of course, unless you add a special rule for that as well:

BODY {color: black;}A:link {color: #808080;}      /* medium gray */

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
P {font-weight: normal;}
P EM {font-weight: bolder;}  /* results in 'bold' text, evaluates to '700' */
H1 {font-weight: bold;}
H1 B {font-weight: bolder;}  /* if no bolder face exists, evaluates to '800' */
P {font-weight: 100;} /* assume 'Light' face exists ; see explanation */
P STRONG {font-weight: bolder;} /* results in 'normal' text, weight '400' */
Figure 5-10

Figure 5-10. Text trying to be more bold

In the first example, the user agent moves up the weight ladder from normal to bold ; in numeric terms, this is a jump from 400 tomeans the shorthand hex values that are web-safe are0, 3, 6,9, C, and F;therefore, #693, #0C6, and#F0F are examples of web-safe colors.

Wow! Who knew there were so many ways to define a color? I'llbet you'll never look at a rainbow in quite the same way again.Now, let's move on to units that really measure up.

Borders are not necessarily applied in this fashion; they can also be applied to the right and left side of each line in the element, if the situation seems to demand it. For example, a grooved border might look better enclosed on each line end, as shown in Figure 7-55.

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" as shown in Figure 7-54.

Betweenthe borders and the content area, we find thepadding of the element box. It will come as nosurprise that the simplest property used to affect this area iscalled padding.

padding

Values
Figure 7-10

Figure 7-10. Parent widths and percentages

While this is interesting enough, consider the case of elements without a declared width, whose overall width (including margins) is therefore dependent on the width of the parent element.

Figure 7-11

Figure 7-11. Percentage margins and changing environments

As you can imagine, this leads to the possibility of "fluid" pages, where the margins and padding of elements enlarge or reduce to match the actual size of the display canvas. In