Groups

Grouping Definitions

You can also group definitions if you'd like to use the same formatting for multiple Tags. There isn't much use for this although there may be a couple uses for it. For example, instead of using:

H1 {font-size: 15pt; font-weight: bold; color: navy}
H2 {font-size: 15pt; font-weight: bold; color: navy}
H3 {font-size: 15pt; font-weight: bold; color: navy}

You can group them separated by commas:

H1, H2, H3 {font-size: 15pt; font-weight: bold; color: navy}

Grouping Fonts

You can also group fonts, for example instead of using:

H1 {font-size: 15pt; line-height: 17pt; font-weight: bold; font-family: "Arial" font-style: normal}

You can group them like:

H1 {font: 15pt/17pt bold "Arial" normal}

Grouping Variations

If you'd like to use variations for the same HTML Tag, you can accomplish this like the following:

H1.navy {font: 15pt/17pt; color: navy}
H1.black {font: 15pt/17pt; color: black}
H1.blue {font: 15pt/17pt; color: blue}

Then to call them from your HTML, use:

<H1 class=navy>Navy Heading</H1>
<H1 class=black>Black Heading</H1>
<H1 class=blue>Blue Heading</H1>

Grouping Links

You can also change the style of links by A:link and A:visited (IE doesn't support A:active correctly yet). You can set any font or text formatting properties on these anchor classes, including color, font-size, font-weight, and text-decoration. For example, to assign specific colors to the three types of links:

A:link {color: navy}
A:visited {color: blue}

Setting text-decoration to none will remove the classic underlining from the link. Use this with caution since underlining is what usually gives the link away as being a link.

A:visited {color: blue; text-decoration: none}

font-family sets the typeface used for text. You can specify a single type, or alternatives. Alternatives are separated by commas to be used in order, if the user has the font on their system. If the user has Impact, it will use it, if not it will use Courier New, and so on. Notice that if a font-family is two or more words they must be in quotes.

{font-family: Impact, "Courier New", Arial, Helvetica, sans-serif}

The generic family names (serif, sans-serif, cursive, fantasy, or monospace) are mapped to the fonts installed on the user's system.

font-style attribute sets italic text:

{font-style: italic}

line-height attribute sets "leading" (the distance between two lines). You can specify leading in pt, in, cm, px, or %

{line-height: 20pt}

Grouping font attributes

You can also group font attributes just like can group fonts. Instead of:

P {font-family: Arial, serif;
font-size: 10pt;
line-height: 15pt;
font-weight: bold;
font-style: italic}

Use:

P {font: bold italic 10pt/15pt Arial, serif}

The font weight and style must be specified before the others.