WAC Workshop: Cascading Style SheetsWednesday, May 26, 2004
WAC Workshop: Cascading Style SheetsThis outline adapted from the W3Schools online tutorial: Introduction to CSS. The WAC recommends this tutorial as an excellent introduction and reference for CSS authors. View the tutorial online at: http://www.w3schools.com/css/css_intro.asp.
CSS stands for Cascading Style Sheets. Styles define how to display HTML elements and are normally stored in a separate file (###.css) and linked to the HTML document that uses those styles. Multiple style definitions will cascade into one, allowing users to customize their experience with your web pages without interfering with the content.
HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
Cascading styles can be created in several different forms.
In-line styles: appears inside the HTML element. For example to center some text, you may choose to use the “align” formatting attribute inside the P element.
<p align=”center”>This text will appear centered.</p>
Internal styles: style definitions are stored in the HTML document, located between the HEAD element tags. For example, if you wanted the body of your page to have a blue background and your text to be yellow, you might have a style that looks like this:
<head>
<
title>Page with embedded styles</title>
<
style>
<
!--
body { color: #FFFF00; background-color: #000080 }
-->
<
/style>
<
/head>
External Style Sheet: style definitions are stored in a separate CSS file (name.css). In the HEAD element of the style sheet is linked to the document.
<head>
<
link rel="stylesheet" type="text/css" href="mystyles.css" />
<
/head>
Browser Default: no styles are defined. Pages will use the settings customized by the user or the default settings included with the browser software.
Cascading style sheets are designed to work together so that
styles layer on top of each other. Thus, it is important to understand which
style will write-over
which other style and which will simply add-to the existing styles.
Generally speaking we can say that all the styles will "cascade" into
a new "virtual" Style Sheet by the following rules, where number
one has the highest priority:
1. Inline Style (inside HTML element).
2. Internal Style Sheet (inside the <head> tag).
3. External Style Sheet.
4. Browser default.
So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
also valid: p {font-family: sans-serif}
Note: If you wish to specify more than one property, you should separate each property with a semi-colon. The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center; color:red}
You can combine style definitions for a particular HTML element in one style entry:
Option One (separate):
body {font-family: Verdana, Arial, Helvetica}
body {background-color: rgb(255,255,204)}
body {color: rgb(102,102,51)}
Option Two (combined):
body
{
font-family: Verdana, Arial, Helvetica;
background-color: rgb(255,255,204);
color: rgb(102,102,51);
}
The semi-colon separates each definition attribute, and the braces enclose all the definitions related to that element.
To insure your formatting transforms gracefully across screen resolutions and sizes, and to allow the greatest flexibility for users, you should use only relatively defined sizes and spacing in all your CSS definitions. There are many forms of relative sizing and it does not significantly effect the result if you choose one or the other (for instance using ems v percents). However, you should be consistent throughout your style sheet to insure the size relationships are equitable.
NOTE: If you use a relative size font, it is important to specify the primary or base font-family on which all of these sizes are based.