@charset "utf-8";
/* CSS Document */
body { font-family: Verdana, Arial, Helvetica, sans-serif; color:blue; }
p { color: maroon; }
strong { font-size: 24px; }

/** ID more specific than class, class more specific than tag */
#headerID { color : orange; font-size:48px; }
/** # is 2nd highest specificity but style=".." is highest */
.headerLine { color: lime; }
h2 { color: red; }

a { color: skyblue; }
li a { font-weight: bold; }
.byline a { text-decoration: none; }

/* on ties class and anchor last one in wins */

.byline a { color: red; }
p .email { color: blue; }

/* the above 2 rules are more specific */
a { color: teal  }
/* note all become teal when we use !important,
   try !important with id="headerLine"  */
/* a { color: teal !important } */

/* override a rule using style block on html page */
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000;
}

#article p { color: red; }
.special { color: blue; }
/* need a more specific */
#article .special { color: inherit; /* teal */ }
/** no change: tag < class < id < style="value" < !imporant */
p.special { color: lime; }