Cascading Style Sheets
Full Name
Cascading Style Sheets - Otherwise known as CSS
Information
A scripting language used to describe the presentation of structured documents. A structured document is a document whose sections are clearly defined and categorized. A program presenting the document can present it in different styles because the content has been categorized. One common style sheet language with widespread use is CSS (Cascading Style Sheets), which is used to style documents written in HTML, XHTML, SVG, XUL, and other markup languages. One of the most attractive features of structured documents is that the content can be reused in many contexts and presented in various ways. Different style sheets can be attached to the logical structure to produce different presentations.
When used in conjunction with HTML 4.0 (or later) and Javascript embodies what is known as Dynamic HTML or DHTML
Related Links
Also referred to by the abbreviation, CSS
Wikipedia Articles
Other References
- W3.org article on tableless layout
- W3.org CSS home page
- W3.org CSS tutorials
- XHTML.com CSS Reference
- Cascading Style Sheets PhD thesis, by Håkon Wium Lie
- CSS ZenGarden
- Camera on the Road Site
Example Sites
Incorporation into HTML
Incorporate stle sheets by inclusion of a file as follows:
<link href="/css/common.css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css" />
Note the different media types...
The successful load of CSS files can be verified with Javascript as follows:
<script type="text/javascript">
try {
DynamicCss.addCssUrl('/css/print.css', 'print');
} catch(e) {}
</script>
CSS Syntax
Define attributes to be associated with an HTML tag as follows:
<HTML tag> { <CSS Property> : <Value> ; }
eg.
body {
background-color: blue;
background: url(/img/rock.gif);
}
p {
color: white;
}
Using CSS Classes
Using classes is simple. Add an extension to the typical CSS definition and make sure you specify this extension as the class in your HTML. For example.
CSS Code:
p.first{ color: blue; }
p.second{ color: red; }
HTML Code:
<html> <body> <p>This is a normal paragraph.</p> <p class="first">This is a paragraph that uses the p.first CSS code!</p> <p class="second">This is a paragraph that uses the p.second CSS code!</p> ...
Here is a more complex example where overloading is used:
CSS Code:
p{ color: red; font-size: 20px; }
p.first{ color: blue; }
p.second{ font-size: 12px; }
HTML Code:
<html> <body> <p>This is a normal paragraph.</p> <p class="test1">This is a paragraph that uses the p.test1 CSS code!</p> <p class="test2">This is a paragraph that uses the p.test2 CSS code!</p> ...
More Examples
background-color
h4 { background-color: white; }
p { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }
<pre>
===background-image===
<pre>
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg); }
p {
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h4 {
background-image: url(smallPic.jpg);
background-repeat: repeat-y;}
ol {
background-image: url(smallPic.jpg);
background-repeat: repeat-x;}
ul {
background-image: url(smallPic.jpg);
background-repeat: no-repeat;}