Cascading style sheets (CSS) enable you to develop web sites that share a common look-and-feel (fonts, headings, colors, backgrounds, etc.). CSS essentially allows you to define how an HTML tag works--in other words, how it will format content.
CSS...
 | Is a declarative language that is used to enhance the HTML language. |
| Is intended to be user friendly; it was purposely designed to be very readable and writable. |
| Is lifted from the desktop publishing terminology. |
| Requires a minimal coding to create sophisticated web pages that have a common theme in appearance. |
History of CSS
| The World Wide Web Consortium (W3C) published a set of standards in December 1996 referred to as the "Cascading Style Sheets, Level 1" standards. |
| Followed in December 1998 by the "Cascading Style Sheets, Level 2" standards. |
| Level 2 was a major revision that almost doubled the size of the CSS language by adding 42 new properties commonly referred to as CSS2. |
Using CSS...
| There are three basic types of style sheets:
| ||||||||
| Style syntax:
| ||||||||
| Style classes -
|
Example of styles - note the tag name, curly brackets, property, and value:
H1 {
margin-left: 15;
font-family: Arial, Helvetica;
font-size: 24pt;
color: "red";
}
p {
font-family: Arial, Helvetica;
font-weight: normal;
font-size: 12pt;
color: "black";
}(NOTE: the following must be applied with a DIV tag)
.demo1 {
COLOR: blue;
font-weight: bold;
}
|
| Style properties - properties that can be used control how the browser presents content. Uses property values (5 types): keywords, length values, percentage values, URLs, and colors. |
| Span tags are useful for changing styles within a particular part of a document. |
End-User issues:
| Great for creating consistent, great looking multi-page documents. |
| Special needs and layouts can be defined and enforced. |
Developer issues:
| It is difficult to keep track of all the possible combinations. Keep a good reference handy. |
| WYSIWYG editors are getting better at doing style sheets. |
| Be aware of differences in how IE and Netscape handle styles. |
| Test across browsers. |
CSS Style Attributes
The following is a sampling of attributes (not all of them - for more see the summary)...
Fonts
| family (e.g., font-family:Arial) |
| size, font-size: 24 |
| style, font-style: italic |
| weight, font-weight: bold |
| text decoration, text-decoration: underline |
| color, color: red ... color:#040588 ... color:rgb(255,255,255) |
Backgrounds
| color, backgroud-color:white |
| image, background-image:url(file) |
Text
| word spacing, word-spacing: 10pt |
| letter spacing, letter-spacing: 3pt |
| alignment, text-align: justify |
Technical Resources on StyleSheets
| DevGuru CSS2 Reference -- an excellent resource! |
| W3C Resource: http://www.w3.org/Style/CSS/ |
| Microsoft CSS Reference |
| http://internetbrothers.com/css_basics.htm |
Examples
The following examples illustrate a variety of techniques. Use the view source function of your browser to see the HTML and how they work.