Here’s a CSS example of using Ems for bulletproof web design. Being able to use Ems for flexible text allows a more precise way of displaying text, similar to using pixels, except that with Ems, they are relative units.
body {
font-size:62.5%; /* gives us a base of 10px */
}
h1 {
font-size:2em; /* 20px */
}
h2 {
font-size:1.8em; /* 18px */
}
p {
font-size:1.2em; /* 12px */
}
p abbr {
font-size:2em; /* 24px since abbr is a child of p */
}
#sidebar {
font-size:1em; /* 10px */
}
——————————————————————————
In a similar manner you could also do percentages to make your site flexible.
body {
font-size: small; /*changing this keyword will affect all the other elements */
}
h1 {
font-size: 150%;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 120%;
}
ul li {
font-size: 90%;
}
.note {
font-size:85%;
}
——————————————————————————
As for the actual stylesheets, Ive provided a link for the Em stylesheet which can be viewed here. You can also view the percentages stylesheet here.
