Chapter 13 Exercises 13-1 to 13-8
Colors and Backgrounds
Embedded Files
Home > Chapter Review and Exercises > Chapter 13 Exercises
Black Goose Bistro
Black Goose Bistro
Follow the instructions on pages 325, 327, 330, 334, 336, 338, 340, and 350 of the Class Text.
I have already created a folder in your class folder called Ch13 with all the necessary files you will need to edit.
You will start by editing the summermenu.html file.
Read pages 303-324 before starting Exercise 13-1.
Read pages 303-324 before starting Exercise 13-1.
Exercise 13-1 What you need to know for this exercise
Exercise 13-1 What you need to know for this exercise
An element's text and border is called the foreground (page 311). To apply a color to it use the property and value: color: olive; or color: #808000
The area behind an element is the background (page 312). To apply a color to it use the property: background-color: olive;
Opacity (page 315) is the property name for an element's transparency (values range from 0 to 1): e.g. opacity: .5;
Note: The w3schools website link for Color is:
https://www.w3schools.com/css/css3_colors.asp
Pseudo-class selectors (page 316-320) are used to define a special state of an element. Element states are
unclicked links, a:link
clicked links, a:visited
mouse hovering over an element, a:hover
selected elements, and
active elements: a:active
https://www.w3schools.com/css/css_pseudo_classes.asp
Pseudo-Element selectors (page 320-322) are used to style specified parts of an element.
https://www.w3schools.com/css/css_pseudo_elements.asp
6. Attribute selectors (page 323). For examples and a try-it-yourself page, go to
Exercise 13-1 Walk-through
Exercise 13-1 Walk-through
Page 325
Page 325
Step 1
The h1 element (<h1>Black Goose Bistro Summer Menu</h1>) needs to be purple (#939). To make this change, in the summermenu.html file, add color: #939; to the h1 selector in the style section, by adding the color: #939; property:
h1 {
font: bold 1.5em Georgia, serif;
text-shadow: .05em .05em .1em lightslategray;
color: #939;
}
Step 2
The h2 headings should be light brown (#c60). Using the color property again, add color: #c60; to the h2 selector in the style section, by adding the color: #c60; property:
h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: .5em;
text-align: center;
color: #c60;
}
Step 3
A nice background color would be light green (#d2dc9d). This time use the background-color property. Add background-color: #d2dc9d; to the body selector in the style section,
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
}
Step 4
Make the background color of the header white, with 50% transparency. This requires the special RGBa value (see page 309). RGBa color allows you to specify a color and make it as transparent or opaque as you like. The RGB settings for white are 255,255,255. Thus, the property that needs to be added at the bottom of the header selector is: background-color: rgba(255, 255, 255, .5);
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, .5);
}
Step 5
Write a rule that makes links the same purple as the h1 selector (#939). To understand how to do this, look at the bottom of page 316. Using a selector like a:link allows you to apply a style to all unclicked links. And the selector a:visited applies a style to all visited links. Thus the selector is: a:link { color: #939;}.
a {
text-decoration: none;
}
a:link {
color: #939;
}
NOTE #1: This selector needs to be directly below the a { text-decoration: none; } selector.
NOTE#2: (from page 318): "When you apply styles to a elements with all five pseudo-classes, the order in which they appear is important for them to function properly. For example, if you put :link or :visited last, they override the other states, preventing them from appearing. The required order for link pseudo-classes is :link, :visited, :focus, :hover, :active"
Step 6
The visited links should be the color purple (#937393). The selector is: a:visited { color: #937393; }. Put this below the a:link selector.
a {
text-decoration: none;
}
a:link {
color: #939;
}
a:visited {
color: #937393;
}
Step 7a
When you hover a link, make it a bright purple (#c700f2) with a white background (#fff). To do this you use the a:hover selector with both the color: #c700f2; property and value, and the background-color: #fff; property and value. Put this below the a:visited selector.
a {
text-decoration: none;
}
a:link {
color: #939;
}
a:visited {
color: #937393;
}
a:hover {
color: #c700f2;
background-color: #fff;
}
Step 7b
Apply these same style rules to links that are in focus (see page 317). Simply add the a:focus selector to the a:hover selector, separated by a comma. Thus you now have: a:focus, a:hover { color: #c700f2; background-color: #fff; }.
a {
text-decoration: none;
}
a:link {
color: #939;
}
a:visited {
color: #937393;
}
a:focus, a:hover {
color: #c700f2;
background-color: #fff;
}
Step 8
The :active selector applies styles to an element while it is in the process of being activated (see page 318). In this case the :active selector is to be applied to the a elements (which have the links in them) with the text turning purple (#ff00ff) on a white background. This selector has to be at the very end (see NOTE#2 above) below the a:focus, a:hover selector. And so we have: a:active { color: #f0f; background-color: #fff }.
a {
text-decoration: none;
}
a:link {
color: #939;
}
a:visited {
color: #937393;
}
a:focus, a:hover {
color: #c700f2;
background-color: #fff;
}
a:active {
color: #f0f;
background-color: #fff;
}
Check your work by saving summermenu.html and see if it matches the image below.
Read pages 326-327 before starting Exercise 13-2.
Read pages 326-327 before starting Exercise 13-2.
Exercise 13-2 What you need to know for this exercise
Exercise 13-2 What you need to know for this exercise
The background image property (page 324 and 326) allows you to use an image as a background for your website. For example: background-image: url(/images/eagles.jpg);
Exercise 13-2 Walk-through
Exercise 13-2 Walk-through
Page 327
Page 327
Step 1
Add a simple tiling background to the menu in the summermenu.html document. In the body selector (the first selector under the <style> element), add the background-image: property with a value of url(images/bullseye.png);
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
background-image: url(images/bullseye.png);
}
Step 2
Check your work by saving summermenu.html and see if it matches the image in the link below.
Step 3 (Optional)
Add a second background-color property in the body selector below the background-color: #d2dc9d; property, to see how it blends in. Then remove it.
Step 4
When you are done, check your work by saving summermenu.html and open it in your browser to be sure that the images are visible and appear the right size, as thumbnail images, and matches the image below.
Read pages 328-329 before starting Exercise 13-3.
Read pages 328-329 before starting Exercise 13-3.
Exercise 13-3 What you need to know for this exercise
Exercise 13-3 What you need to know for this exercise
The background-repeat property changes how background images display on your website. It has six values (see pages 328-329).
repeat - it repeats as it did in Exercise 13-2.
no-repeat - the image appears just once.
repeat-x - the image repeats horizontally (left to right).
repeat-y - the image repeats vertically (up and down).
space - the images are evenly spaced apart.
round - squeezes in the images to fill the background area an even number of times.
Exercise 13-3 Walk-through
Exercise 13-3 Walk-through
Page 330
Page 330
Step 1a
The header element here is <h1>Black Goose Bistro • Summer Menu</h1>. Using summermenu.html, make the purpledot.png image repeat along the top of the header. To do this, in the header selector, add the property and value background-image: url(images/purpledot.png); and below it add the property and value background-repeat: repeat-x;
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, .5);
background-image: url(images/purpledot.png);
background-repeat: repeat-x;
}
Step 1b
Save summermenu.html and view it in your browser. The small purple dots are now all along the top of the header.
Step 2a
For this step you will practice the repeat-y and the no-repeat values.
Step 2b
Change the background-repeat: repeat-x; property to background-repeat: repeat-y; to make the purple dots repeat vertically.
Step 2c
Save summermenu.html and view it in your browser.
Step 2d
Change the background-repeat: repeat-y; property to background-repeat: no-repeat; to make the purple dot not repeat.
Step 2e
Save the file and view it in your browser.
Step 2f
IMPORTANT: Change the background-repeat: no-repeat; back to background-repeat: repeat-x; as shown here:
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, .5);
background-image: url(images/purpledot.png);
background-repeat: repeat-x;
}
Step 3a
For this step you will practice the space and round repeat values on the body background image.
Step 3b
At the very bottom of the body selector, add the line background-repeat: space;
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
background-image: url(images/bullseye.png);
background-repeat: space;
}
Step 3c
Save summermenu.html and view it in your browser.
Step 3d
Change the background-repeat: space; property to background-repeat: round;.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
background-image: url(images/bullseye.png);
background-repeat: round;
}
Step 3e
Save summermenu.html and view it in your browser.
Step 3f
Remove the background-repeat: round; property from the body selector. Instead of just deleting that line, you can have it remain but not be active by wrapping the line(s) you are removing with the style section comment symbols, /* and */ as shown here. Or just delete it, as it will not be used again in this exercise.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
background-image: url(images/bullseye.png);
/* background-repeat: round; */
}
Step 4
When you are done, check your work by saving summermenu.html and open it in your browser to be sure that the images are visible and appear the right size, as thumbnail images, and matches the image below.
Read pages 331-333 before starting Exercise 13-4.
Read pages 331-333 before starting Exercise 13-4.
Exercise 13-4 What you need to know for this exercise
Exercise 13-4 What you need to know for this exercise
The position of the first background image is defined by the background-position property (pages 331-332).
The boundaries of the background positioning area are defined by the background-origin attribute (page 333).
Exercise 13-4 Walk-through
Exercise 13-4 Walk-through
Page 334
Page 334
Step 1a
Make the background image in the body element centered. At the very bottom of the body selector, add this property: background-position: center top; Save the file and view it in your browser. The background image is now centered.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
background-image: url(images/bullseye.png);
background-position: center top;
}
Step 1b
Make the background image in the header element centered. At the very bottom of the header selector, add this property: background-position: center top; Save the file and view it in your browser. The background image in the header is now centered.
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, .5);
background-image: url(images/purpledot.png);
background-repeat: repeat-x;
background-position: center top;
}
Step 2a
Check to see how the purple dots would look like if instead they were along the bottom edge of the header. Change the header selector's background-position: center top; property to background-position: center bottom; Save the file and view it in your browser.
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, .5);
background-image: url(images/purpledot.png);
background-repeat: repeat-x;
background-position: center bottom;
}
Step 2b
Return the purple dots to the top of the header. Change the background-position: center bottom; property back to background-position: center top; Save the file and view it in your browser.
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, .5);
background-image: url(images/purpledot.png);
background-repeat: repeat-x;
background-position: center top;
}
Step 2c
Move the background image, bullseye.png, in the body down 200 pixels. To do this, locate the background-image: url(images/bullseye.png); property in the body selector. Add the background-position: center 200px; property below it. Save the file and view it in your browser.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
background-image: url(images/bullseye.png);
background-position: center 200px;
}
Step 3
Remove the background image from the body. Instead of just deleting these properties, you can instead keep them in case you might need them later by making them into style section CSS comments. Surround the background-image and the background-position with /* and */ as shown below:
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
/* background-image: url(images/bullseye.png);
background-position: center 200px; */
}
Step 4
Add the blackgoose.png image to the body background. In the body selector, add these three properties:
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
/* background-image: url(images/bullseye.png);
background-position: center 200px; */
background-image: url(images/blackgoose.png);
background-repeat: no-repeat;
background-position: center top;
}
Step 5
Save it, and then take a look in the browser window and watch the background scroll up with the content when you scroll the page.
Step 6a
For this step you will practice the various position keywords and numeric values. Try each of these out and then look at it in the browser. Be sure to scroll the page and watch what happens.
Step 6b
Change the background-position: center top; property to background-position: right top; Save the file and view it in your browser.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
/* background-image: url(images/bullseye.png);
background-position: center 200px; */
background-image: url(images/blackgoose.png);
background-repeat: no-repeat;
background-position: right top;
}
Step 6c
Change background-position: right top; to background-position: right bottom; Save the file and view it in your browser.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
/* background-image: url(images/bullseye.png);
background-position: center 200px; */
background-image: url(images/blackgoose.png);
background-repeat: no-repeat;
background-position: right bottom;
}
Step 6d
Change background-position: right bottom; to background-position: left 50%; Save the file and view it in your browser.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
/* background-image: url(images/bullseye.png);
background-position: center 200px; */
background-image: url(images/blackgoose.png);
background-repeat: no-repeat;
background-position: left 50%;
}
Step 6e
Change background-position: left 50%; to background-position: center 100px; Save the file and view it in your browser.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
/* background-image: url(images/bullseye.png);
background-position: center 200px; */
background-image: url(images/blackgoose.png);
background-repeat: no-repeat;
background-position: center 100px;
}
Step 7
When you are done, check your work by saving summermenu.html and open it in your browser to be sure that the images are visible and appear the right size, as thumbnail images, and matches the image below.
Read page 335 before starting Exercise 13-5.
Read page 335 before starting Exercise 13-5.
Exercise 13-5 What you need to know for this exercise
Exercise 13-5 What you need to know for this exercise
Use the background-attachment property to free the background from the content and allow it to stay fixed in one position while the rest of the content scrolls. Its values are scroll (default), fixed, and local.
Exercise 13-5 Walk-through
Exercise 13-5 Walk-through
Page 336
Page 336
Step 1
Use the background-attachment property to keep the blackgoose.png image in the same place even when the page scrolls. In the body selector, below the background-position: center 100px; property, add background-attachment: fixed; as its last property. Save the file and view it in your browser. Scroll up and down.
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
/* background-image: url(images/bullseye.png);
background-position: center 200px; */
background-image: url(images/blackgoose.png);
background-repeat: no-repeat;
background-position: center 100px;
background-attachment: fixed;
}
These next two steps are optional. See what happens when you fix the attachment of the dot pattern in the header.
Step 2 (Optional)
Add background-attachment: fixed; to the header selector right below background-position: center top;
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, .5);
background-image: url(images/purpledot.png);
background-repeat: repeat-x;
background-position: center top;
background-attachment: fixed;
}
Step 3 (Optional)
Save the file and view it in your browser. Scroll up and down.
Step 4
Finally, either remove or comment out the background-attachment in the header selector (to comment it out, surround it with /* and */ like this: /* background-attachment: fixed; */).
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, .5);
background-image: url(images/purpledot.png);
background-repeat: repeat-x;
background-position: center top;
/* background-attachment: fixed; */
}
Step 5
When you are done, check your work by saving summermenu.html and opening it in your browser to be sure that the images are visible and appear the right size as thumbnail images, and matches the image below.
Read pages 336-338 before starting Exercise 13-6.
Read pages 336-338 before starting Exercise 13-6.
Exercise 13-6 What you need to know for this exercise
Exercise 13-6 What you need to know for this exercise
1. You can change the size of an image by using the background-size property, e.g. background-size: 600px 150px;. Its values are:
auto - the image is displayed in its original size.
length - sets the width and height of the background image.
percentage - sets the width and height of the background image in percent of the parent element.
cover - resizes the background image to cover the entire container.
contain - resizes the background image to make sure the image is fully visible.
To play around with these settings, I recommend the w3schools.com link below:
2. Finally, just as was done with the border property, using the background property alone allows you to specify all of your background styles in one declaration. The values can appear in any order.
Exercise 13-6 Walk-through
Exercise 13-6 Walk-through
Page 338
Page 338
Step 1
In the body selector, replace all of the background related declarations into a single background property. The background declarations in the body look like this now:
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background-color: #d2dc9d;
/* background-image: url(images/bullseye.png);
background-position: center 200px; */
background-image: url(images/blackgoose.png);
background-repeat: no-repeat;
background-position: center 100px;
background-attachment: fixed;
}
Putting this into one background property you get:
background: #d2dc9d url(images/blackgoose.png) no-repeat center 100px fixed;
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
/* background-image: url(images/bullseye.png);
background-position: center 200px; */
background: #d2dc9d url(images/blackgoose.png) no-repeat center 100px fixed;
}
Step 2
Likewise, in the header selector, replace all of the background related declarations into a single background property. The background declarations in the header look like this now:
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255, 255, 255, .5);
background-image: url(images/purpledot.png);
background-repeat: repeat-x;
background-position: center top;
/* background-attachment: fixed; */
}
Putting this into one background property you get:
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background: rgba(255, 255, 255, .5) url(images/purpledot.png) repeat-x center top;
/* background-attachment: fixed; */
}
Step 3
When you are done, check your work by saving summermenu.html and opening it in your browser to be sure that the images are visible and appear the right size, as thumbnail images, and matches the image below.
Read page 339 before starting Exercise 13-7.
Read page 339 before starting Exercise 13-7.
Exercise 13-7 What you need to know for this exercise
Exercise 13-7 What you need to know for this exercise
You can put several background images in a single element. To apply multiple values for background-image, put them in a list separated by commas. Two examples:
body {background-image: url(image1.png), url(image2.png), url(image3.png); }
body { background:
url(image1.png) left top no-repeat,
url(image2.png) center center no-repeat,
url(image3.png) right bottom no-repeat; }
Exercise 13-7 Walk-through
Exercise 13-7 Walk-through
Page 340
Page 340
Step 1
Change the purple dot pattern in the header to run along both the left and right sides. Add a little goose silhouette (gooseshadow.png) along the bottom of the header. In the header selector, change this
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background: rgba(255, 255, 255, .5) url(images/purpledot.png) repeat-x center top;
/* background-attachment: fixed; */
}
to this
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background: url(images/purpledot.png) center top repeat-x;
background:
url(images/purpledot.png) left top repeat-y,
url(images/purpledot.png) right top repeat-y,
url(images/gooseshadow.png) 90% bottom no-repeat;
background-color: rgba(255,255,255,.5);
/* background-attachment: fixed; */
}
Step 2
When you are done, check your work by saving summermenu.html and opening it in your browser to be sure that the images are visible and appear the right size, as thumbnail images, and matches the image below.
Step 3a (Optional)
Notice that Step 1 (above) had you remove the property,
background: url(images/purpledot.png) center top repeat-x;
that was first put there in Exercise 13-3, Step 1a and Step 2f (above). Doing this removed the dots across the top of the header. That is because the second background property you entered here in Exercise 13-7, Step 1, replaced it. If you put the background property from Exercise 13-3, Step 1a, below the Exercise 13-7, Step 1 background property you entered here in this exercise, you will also get the dots along the top:
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background:
url(images/purpledot.png) left top repeat-y,
url(images/purpledot.png) right top repeat-y,
url(images/gooseshadow.png) 90% bottom no-repeat;
background-color: rgba(255,255,255,.5);
background: url(images/purpledot.png) center top repeat-x;
/* background-attachment: fixed; */
}
Step 3b (Optional)
Save summertimemenu.html and view it in your browser.
Step 3c (Optional)
Now remove the background: url(images/purpledot.png) center top repeat-x; background property:
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background: url(images/purpledot.png) center top repeat-x;
background:
url(images/purpledot.png) left top repeat-y,
url(images/purpledot.png) right top repeat-y,
url(images/gooseshadow.png) 90% bottom no-repeat;
background-color: rgba(255,255,255,.5);
/* background-attachment: fixed; */
}
Read pages 340-350 before starting Exercise 13-8.
Read pages 340-350 before starting Exercise 13-8.
Exercise 13-8 What you need to know for this exercise
Exercise 13-8 What you need to know for this exercise
1. The next section of the chapter discusses linear gradients, radial gradients, and repeating gradients. These properties are not used in this exercise. A great place to experiment with these properties is:
https://www.w3schools.com/css/css3_gradients.asp
2. External style sheets allow you to put all the CSS rules into an external file.
Exercise 13-8 Walk-through
Exercise 13-8 Walk-through
Page 350
Page 350
All of the CSS rules in the style element that you have added to summermenu.html will now be put into an external style sheet, called menustyles.css.
Step 1
Copy all of the rules inside the summermenu.html style element. Do not include the <style> or </style> tags.
Step 2
In your text editor, create a new document, and paste the CSS style rules you copied into it. As a first line use @charset "UTF-8";
@charset "UTF-8";
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 175%;
margin: 0 15% 0;
background: #d2dc9d url(images/blackgoose.png) no-repeat center 100px fixed;
}
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background: url(images/purpledot.png) center top repeat-x;
background:
url(images/purpledot.png) left top repeat-y,
url(images/purpledot.png) right top repeat-y,
url(images/gooseshadow.png) 90% bottom no-repeat;
background-color: rgba(255,255,255,.5);
}
a {
text-decoration: none;
}
a:link {
color: #939;
}
a:visited {
color: #937393;
}
a:focus, a:hover {
color: #c700f2;
background-color: #fff;
}
a:active {
color: #f0f;
background-color: #fff;
}
h1 {
font: bold 1.5em Georgia, serif;
text-shadow: .05em .05em .1em lightslategray;
color: #939;
}
h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: .5em;
text-align: center;
color: #c60;
}
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;
}
Step 3
Save the document as menustyles.css.
Step 4 (Optional)
The @import rule is the first method used to link the external style sheet, menustyles.css, to the website. Here, the style sheet will be linked to summermenu.html, by adding an @import rule to the style element. The style element in summermenu.html will now look like this:
<style>
@import url(menustyles.css);
</style>
Step 5 (Optional)
Check your work by saving summermenu.html and see if it looks the same are it was at the end of Exercise 13-7.
Step 6
Delete the entire style element in summermenu.html (what you added in step 4 above).
Step 7
The second (and preferred) way of linking a CSS style sheet to summermenu.html , is to use a link element in the head element. The head element will now appear in summermenu.html as:
<head>
<meta charset="utf-8">
<title>Black Goose Bistro Summer Menu</title>
<link href='http://fonts.googleapis.com/css?family=Marko+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="menustyles.css" >
</head>
Step 8
When you are done, check your work by saving summermenu.html a and open it in your browser to be sure that the images are visible and appear the right size, as thumbnail images, and matches the image below.
Report abuse