Getting Tabular - Head First HTML and CSS - page 612

Now let's style the table

Add the new style highlighted below at the bottom of the “journal.css”
stylesheet file.

@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, h2 {
color: #cc6600;
border-bottom: thin dotted #888888;
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}

At the top here is all the style that's
currently in Tony's web page. We
added all this in Chapter 8. We're
going to add the new style for the
tables below it.

First, we'll style the table. We're goi ng to add a margin on
the left and right, and a thin, black border to the table.

table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
}

And we're going to move that caption
to the bottom of the table.

td, th {
border: thin dotted gray;
padding: 5px;
}

Let's al so change the bord er on the table dat a cells to be a
much lig hter, dotted borde r in gray.
And let' s add some padding to the data cells so there's some
space be tween the data co ntent and the bord er.

caption {
font-style: italic;
padding-top: 8px;
}