Pixels and ems
Great work! We'll do more with colors as you learn more CSS.
When we've asked you to adjust font size, we've specified that the unit you should use is
px (for "pixels"), like so:p {
font-size: 10px;
}
A pixel is a dot on your computer screen. Specifying font sizes in pixels is great when you want the user to see exactly on their screen what you designed on yours, though it assumes your screens are of similar size.
What if the user is using a screen that's a very different size from yours, though (like a smartphone screen)? Enter ems. (Don't confuse these with the
<em></em> tags we use foremphasis!)
The
font-size unit em is a relativemeasure: one em is equal to the default font size on whatever screen the user is using. That makes it great for smartphone screens, since it doesn't try to tell the smartphoneexactly how big to make a font: it just says, "Hey, 1em is the font size that you normally use, so 2em is twice as big and 0.5em is half that size!"
Check it out: we've set three different paragraphs to the
font-sizes 1em,0.5em, and 2em. For now, use whichever unit (px or em) you're more comfortable with—we just wanted to show you em now so you're not surprised when you see it later.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<p style="font-size: 1em">One em!</p>
<p style="font-size: 0.5em">Half an em!</p>
<p style="font-size: 2em">TWO EM!</p>
</body>
</html>
A font of knowledge
We've also asked you to change the
font-family of certain elements using CSS. You've seen us use the fonts Verdana, Courier, and Garamond. But how many fonts does CSS know?
The answer is: it depends. Most computers will understand popular fonts like Verdana, Courier, and Garamond, but each individual computer has different fonts installed on it. The good news is that CSS has some built-in defaults meant to ensure your users see what you intend. They are:
serif: A font with little decorative bits on the ends of the strokes that make up letters. Do a search on "serif" to see what we mean.
sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies on the ends of letters like a serif font does.
cursive: A scripty font! It looks like cursive writing.
We'll show you how to import your own fonts in a later course! This will help make sure the person viewing your page has all the fonts you want them to have.
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h1>I'm going to be a serif font when I grow up!</h1>
<h2>I'm going to be a sans-serif font.</h2>
<h3>I'm going to be in cursive!</h3>
</body>
</html>
stylesheet.css
/*Add your CSS below!*/
h1{ font-family: serif;}
h2{ font-family: sans-serif;}
h3{ font-family: cursive;}
You don't have to jump straight to a default value like
cursive or sans-serif: you can tell CSS to try several, going from one to the next if the one you want isn't available.
For example, if you write:
p {
font-family: Tahoma, Verdana, sans-serif;
}
CSS will first try to apply Tahoma to your paragraphs. If the user's computer doesn't have that font, it will try Verdana next, and if that doesn't work, it will show a default sans-serif font.
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h1>I'm going to be a serif font when I grow up!</h1>
<h2>I'm going to be a sans-serif font.</h2>
<h3>I'm going to be in cursive!</h3>
</body>
</html>
stylesheet.css
/*Add your CSS below!*/
h1{ font-family: Times, serif;}
h2{ font-family: Verdana, sans-serif;}
h3{ font-family: Vivaldi , cursive;}
LEFT OFF AT css:overview 3.6
No comments:
Post a Comment