HTML and CSS Reference
In-Depth Information
Let's make these changes to the
font sizes in Tony's web page
It's time to try these font sizes in Tony's web page. Add the new properties to the
“journal.css” file in the “chapter8/journal” folder. Once you've made the changes,
reload the page in the browser and check out the differences in the font size. If you
don't see a difference, check your CSS carefully for errors.
@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 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
}
Following our recipe, we're using a font-size
of small for the <body> element. This will
act as the base font size.
And
we'll set th
e other fon
ts relative
to the
body
font size.
In the case
of <h1>, we
'll try a
font
size that i
s 220% of
the base f
ont size.
If you specified <h1> and <h2>'s font sizes using em rather than
percentage, what would their values be?
