Grouped Selectors
By Stephen Bucaro
A CSS style sheet consists of rules that define how html elements should be
displayed on a webpage. Each rule consists of one or more selectors, one
or more properties, and one or more values that each property
should be set to.
With a grouped selector You can associate multiple selectors with a single set of rules. The
grouped selector shown below sets style rules for multiple headline elements.
h1, h2, h3, h4
{
font-family: verdana;
font-weight: bold;
color:blue;
}
h1
{
font-size: 20px;
}
h2
{
font-size: 18px;
}
h3
{
font-size: 16px;
}
<h1>H1 Text</h1>
<h2>H2 Text</h2>
<h3>H3 Text</h3>
Note that even though the upper grouped selector sets style rules for multiple
headline elements, below that, single element selectors set different style rules
for each headline element. When a style rule is set several times for a single
element, a rule for a property set lower in the code overrides a rule for the
same property higher in the code. Also rules set lower in the cascade override
rules set higher in the cascade. That's why an inline rule overrides all previously
set rules for the same property.
More CSS Quick Reference: • How to Define and Apply a Style Class • Use Image for List Item Bullets • Context selectors • Set the Text Decoration • Set the Font Slant • Set the Background Color • Set the Letter Spacing • Set List Bullets Position • Set the Border Width • Set the box-sizing Property
|