CSS (Cascading Style Sheets) provides a method for specifying formatting information for your web pages. Style sheets are a way for web page designers to separate the formatting of a document from the HTML markup. The original purpose for HTML was to specify the structure of a document rather than the details for formatting a document. CSS provides greater control and flexibility over formatting the look of your document, and is easier to use.
The word cascading refers to what happens when several sources of style information vie for control of the elements on a page-style information is passed down from higher-level style sheets (and from a parent to child element within a document) until it is overridden by a style command with more weight.
Quick History
CSS1 (released in December 1996) consisted of approximately 50 properties for simple formatting, fonts and colors. CSS2 (released in May 1998) included an additional 70 properties for more advanced features like numbering, cursors, and page breaks. By the way, work is currently under way for the development of a new CSS3 version.
Why use CSS?
The primary advantage to using style sheets is that they offer more control over layout (i.e., font size, line spacing, etc.). Other advantages CSS offers include easier site maintenance, potentially smaller documents, and the separation of style from structure.
The drawback to CSS is that it is relatively new, and many of the browsers that are currently in use do not support CSS very well. MSIE 3 and Netscape 4 were the first browsers to include CSS support, but their support falls far short of even the first CSS standard, CSS1. MSIE 4 and newer have fairly good CSS support, but Microsoft browsers do not support all of the features of CSS and they support some of the features in a non-standard way. Newer versions of browsers are much better in their support of CSS. Netscape 6 and the Mac version of MSIE 5 are the first browsers that attempt to implement full and standard support for CSS.
Back to top
Style sheet information can be included in an HTML document in any one of three basic ways:
- Use an external style sheet, either by importing it or by linking to it.
- Embed a document-wide style in the <head> element of the document.
- Provide an inline style exactly where the style needs to be applied.
Adding Styles to your HTML Document:
- External Style Sheet - Linked (in the Head)
- <link rel="stylesheet" href="style.css" type="text/css">
- Document-wide - Embedded (in the Head)
- <style>
h1 { color: #FFFFFF; }
</style>
- Inline (in the specific tag)
- <p style="color: #FFFFFF">...text here...</p>
Each of these style sheet approaches has its own pros and cons listed in the following table.
| |
External |
Document-wide (embedded) |
Inline |
| Pro |
Can set style for many documents with one style sheet |
Can control style easily document by document
No additional download time for style info |
Can control style to a single character instance
Overrides any external or document styles |
| Cons |
Requires extra download time which may delay page rendering |
Need to reapply style information for other documents |
Need to reapply style info throughout the document and outside documents
Very closely connected to HTML which makes updating more difficult |
Back to top
CSS is a language separate from HTML. When you use CSS, you embed the CSS code within the HTML page by using a <style>...</style> tag. The <style> tag must be placed in the head section of the document. Older browsers that do not support CSS will not understand what a <style> tag is and will ignore it. These browsers will display the CSS code as part of your web page. To prevent this, put the CSS code inside an HTML comment. CSS enabled browsers understand that the CSS code is to be processed even though they are enclosed in HTML comments.
Here is an example of a head section of a document that uses CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of Document</title>
<style type="text/css>
< !--
...your CSS code goes here...
-->
</style>
</head>
<body>
<h1>Using CSS in HTML Documents</h1>
</body>
</html>
The CSS code that you put in the <style> consists of one or more rules. Each rule consists of two parts: a selector that identifies what elements on the page are affected by the rules, and style information. The style information is enclosed inside curly brackets { }.
Here is an example of the code:
<style type="text/css">
<!--
selector { style information here }
selector { more style information here }
-->
</style>
The selector can be the name of an HTML tag, such as a p (paragraph tag) to apply style information to all <p> tags in the document. It can also be a list of tags separated by commas: i, b applies the style information to all <i> tags AND to all <b> tags in the document. It can also be a list of tags separated by spaces: i b applies the style information to only those <b> tags that are nested inside <i> tags.
The style information consists of a list of properties and values. Specify the property name followed by a colon (:), your values, and a semicolon (;). Unlike HTML, values are not usually enclosed in quotes, and they may not work if you code quotes where they are not expected. Netscape is particularly picky about requiring you to code the style information exactly right.
<style type="text/css">
<--
selector { property: value; property: value;... }
selector { property: value; property: value;... }
-->
</style>
Back to top
CSS Units
- Used for specific heights and lengths
- CSS supports several height/length units including:
Pixels (px), points (pt), in/cm (inches/centimeters), or % (percent)
- Pixels - offers easiest design control
- Percentage - most flexible and best in terms of meeting web accessibility issues
Fonts
- Font-family: list font names in order of preference
{ font-family: Arial, Helvetica, Verdana, san-serif; }
- Font-size: larger, smaller, or specific height
p.big { font-size: 50px; }
- Font-style: normal or italic
p.italic { font-style: italic; }
- Font-weight: normal, lighter, bold or bolder
p.bolder { font-weight: bolder; }
Colors
- Named colors: red, green, blue, etc.
- Hexadecimal: #FFFFFF, #FFF (abbreviated version only for web safe colors)
p.green { color: #00FF00; }
Backgrounds
- Background-color: color or transparent
p.background { background-color: #FFFFCC; }
- Background-image: none or file name
{ background-image: "name.gif"; }
Text & Alignment
- Line-height:
Normal, number, length, or percentage
p.spaced { line-height: 150%; }
- Text-decoration:
none or underline
{ text-decoration: none; }
- Text-align:
Left, right, center or justify
p { text-align: right; }
- Vertical-align:
Top, middle or bottom
td.heading { vertical-align: top; }
Margins:
- Margin-top, margin-right, margin-bottom, margin-left
{ margin: 5px 10px 5px 10px; } *NOTE: Values are in clockwise order.
Padding:
- Space between margin and the element (similar to cell-padding in a table)
- Padding-top, padding-right, padding-bottom, padding-left
Back to top
Suppose you want to apply a style rule to a heading <h1> in your document so that it appears as a 24-point text. The following rule would result in the desired display:
h1 { font-size: 24pt; }
You can also group selectors. Instead of applying the same style to different headings like this:
h1 { color: #FFFFCC; }
h2 { color: #FFFFCC; }
Try combining rules instead like this: h1, h2 { color: #FFFFCC; }
To set the text color of your heading to blue and your font face to Arial, simply add more rules by separating each style property with a semi-colon:
h1 {font-size: 24pt;
color: blue;
font-family: Arial, Helvetica, san-serif; }
*NOTE: Semicolons should always be used between every style property. The final rule in a list of style properties does not require a semicolon. However, it is a good habit to get into including this for easy insertion of future style rules.
For comparison, lets take out the CSS and view this web page using HTML markup only. Here is the code using HTML only:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of Document</title>
</head>
<body>
<h1>Using CSS in HTML Documents</h1>
</body>
</html>
<pre>
</td>
As you can see even in this simple example, CSS provides a powerful set of properties for manipulating the look of HTML elements.
The text-align property specifies alignment, just like the align attribute of the <p> tag. Its values are the same: left, right, center and justify. You would normally only want to specify text-align for block tags such as <p>, not for inline tags such as <i> or <b>.
Example code (see bold text):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Examples</title>
<style type="text/css">
< !-
h1 { font-size: 24pt;
color: blue;
background-color: #FFFFCC;
font-family: arial; }
p { color: blue;
text-align: right; }
i,b { color: purple; }
i b { color: #9999CC; }
-->
</style>
</head>
<body>
<h1>Using CSS in HTML Documents</h1>
Here is an example of some of the basic
CSS properties.
<p>This is a paragraph. It contains
some text in <i>italics</i> and some
text in <b> bold</b>.</p>
<p>This is another paragraph which
contains some text <i><b> with
bold inside italics</i>
</b> and some text <i><b>with italics
inside bold</i></b>.</p>
</body>
</html>
Back to top
<div> and <span>
Two HTML elements, div and span, were especially created for use with style sheets. The <div> tag is used to apply styles to sections of your document. Here is an example that will change selected sections of a document to blue font color:
<div style="color: blue">
<h1>Using CSS in HTML Documents</h1>
<p>This is a whole paragraph of text.</p>
</div>
The <span> tag is used inline to change the style of a set of characters:
<p>This is a paragraph and <span style="color: blue">
this area will be treated differently</span> from the
rest of the paragraph.</p>
Back to top
You can also apply specific style attributes for HTML elements based on the context in which they appear. As we have seen already in a previous example, a simple selector can specify that all italic or bold text within a document should be purple.
i,b { color: purple; }
Using a contextual selector (written as a list of selectors separated by white space) you can specify that only the italicized text that appears within a list will be green like this:
li i { color: green }
This affects italicized text when it appears in the context of a list item element. *NOTE: If both of these rules for italicized text were to appear in the same document, the contextual selector (because it is more specific) would take precedence over the simple selector.
Several contextual selectors can be grouped together in a comma-separated list. For example, the following code makes bold text red when it appears in the context of a heading:
h1 b, h2 b, h3 b { color: red }
Back to top
Attribute selectors allow web page authors to apply style rules based on special identifying attributes placed within HTML element tags. There are currently two available attribute selectors: CLASS and ID.
CLASS Selector
You can classify elements by adding a CLASS attribute to the HTML element tag. Elements in a class can then be modified with a single style sheet rule. For example, you can identify all the items in the HTML document that you classify as important and want to display in bold text:
<h1 class="bold">Important Information</h1>
<p class="bold">All text in this paragraph
will appear in bold.</p>
To specify the styles for elements of a particular class, add the class name to the HTML selector, separated by a period (.).
h1.bold { font-weight: bold }
p.bold { font-weight: bold }
NOTE: Class names cannot contain spaces; use hyphens or underscores instead if necessary.
To apply a property to all the elements of the same class, omit the tag name in the selector (be sure to leave the period because it indicates a generic class):
.bold { font-weight: bold }
ID Selector
The ID attribute is used similarly to CLASS, however, it is used for targeting specific elements rather than classifying them. If you have several elements that need treatment, use CLASS. If you have a specific element that must be uniquely treated, you can give it an ID:
CSS: #copyright { color: blue }
<p id="copyright">© SUNY Fredonia 2001</p>
Back to top
An important feature of style sheets is the concept of inheritance, in which style properties are passed down from an element (the parent) to any element contained within it (the child). An element is said to inherit properties applied to elements higher in the HTML hierarchy. Styles applied to specific elements will override settings higher in the hierarchy. In general, the more specific rules override more general rules. Further, if two rules of equal weight are listed in a style sheet, whichever one is later in the style sheet will apply.
Back to top
Check your CSS code by using the W3C's CSS validator available at:
http://jigsaw.w3.org/css-validator
Remember to test your web pages using different browsers (i.e., Internet Explorer, Netscape, Opera) and browser versions (IE 4, 5; Netscape 4, 6). You should also check to make sure that if your style sheets are removed, your page is still readable and accessible.
If you would like to learn more about CSS, refer to the following online resources.
Back to top
W3Schools CSS Tutorial - http://www.w3schools.com/css/
CSS Level 1 Specifications - http://www.w3.org/TR/REC-CSS1
CSS Level 2 Specifications - http://www.w3.org/TR/REC-CSS2/
CSS Level 3 Development - http://www.w3.org/Style/CSS/current-work
CSS Bugs and Workarounds - http://css.nu/pointers/bugs.html
Back to top
|
