Chapter 13 Exercises 13-1 to 13-2
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:
Exercise 13-1 Walk-through
Exercise 13-1 Walk-through
Page 325
Page 325
In this exercise we will add some new foreground and background colors to the Black Goose Bistro we have been working with.
Step 1A
The h1 element in the summermenu.html file appears as shown below. We first want to change the color of the h1 element (<h1>Black Goose Bistro Summer Menu</h1>) from olivedrab to a shade of purple using RGB valules.
h1 {
font: 400 2.5rem "Julius Sans One", Verdana, sans-serif;
color: olivedrab;
text-shadow: .1em .1em .05em gainsboro;
}
We will use the RGB values R:153, G: 51, B:153 with the rgb() function. Replace olivedrab with rgb(153 51 153). Save the file and look at it in the browser.
h1 {
font: 400 2.5rem "Julius Sans One", Verdana, sans-serif;
color: rgb(153 51 153);
text-shadow: .1em .1em .05em gainsboro;
}
Step 1B
It just so happens that those RGB values translate to 99, 33, and 99 in hexadecimal. Write the color values again, this time using hexadecimal notation (#993399). Save and refresh the summermenu.html file in your browser (it should be the same purple color). Using the hexadecimal shorthand you can also write #993399 as #939 instead.
h1 {
font: 400 2.5rem "Julius Sans One", Verdana, sans-serif;
color: #993399;
text-shadow: .1em .1em .05em gainsboro;
}
Step 2
In the summermenu.html file, the h2 appears as shown below. We want to change the color of the h2 headings from cadetblue to dark purple using HSL values.
h2 {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .5em;
color: cadetblue;
}
Replace cadetblue with hsl(300 65% 30%). Try increasing or decreasing the percentage valuesa few times to see how the color gets more or less saturated and more or less bright. This should give you a feel for how HSL values work.
h2 {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .5em;
color: hsl(300 65% 30%);
}
Step 3
A nice background color would be light green (#cdd7ae). Usinge the background-color property, add background-color: #cdd7ae; to the body selector in the style section.
body {
font-family: Georgia, serif;
line-height: 1.75;
margin: 0 15% 0;
background-color: #cdd7ae;
}
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
To see the effect that opacity has on the entire header element, add an opacity declaration to the header and set it to .5. Save the summermenu.html file and reload your browser to see the effect opacity has on the entire element.
header {
opacity: .5
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255 255 255 / .5);
}
Step 6
Once you have done that, you can delete the opacity declaration.
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgba(255 255 255 / .5);
}
Check your work by saving summermenu.html and see if it matches the image below.
Read pages 326-330 before starting Exercise 13-2.
Read pages 326-330 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);
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-2 Walk-through
Exercise 13-2 Walk-through
Page 327
Page 327
In this exercise, you are going to add some background images to the menu.
Step 1
Make the image bullseye.png in the background of the menu. 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: 1.75%;
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 below.
Step 3 (Optional)
The bullseye.png imge is a slightly transparent PNG graphic. That means it will blend into any background color. Temporarily 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 (Optional)
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 as shown below.
Step 5
Make the pattern stay centered at the top of the viewport so it aligns with the headline. Use the background-position property to set the horizontal and vertical position of the first tile. 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: 1.75%;
margin: 0 15% 0;
background-color: #d2dc9d;
background-image: url(images/bullseye.png);
background-position: center top;
}
Step 6
Use the background-attachment property with a setting of fixed (the default is scroll) to make the main tiled background stay in a fixed position when the page scrolls. for this, .
body {
font-family: Georgia, serif;
line-height: 1.75;
margin: 0 15% 0;
background-color: #cdd7ae;
background-image: url(images/bullseye.png);
background-position: top center;
background-attachment: fixed;
}
Step 7
Save the file and view it in your browser. Try scrolling it up and down. The background pattern shouldn't move.
Step 8
Add the purpledot.png image to only the header. Restrict the tiling to only the horizontal direction. Remember, this is only the header element, not the body.
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 9
Save summermenu.html and view it in your browser. The small purple dots are now all along the top of the header.
Step 9
Temporarily remove the purple dots. To do that we will comment out the two declarations from Step 8.
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 10
Add a single centered black goose icon (blackgoose.png) as large as can be yet still fit in the header by using the contain value of the background-size property. Add the following declarations, save the document, and refresh the browser.
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgb(255 255 255 / .5);
/* background-image: url(images/purpledot.png);
background-repeat: repeat-x; */
background-image: url(images/blackgoose.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
Step 11
In this last step, you will learn how to put multiple background images in the same element. We will be adding a little goose silhouette illustration to the header along with the existing icon. To apply multiple background images to an element, provide the values in a comma-separated list. Start by adding a second image (gooseshadow.png) to the existing background-image declaration (don't forget the comma).
Images earlier in the list will be drawn on top of images later in the list.
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgb(255 255 255 / .5);
/* background-image: url(images/purpledot.png);
background-repeat: repeat-x; */
background-image: url(images/gooseshadow.png), url(images/blackgoose.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Additional background-related properties also go in comma-separated lists; the first value applies to the first image, the second value to the second, and so on.
header {
margin-top: 0;
padding: 3em 1em 2em 1em;
text-align: center;
background-color: rgb(255 255 255 / .5);
/* background-image: url(images/purpledot.png);
background-repeat: repeat-x; */
background-image: url(images/gooseshadow.png), url(images/blackgoose.png);
background-repeat: no-repeat, no-repeat;
background-position: 3em bottom, center;
background-size: auto, contain;
}
And we are done. I encourage you to play around with the background properties and see what the other values do. It is the best way to get a feel for them.
Report abuse