Cascading Style Sheets (often simply referred to as style sheets) is a language that gives web page designers more control over their pages. The most recent version is CSS 2 adopted by the W3C in May, 1998. CSS 1, the only other version, was established in 1996. The languages are identical except for a few modifications to CSS 1.
Cascading refers to how the language is interpreted. When style sheet properties affect an element within a page, the browser gathers all the style sheet information about the element and applies the properties. Since style sheet properties are inherited, properties that affect the body will also affect elements within the body. The browser then determines which style sheet properties have priority. More specific tags have higher priority. For example, body {font-size:12pt} and b {font-size:14pt} would display all text within the body at 12 point and all bold text at 14 point. Without the additional code, bold text would also be 12 point.
I hope this doesn't sound intimidating. Keep reading. Style sheets are really quite simple.
What browsers support CSS?Internet Explorer 3.0 and 4.0 and Netscape Communicator 4.0 support style sheets to varying degrees. Explorer supports some style sheets properties that Communicator does not and visa versa. Additionally, some properties supported by both browsers are implemented differently.
Not to worry...by learning style sheets, you will be ahead when the new browsers come out.
Why use CSS?Although some browsers do not support CSS, style sheets give designers much more control over their page. You can add images to specific elements within a page. You can use different fonts, different background colors, overlap images, hide elements, scroll text over an image, and much more. Browsers that do not support CSS will simply ignore the code, and with a little bit of care will display a normal page. The result is attractive pages for browsers that support CSS and standard pages for the rest.
If that doesn't convince you, I'll show you some great examples that will.
What are properties and values?Style sheet properties describe what aspect of the layout to change. For example, background-color, font-size, text-indent, and word-spacing are style sheet properties. Values describe to what the amount or in what manner to change the property. Properties and values are separated by a colon ":". For example, color:red.
Fortunately, most of the properties are self-explanatory. Q. What do you think text-indent does? A. Indents the text.
What about the syntax?It's very simple. Style sheet properties are followed by style sheet values with a colon ":". Multiple property:value pairs are separated by a semicolon ";". CSS ignores spaces does not distinguish between uppercase and lowercase. To reference other files, use the url(‘file.extension') command. There are several units for style sheets. The units are px for pixels, pt for point, in for inches, cm for centimeters, em equals the relative font size, and ex equals the height of the font.
I use px to position objects. Px gives precise control of where objects appear. I use em for fonts. Em gives you new sizes relative to the present size (1em = the current font size.)
How do I add style sheets to my page?I am glad you asked ....
1. Within the head of the document:
<style type='text/css'>
<!--
selector {style sheet code }
//–>
</style>
This is the most common method. Simply use it within the <head></head> of a document. The selector is the tag you want the style sheet code to affect such as <body>, <h1>, or <p> but without the < >. Use any tag you want or create different instances of the same tag using the class attribute. Suppose you have this code: <h5>Welcome</h5> and elsewhere <h5 class=diffclass>Hello</h5>. Your style sheet code may be:
h5 {color:green; font-size:12px}
h5.diffclass {color:#009900; font-size:12px}
2. Linked to another file within the head of the document:
<link rel='stylesheet' href='url' type='text/css'>
The url file should contain only style sheet code and have a .css extension. If you link your style sheets, one file can change the layout of all your pages. This method provides an easy way to quickly edit your sites.
3. Importing a style sheet:
<style type='text/css'> <!-- @import:url(‘file.css') additional style sheet code //–> </style>
The @import:url('file.css') must be the first line of the code.
4. Within the document using the <span> tag:
<span style='style sheet code'> HTML code</span>
This method applies style to a specific area of a page.
5. Within a tag using the style attribute:
<somehtmltag style='style sheet code'>HTML code</span>
This method affects the content within a specific tag.
Where can I learn more about CSS?The official CSS 2 specifications from the W3C
A tutorial from Webmonkey
A tutorial from the Web Design Group
The following page allows you to practice CSS, but you must use a compatible browser such as Netscape 4.0 or Internet Explorer 3.0 or 4.0
