That worked, but now the strong slament "Very spicy" in the description is "tomato" red too, and that's not what I want. The solution is to uss a contextual selector that targets only ths strong slemants that appear in dit alaments. Ramove the color declaration you just wrote from the strong ruls, and crcats a new rule that targets anly the strong slaments within definition list terms dt strong { color: tomato; }
<style>
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
}
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
}
a {
text-decoration: none;
}
h1 {
font: bold 1.5em "Marko One", Georgia, serif;
}
h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: .5em;
text-align: center;
}
dt {
font-weight: bold;
}
strong {
font-style: italic;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#info p {
font-style: italic;
}
.price {
font-family: Georgia, serif;
font-style: italic;
}
p.warning, sup {
font-size: small;
}
.label {
font-weight: bold;
font-variant: small-caps;
font-style: normal;
}
h2 + p {
text-align: center;
font-style: italic;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main-styles.css">
<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=Marko+One&display=swap" rel="stylesheet">
<title>About me</title>
</head>
<body>
<header>
<h1>Black Goose Bistro • Summer Menu</h1>
<div id="info">
<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>
<ul>
<li><a href="#appetizers">Appetizers</a></li>
<li><a href="#entrees">Main Courses</a></li>
<li><a href="#toast">Traditional Toasts</a></li>
<li><a href="#dessert">Dessert Selection</a></li>
</ul>
</div>
</header>
<section 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>
</section>
<section 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>
</section>
<section id="toast">
<h2>Traditional Toasts</h2>
<p>The ultimate comfort food, our traditional toast recipes are adapted from <a href="http://www.gutenberg.org/files/13923/13923-h/13923-h.htm"><cite>The Whitehouse Cookbook</cite></a> published in 1887.</p>
<dl>
<dt>Cream toast</dt>
<dd>Simple cream sauce over highest quality toasted bread, baked daily. <span class="price">$3.95</span></dd>
<dt>Mushroom toast</dt>
<dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$6.95</span></dd>
<dt>Nun's toast</dt>
<dd>Onions and hard-boiled eggs in a cream sauce over buttered hot toast. <span class="price">$6.95</span></dd>
<dt>Apple toast</dt>
<dd>Sweet, cinnamon stewed apples over delicious buttery grilled bread. <span class="price">$6.95</span></dd>
</dl>
</section>
<section id="dessert">
<h2>Dessert Selection</h2>
<p>Be sure to save room for our desserts, made daily by our own <a href="http://www.jwu.edu/college.aspx?id=19510">Johnson & Wales</a> trained pastry chef.</p>
<dl>
<dt class="newitem">Lemon chiffon cake — <strong>new item!</strong></dt>
<dd>Light and citrus flavored sponge cake with buttercream frosting as light as a cloud. <span class="price">$2.95</span></dd>
<dt class="newitem">Molten chocolate cake</dt>
<dd>Bubba's special dark chocolate cake with a warm, molten center. Served with or without a splash of almond liqueur. <span class="price">$3.95</span></dd>
</dl>
</section>
<footer>
<p class="warning"><sup>*</sup> We are required to warn you that undercooked food is a health risk.</p>
</footer>
</body>
</html>
</body>
</html>
![1. l'd like to add some attention-getting color to the "new item!" elements
next to certain menu item names. They are marked up as strong, so we
can apply the color property to the strong slement. Add this rule to the
embedded style shest, save the file, and reload it in the browser:
strong ( font-style: italic;
color: torato; }
That worked, but now the strong slement "Very spicy" in the description
is "tomato" red too, and that's not what I want. The solution is to use a
contextual selector that targets only the strong elements that appear in
dt elements. Remove the color declaration you just wrote from the
strong rule, and create a new rule that targets only the strong elements
within definition list terms:
dt strong ( color: tomato; }
2. Look at the documant source, and you will ses that the content has been
divided into three unique divs: info, appetizers, and entrees. We can
use these to our advantage when it comes to styling. For now, let's do
something simple and apply a teal color to the text in the div with the ID
"info". Because color inherits, we nesd to apply the property only to the
div and it will be passed down to the hl and p:
sinfo ( color: teal; }
3. Now let's get a little fancier and maks the paragraph inside the "info"
section italic in a way that doesn't affect the other paragraphs on the
pags. Again, a contextual selector is the answer. This rule selects only
paragraphs contained within the info section of the document:
sinfo p ( font-style: italic; }
4. I want to give special treatment to all of the prices an the menu.
Fortunately, they have all been marked up with span elements:
cspan class-"price">$3.95</span>
So now all we have to do is write a rule using a class selector to change
the font to Georgia or some serif font, maka the prices italic, and gray
them back:
-price { font-fanily: Georgia, serif; font-style: italic;
5. Similarly, in the "info" div, I can change the appearance of the spans
that have been marked up as belonging to the "label" class to make the
labels stand out:
-label { font-weight: bold; fant-variant: snall-caps; fon
6. Finally, there is a warning at the bottom of the page that I want to make
small and red It has been given the class "warning." so I can use that as
a selector to target just that paragraph for styling. While I'm at it, I'm go-
ing to apply the same style to the sup element (the footnote asterisk) car-
lier on the page so they match. Note that I've used a grouped selector, so
I don't need to write a separate rule.](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Fc17e9c55-54c2-4577-8282-96136681a203%2F28cbe91a-e6d6-4cb1-91eb-38f784f9ffc5%2Fd63c7lo_processed.png&w=3840&q=75)
![](/static/compass_v2/shared-icons/check-mark.png)
Step by step
Solved in 2 steps
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Concepts of Database Management](https://www.bartleby.com/isbn_cover_images/9781337093422/9781337093422_smallCoverImage.gif)
![Prelude to Programming](https://www.bartleby.com/isbn_cover_images/9780133750423/9780133750423_smallCoverImage.jpg)
![Sc Business Data Communications and Networking, T…](https://www.bartleby.com/isbn_cover_images/9781119368830/9781119368830_smallCoverImage.gif)