add some attention-getting color

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question

<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 &bull; 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 &mdash; <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 &mdash; <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 &mdash; <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.
Transcribed Image Text: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.
Expert Solution
steps

Step by step

Solved in 2 steps

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY