Thursday 28th of May 2015 11:49:47 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?

XML documents are easily committed to a persistence layer

XML documents may be stored in files or databases. When stored in files, XML documents are simply plain text files with tags (and possibly DTDs). It is very easy to save your XML documents to a text file and pass the text file around to other machines, platforms and programs (as long as they can understand the data). In the worst case scenario, XML documents (files) can be viewed in a text editor on just about any platform.

XML documents are also naturally committed to a database (relational or object) or any other kind of XML document store. There are commercial products available which allow you to save XML documents to an XML storage layer (which is not a database per se), like Datachannel's XStore and ODI's eXcelon. These XML store solutions are quite expensive ($10,000 to $20,000 range).

XML documents are also quite naturally retrieved from a persistence layer (databases, file systems, XML stores). This lends XML to be used in real world applications where the information being used by different parts of a system is the most important thing.

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
difference is in the actual syntax of the command and its placement. As you can see, @import is found inside the STYLE container. It must be placed there, before the other CSS rules, or else it won't work at all.

<STYLE TYPE="text/css">
@import url(styles.css); /* @import comes first */
H1 {color: gray;}
</STYLE>

Like LINK, there can be more than one sides, it's this easy, as the result shown in Figure 7-56 makes clear:

H1 {padding: 10px; background-color: silver;}
Figure 7-56

Figure 7-56. Padding applied to an H1 element

On the other hand, we might want H1 elements tohave uneven padding and H2 elements to have regular padding, as shownin Figure 7-57:

H1 {padding: 10px 0.25em 3ex 3cm;} /* uneven padding */H2 {padding: 0.5em 2em;} /* values replicate to the bottom and left sides */
invent new names for letters.

How this corresponds to our regular decimal (base 10) numbering is fairly straightforward. 05 is equal to 5, 0C is equal to 12, 0F is the same as 15, and 10 is equal to 16. No, really. 1F is equal to 31, 20 to 32, and so on. It goes like this:

Computers have been using hex notation for quite some time now, and

Figure 7-82

Figure 7-82. Using really big images as bullets

You should usually provide afallback for the bullet type. Do this justin case your image doesn't load, or gets corrupted, or is in aformat that some user agents might not be able to display (as is thecase in Figure 7-83). Therefore, you should alwaysdefine a backup list-style-type for the list:

UL LI {list-style-image: url(ohio.bmp); list-style-type: square;}
Figure 7-83

Figure 7-83. Providing fallbacks for unusable images