1. There are many approaches to sizing text on web pages. In this example, start by putting a stake in the ground and setting the font-size of the body element to 100%, thus clearing the way for em measurements thereafter: body { font-family: Verdana, sans-serif; font-size: 100%;} 2. The browser default of 16 pixels is a fine size for the main page text, but I would like to improve the appearance of the heading levels. ľ'd like the main heading to be 24 pixels, or one and a half times larger than the body text [target (24) + context (16) = 1.5]. I'll add a new rule that sets the size of the h1 to 1.5em. I could have used 150% to achieve the same thing. h1 { font-size: 1.5em;} 3. Now make the h2s the same size as the body text so they blend in with the page better: h2 { font-size: 1em;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Black Goose Bistro Summer Menu</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Marko+One&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
h1{
font-family: 'Marko One', serif;
}
</style>
</head>
<body>
<div id="info">
<h1>Black Goose Bistro • Summer Menu</h1>
<p>Baker's Corner, Seekonk, Massachusetts<br>
<span class="label">Hours: Monday through Thursday:</span> 11 to 9, <span class="label">Friday and
Saturday;</span> 11 to midnight</p>
</div>
<div id="appetizers">
<h2>Appetizers</h2>
<p>This season, we explore the spicy flavors of the southwest in our appetizer collection.</p>
<dl>
<dt>Black bean purses</dt>
<dd>Spicy black bean and a blend of mexican cheeses wrapped in sheets of phyllo and baked until golden.
<span class="price">$3.95</span></dd>
<dt class="newitem">Southwestern napoleons with lump crab — <strong>new item!</strong></dt>
<dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span
class="price">$7.95</span></dd>
</dl>
</div>
<div id="entrees">
<h2>Main courses</h2>
<p>Big, bold flavors are the name of the game this summer. Allow us to assist you with finding the perfect wine.
</p>
<dl>
<dt class="newitem">Jerk rotisserie chicken with fried plantains — <strong>new item!</strong></dt>
<dd>Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served
with fried plantains and fresh mango. <strong>Very spicy.</strong> <span class="price">$12.95</span>
</dd>
<dt>Shrimp sate kebabs with peanut sauce</dt>
<dd>Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served
with spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd>
<dt>Grilled skirt steak with mushroom fricasee</dt>
<dd>Flavorful skirt steak marinated in Asian flavors grilled as you like it<sup>*</sup>. Served over a blend
of sauteed wild mushrooms with a side of blue cheese mashed potatoes. <span class="price">$16.95</span>
</dd>
</dl>
</div>
<p class="warning"><sup>*</sup> We are required to warn you that undercooked food is a health risk.</p>
</body>
</html>
![1. There are many approaches to sizing text on web pages. In this example,
start by putting a stake in the ground and setting the font-size of the
body element to 100%, thus clearing the way for em measurements
thereafter:
body { font-family: Verdana, sans-serif; font-size: 100%;}
2. The browser default of 16 pixels is a fine size for the main page text, but
I would like to improve the appearance of the heading levels. P'd like the
main heading to be 24 pixels, or one and a half times larger than the
body text [target (24) - context (16) = 1.5]. I'll add a new rule that sets
the size of the h1 to 1.5em. I could have used 150% to achieve the same
thing.
h1 { font-size: 1.5em;}
3. Now make the h2s the same size as the body text so they blend in with
the page better:
h2 { font-size: 1em;}](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F952ff8a6-fff2-4b89-aa4d-e177b52f5b19%2F22e251cd-d5bf-44f9-8e12-38c54c1118d3%2F4ht6ne_processed.png&w=3840&q=75)
Step by step
Solved in 2 steps
