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:
• Set List Bullets Position
• Set the Word Spacing
• Use Image for List Item Bullets
• Set an Element's Margin
• position:absolute
• Set the Background Color
• Set a Background Image's Position
• Set an Element's Overflow
• Set the Border Width
• Class Selector
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
