HTML and CSS Reference
In-Depth Information
Grouping is used to reduce the size of style sheets. For example, you can group selectors
in comma-separated lists, if you want the same rule to apply to all of the elements:
H1, H2, H3 { font-family: arial; color: blue }
Now all three heading levels will contain blue text in an Arial font.
You can also group a set of declarations to create the style for a selector(s). The fol-
lowing rule combines a number of declarations describing the font properties for an
H1
element:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: verdana;
}
And you can group the values for a particular property as follows:
h2 {font: bold 24pt arial}
EXAMPLE
14.2
<html>
<head><title>Grouping Properties</title>
<style type="text/css">
1
h1,h2,h3 { color: blue }
/*
grouping selectors
*/
2
h1 {
/*
grouping declarations
*/
font-weight: bold;
font-size: 30pt;
font-family: verdana;
}
3
h2 {
/*
grouping a property's values
*/
font: bold 24pt arial
}
</style>
</head>
<body bgcolor=silver>
4
<h1>
Welcome to my Stylin' Page</h1>
5
<h2>
What do you think?</h2>
6
<h3>
Groovy!</h3>
</body>
</html>
