Group - Selectors

Assigning single selector to every declaration blocks can cause code to bloat

clumsy code=

style type="text/css">
h1 {text-decoration:underline;
h2 {text-decoration:underline;
h3 {text-decoration:underline;
h4 {text-decoration:underline;
h5 {text-decoration:underline;
h6 {text-decoration:underline;
}
/style>
/head>

body>
h1>header /h1>
h2>header /h2>
h3>header /h3>
h4>header /h4>
h5>header /h5>
h6>header /h6>
/body>

cleaned-up code - group selector

style type="text/css">
h1, h2, h3, h4, h5, h6 {text-decoration:underline;}

/style>
/head>

body>
h1>header /h1>
h2>header /h2>
h3>header /h3>
h4>header /h4>
h5>header /h5>
h6>header /h6>
/body>

don't place a comma after last selector - code will not apply
not limited to h1 elements - order doesn't matter - NO COMMA at end
can also be applied to any type of selector: class, ID, html element selectors

style type="text/css">
h1, h2, h3, h4, h5, h6, p, .green {text-decoration:underline;
background-color:#3CC;}

/style>
/head>

body>
p class="green">text /p>
h1>header /h1>
h2>header /h2>
h3>header /h3>
h4>header /h4>
h5>header /h5>
h6>header /h6>
/body>

create a new style sheet - Styles.css
create link within html
link rel="stylesheet" href="Styles.css" type="text/css" media="all">

now go into style sheet and make some rules

/* CSS Document */
body {font-family:"Times New Roman", Times, serif;}
this font family will be inherited unless otherwise specified by all decended elements in the document
h1, h2 {font-family:Verdana, Geneva, sans-serif;
color:#39F;
font-size:2em;
}
p, ol{
color:#111;
font-size:1em;
}
back to html file - headers are formatted - but not in Times

second header:
h2>About CSS /h2>