Contents

Know more about this
(or any other) subject?

Show off your know-how at Quamut Wiki.

Learn more with these titles from Barnes & Noble

Build Your Own Website the Right Way Using HTML & CSS

Building a Website for Seniors in Easy Steps

CSS Web Site Design: Includes Exercise Files and Training Videos (Hands-On Training Series)

The Principles of Beautiful Web Design

Previous:
How to Build Web Pages with HTML

Next:
How to Add Images to Your Web Pages

Cascading Style Sheets (CSS)

Cascading style sheets (CSS) work with HTML to streamline and enhance the process of creating web pages. Rather than styling and organizing your content with many small bits of HTML code, CSS allows you to centralize into one document—called a style sheet—the instructions for where to place your content and how to present it.

Why Use CSS?

The many reasons to learn and use CSS include:

Flexibility and richness: CSS gives you more control over the structure and appearance of your documents than HTML alone.
Efficiency: CSS lets you control the appearance of text throughout your website when you make changes to one central style sheet document.
File size: CSS documents are small. Using CSS strips your HTML of dozens of tags, making your HTML documents smaller as well.
Page loading speed: Since CSS makes HTML files smaller, web pages load faster.
No more tables: CSS allows you to place page elements with much more precision and fewer constraints than you can by using HTML tables.
Compatibility: CSS ensures that your pages appear the same on all platforms and in all browsers.

How CSS Works

CSS does not replace HTML. Rather, it works with HTML by letting you customize existing HTML tags according to the specifications you prefer. Here’s how the process works:

You create a style sheet document in which you specify your preferences for how to position and display each element included on your web page(s). Each entry in your style sheet is called a rule.
You reference the rule each time the elements to which you’d like to apply the rule appear in your HTML code. The browser then knows to apply the specs in your rule to the element in your web page.

Think of CSS as a means of customizing HTML default settings to the settings of your choice.

An Example of a Real-World Application of CSS

Let’s say you’re publishing a long article on your website that contains dozens of pages.

With HTML: Each time you start a new page, you would have to define how to display every element on the page. For instance, you would have to specify the size, color, and typeface of the article’s main font.
With CSS: You can instead create a custom rule that specifies the main font’s traits and then reference that rule when you use the main font on each page.

The crucial difference between these approaches is that with CSS, if you decide to change the main font’s appearance, you need only change the rule in your style sheet. The change would then take effect on all of the article’s pages. If you use just HTML, you have to change the HTML on each individual web page.

The Contents of a Typical Style Sheet

A style sheet is a list of rules saved as plain text in a file with the extension .css (for instance, sample.css). Here are three examples of different types of style sheet rules:

#titlefont {font-size: 10px; color: #BEBEBE;}
.mainfont {font-size: 7px; color: #FF0000;}
p {font-size: 5px; color: #000000;}

Note that the most important difference among these three rules is the symbol that begins each rule.

Rules that you intend to use just once in your document: These are preceded by a pound sign (#). The rule that you would apply to the title font of your article is an example of a rule that you would use just once per page.
Rules that you intend to use more than once in your document: These are preceded by a period. The rule you apply to the main font of your article is an example of a rule that you might use more than once per page. For instance, when an image breaks up the main text of the article in your HTML code, you’ll need to use your rule to specify the font at the beginning of the paragraph that immediately follows the image.
Rules that apply to standard HTML tags: These are preceded by neither a period nor a pound sign. The rule’s name matches the name of the HTML tag you wish to style. For instance, a rule named “p” would style the contents of all paragraphs (<p> tags) throughout your document.

Note that you can choose any name you’d like when making your own CSS rules, but it’s always a good idea to choose relevant names. If you’re styling all instances of an existing HTML tag, such as <p>, don’t give your rule a new name.

What the Rules Above Mean and Do

The first two CSS rules above control the appearance of the main font and title font used in an HTML document, hence the selectors (names) “mainfont” and “titlefont.” Each rule’s declaration, the text contained in braces ( { } ), contains properties, such as font size, that specify how to display the page elements associated with the selector.

For mainfont: The rule is to make the font seven pixels high and color it #FF0000 (the hex code for red).
For titlefont: The rule is to make the font 10 pixels high and color it #BEBEBE (the hex code for gray).

The values of properties within a declaration are preceded by colons. Each property is followed by a semicolon.

Where to Find All the Available CSS Properties

There are dozens of CSS properties that allow you to control everything from fonts to border styles to the precise placement of onscreen page elements. You can research all the CSS properties online at www.w3.org.

How to Use CSS Rules in Your HTML Files

To use CSS rules in HTML files, you must include a link tag.The link tag associates your HTML file with your style sheet. Below is the first portion of sample.html, the example HTML document you created earlier in this guide, with a link tag added in the proper location within the <head> of the file.

<html>

<head>

</head>...

The link tag tells your browser to look in sample.css to find the rules it should use to display your content.

How to Apply CSS Rules to Page Elements in HTML

You can call, or apply, CSS rules to page elements in your HTML documents in two ways:

For rules preceded by a period: Use the word class as an attribute in your HTML tags, followed by a value equal to the name of the selector. For example, to apply the mainfont rule to the font of the main text in an article, you would include the following code in your HTML document: <font class="mainfont">This text will now be seven pixels high and red.</font>
For rules preceded by a pound sign: Use the word id as an attribute in your HTML tags, followed by a value equal to the name of the selector. For example, to apply the titlefont rule to the font of the title text in an article, you would include the following code in your HTML document: <font id="titlefont">This text will now be ten pixels high and gray.</font>
For rules not preceded by a period or pound sign: Use the HTML tags as you normally would, without any further modification. For example, all paragraphs surrounded by <p> and </p> tags would be styled according to the specs for “p” in your style sheet.

Positioning Page Elements with CSS

Positioning page elements with HTML tables is difficult and imprecise since you can’t specify exactly where on the screen you’d like each element to appear. CSS solves this problem by allowing you to specify precisely where to position elements down to the actual pixels, or dots, that make up computer screens.

For instance, if you wanted a light gray box behind all the content in sample.html, you would add a rule to your css file called “textbox” (or whatever you wish to call it), as in the following example:

#textbox {position: absolute; left: 0px; top: 0px; height: 200px; width: 300px; background-color: #BEBEBE;}

The properties and values in this rule’s declaration, explained in the following table, specify exactly where to place the gray box:

Property	Value	Function
position	absolute	This indicates that the box should be placed exactly where specified.
left	0px	This represents the pixel along the horizontal plane at which the text box should start. 0px means the leftmost pixel on the screen.
top	0px	This represents the pixel along the vertical plane at which the text box should begin. 0px means the topmost pixel on the screen.
height	200px	This represents the height of the text box.
width	300px	This represents the width of the text box.
background color	#BEBEBE	This represents the background color of the text box (in this case, gray).

Using <div> to Implement CSS Positioning Rules

The <div> tag (short for “division”) is an HTML tag used most often to position screen elements according to the instructions in CSS rules. For instance, if you wanted to place the gray text box used in the example above around all the content in sample.html, you would place <div> tags that call a CSS rule with positioning instructions for the text box just inside your existing open and close <body> tags:

<body>

...[leave the intervening content here as is]...

</div>

</body>

</html>

Your open <div> tag calls the “textbox” rule, which you would have had to add to your style sheet. Since you intend to use textbox just once, the open <div> tag contains the “id” property rather than the “class” property.

You can now use this method to position all of the elements in your web pages, such as images, paragraphs, titles, and so on. Here’s a quick recap of the approach:

Surround elements you’d like to control with open and close <div> tags.
Be sure your open <div> tag references the name of a CSS rule in your style sheet that specifies where to place your elements. These rules can also specify how to style the elements that you intend to place.

Acknowledgments & Disclaimer