Example: CSS - Using DIV IDs to Style Different Parts of a Document

All elements in the header DIV are centered and serif font.


#header { 
  text-align: center;
  font-family: serif;
  }

H1 tags in the header DIV are green


#header h1 { color: green; }

P tags in the header DIV are brown


#header p  { color: brown; }

All elements in the content DIV are justified and sans-serif font


#content { 
  text-align: justify;
  font-family: sans-serif;
  }

H1 tags in the content DIV are orange


#content h1 { color: orange; }

P tags in the content DIV are red


#content p  { color: red; }

the "filler" class in the content DIV is gray


#content .filler { color: 555; }

Elements in the footer DIV are right-aligned and monospaced font


#footer { 
  text-align: right;
  font-family: monospace;
  }

H1 tags in the footer DIV are 1em and blue


#footer h1 { 
  font-size: 1em; 
  color: blue; 
  }

P tags in the footer DIV are purple


#footer p  { color: purple; }