CSS Examples

This page will cover examples of inline CSS to do the styling that I use. There is much more to CSS that is beyond the scope of this tutorial. First let's style a <h2>,

Center, Color and Background-color

Centering was simple pre-HTML5. Simply put what ever you wanted centered between center tags. Center is depricated in HTML5 and now inline elements are centered differently from from block elements. Centering text within a block element is done with the property text-align with a value center. Color is changed with the property color with a named color or hex. (There are more ways but these are most intuitive.) The paragraph below had the background color changed with the property background-color: #fad888. You can also use <span> to give text
color <span style="color:red">color</span> or
background color <span style="background-color:skyblue">background color</span> .

Paragraphs

I like paragraphs to have margins and to be indented like a book.
<p style="margin-right: 2em;         
          margin-left: 2em;          
          margin-top: 1em;           
          margin-bottom: 0em;        
          text-indent: 2em;          
          background-color: #fad888">
The unit of measurement for margins can be px (pixels), pt (points), cm (centimeters), in (inches), em (size of the letter "m"), % (percent of an em) or rem. I prefer em or % because they scale for the size of the page or printer. For this reason I rarely use absolute measurements except for images. You can have problems with em if you have nested elements using em. The child element inherits the size of its parent so the size gets bigger and bigger or smaller and smaller. If for some reason you want to resize letters in nested elements you can use rem (“root em”) instead. The rem is the font size of the root element of the web page. A shortcut for setting all four sides in order top-right-bottom-left is margin: 1em 2em 0em 2em;. If all of the margins are equal then you can use the shortcut margin: 2em;.

Internal CSS

The examples on this page have used inline CSS. If you are using inline CSS you would have to style every element individually. With internal CSS all (or most) of the styling is moved to the head. One line styles every headline. One line styles every paragraph. For the next page I will take the styling out of the body and move it to the head like this:

<style>
  body { background-color: #fad888; }
  code { background-color: white; }
  h1, h2, h3, h4, h5, h6 { text-align: center; color:blue; }
  p { margin-top: 1em;
      margin-right: 2em; 
      margin-bottom: 0em;
      margin-left: 2em; 
      text-indent: 2em;
  .center { text-align: center;}
    }
</style>

body { background-color: #fad888; sets the background color for the body and all of its child elements.
code { background-color: white; } overrides the body background color for the <code> element and changes it to white.
You can style multiple elements at once separating the selecters with commas. I do that to center and color all headlines. h1, h2, h3, h4, h5, h6 { text-align: center; color:blue; }
I set the margins individually but there is also a shortcut: margin: 1em 2em 0em 2em in order top, right, botton, left.
Finally I will use a class selecter named center that I will use to center the links at the bottom of the page: .center { text-align: center;}. To apply it I will enclose the links in a div with the attribute class="center":
<div style="text-align:center;"><a href="02.php"><</a> <a href="index.php">^</a> <a href="04.php">></a></div>