css tutorial

In style sheets there are often elements with the same style.

h1{color:green;}
h2{color:green;}
p{color:green;}

To minimize the code, you can group selectors.

Separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

h1,h2,p{color:green;} Continue reading ‘Grouping Selectors’ »

Grouping is gathering (1) into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector (2).

1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:

LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}

To reduce the size of style sheets and also save some typing time they can all be grouped in one list.

LI, P.first, .footnote {font-style: italic}

2. The declarations {font-style: italic} and {color: red} can be attached to one selector, e.g.:

H2 {font-style: italic}
H2 {color: red}

and can also be grouped into one list:

H2 {font-style: italic; color: red}