STYLE SHEETS

Learn CSS, part 1

While HTML lets you do many things, Cascading Style Sheets (CSS) let you do even more. In particular, they can save you a great deal of work when you want to make changes to the appearance of a Web page or even an entire website. This first article in a series covering CSS will explain where the CSS specification comes from and show you just a few of the ways you can use CSS.

Author Info:

By: Michael Youssef

Poor Best

Rating:

/ 31

May 16, 2005

TABLE OF CONTENTS:

· Learn CSS, part 1
· CSS Specifications and Implementations
· Browsers we are going to use
· The HTML vs. CSS example
· CSS rules and selectors
· Groups of Selectors
· Validating your CSS Documents

As we said, CSS is a powerful but simple language, and you will be amazed with what you can do with it. Let's extend our paragraph example a little more. Suppose that we also need to apply an Arial font with a red color to hyperlink references in our website. We may write another CSS rule like this:

a
{
font-family: Arial, sans-serif;
color: red;
}

so the Paragraph.css file has two CSS rules:

p
{
font-family: Arial, sans-serif;
color: red;
}

a
{
font-family: Arial, sans-serif;
color: red;
}

Now you can add a hyperlink reference to your HTML page:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="paragraph.css" type="text/css">
<title>The IT Field</title>
</head>
<body>
<p>
Information Technology (IT) has been the most famous and attractive field in the last
20 years and many students choose to study Computer Science and Information System which qualify
them to work as Programmers, Developers, Database Administrators and Network Engineers.
</p>
To read more about IT please<a href="http://www.it.com">Click Here</a>
</body>
</html>

There's a better way to achieve the same effect: group the selectors. Modify the CSS file to be as follows:

p, a
{
font-family: Arial, sans-serif;
color: red;
}

Reopen the web page and you will have the same effect. But this grouping technique is better because you don't write a separate rule and declarations for a selector. You just put in as many selectors as you want and separate each of them using a comma.

Next: Validating your CSS Documents >>