Learn CSS, part 1 - Groups of Selectors
(Page 6 of 7 )
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 >>
More Style Sheets Articles
More By Michael Youssef
