Have you found this site helpful?
Donations are graciously accepted and help keep this site running.
HTML Tutorial
Chapter 5: CSS - Cascading Style Sheets
Introduction
CSS, or Cascading Style Sheets, is a way of specifying styles throughout a page or even multiple pages. It can be used to specify default styles of a web page and go on to specify special classes that only apply to certain tags. For example, a style sheet could specify text size, the background color of a table, the border of an image, or even the width of a division of a page. Essentially, style sheets can and should be used to control the properties of a web page.
In fact, CSS is vitally important to the XHTML 1.0 standard. This is because many of attributes of elements are deprecated in favor of using style sheets. This however is a good thing, and I will explain why. CSS is a much more efficient way of defining styles because you can change the style of multiple web pages by editing a single style sheet.
How CSS is Used
There are three different ways that style sheets can be used. The best way is often to use an external style sheet, but you can also embed the style sheet in an HTML page, or you can specify the style of individual elements using a style attribute.
External Style Sheets
An external style sheet uses a file seperate from the HTML document to define the styles. It should be named with a .css file extention. This web site uses external style sheets. Go ahead and take a look the style sheet we use.
Here is an example of the implementation of a sample style sheet. Keep in mind that the <div> tag is used to create a division in the page. It will be discussed in the next chapter.
mystyle.css:.redtext {color: #ff0000;}
.division {border: 1px dashed #666666; width:60%; float:left;}
The first line specifies the default style for a <p> element. In this case, it will use Arial font (or use Verdana as a second choice) and have black text. The second line has a period in front of the selector. This defines a class called redtext which will make red any text to which the style is applied. The third line creates a class called division which will apply a gray, dashed, 1 pixel border and a width of 60% of the available space. This file is saved as a plain text document with a .css file extension. The HTML file below shows how the styles are applied.
index.htm:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title Here</title>
<link href="mystyle.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="division">
<p>This is a default paragraph</p>
<p class="redtext">This is a red paragraph</p>
</div>
</body>
</html>
Notice the <link /> element inside the <head> tags. This tells the browser to look for the external style sheet. The href attribute points to the style sheet while the type and rel attributes tell the browser what to expect.
Inside the body of the document, the styles are applied. Everything inside the <p> tags will automatically attain the style specified using the p selector, but the two classes we created need to be assigned to an element using the class attribute. Below is the output of what the page would look like.
This is a default paragraph
This is a red paragraph
Embedded Style Sheets
This type of style sheet is similar to external style sheets, except that the style sheet is embedded in the HTML document using the <style> element. This would be useful if you only have one page using the styles, but need to use some of the styles multiple times throughout the document. Here is an example of an embedded style sheet.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title Here</title>
<style type="text/css">
body {background-color:#cccccc;}
a {text-decoration:none;}
a:hover {text-decoration:underline; color:#00ff00;}
a:visited {text-decoration:none;}
a:active {color:#ff0000;}
</style>
</head>
<body>
<a href="css.php">Click Here</a>
</body>
</html>
This example shows the selectors you can use for links. A sets the default style for links, a:visited sets the style after the link has been visited, a:hover sets the style for when the cursor is hovering over the link, and a:active sets the style for the link when it is being clicked.
Single Element Styles
This last way of using style sheets works best if you only have to use a certain style for a single element. This is done by using the style attribute. The <span> element is used to create divisions in a page and will be discussed in the next chapter.
Oranges are orange!
Now you know how to use style sheets! Check out our list of CSS properties for reference.
