Embedded Files
Home > Chapter Review and Exercises > Chapter 13 - Colors and Backgrounds
Summary
Summary
The primary purpose of this chapter is to introduce color and background properties; however, it also increases the number of selectors in the readers’ toolkits and introduces external style sheets.
Takeaways
Takeaways
In Chapter 13, you will learn the following:
How to use the color and background-color properties with color names, RGB values, and HSL values
A thorough understanding of how the RGB color system works, and how that translates into the CSS syntax for specifying color: rgb(#,#,#), rgb(%, %, %)
How to specify RGB values with hexadecimal values (#RRGGBB)
Specifying HSL color values: hsl(#, % %)
Adding transparency to RGB and HSL values by including a fourth alpha value: rgba(#,#,#,#) and hsla(#,%,%,#)
Using the opacity property to apply a level of transparency to an element
New selectors:
Pseudo-classes for changing the appearance of elements based on user actions (:link, :visited, :focus, :hover, :active)
Pseudo-elements that target elements not explicitly contained or marked up in the HTML source (::first- line, ::first-letter, ::before, ::after)
Attribute selectors that target elements based on their attribute names or values
How to add tiling images to the background of an element with background-image, background-repeat, background-position, background-origin, background-attachment, and background-size
Specifying background colors and all tiling image properties with the shorthand background property
Adding multiple background images to a single element
Using linear and radial gradients in element backgrounds
Why vendor prefixes are required for certain CSS properties
Two methods for adding external style sheets (text-only documents saved with the .css suffix): the <link> element in the head of the document, and the @import rule in a style sheet.
Key terms in Chapter 13
Key terms in Chapter 13
RGB color model (also called Truecolor)
A color model that mixes colors from Red, Green, and Blue light. With 256 shades of light in each channel, this color model is capable of creating millions of colors.
HSL color model (Hue Saturation Luminosity)
A color model that specifies colors by their Hue (in degrees around a circle of colors), Saturation (a percentage value), and Luminosity (a percentage value).
hexadecimal
A numbering system that uses 16 digits: 0–9 and A–F (for representing the quantities 10–15). It is used in computing because it reduces the space it takes to store certain information.
alpha channel
A fourth channel in image formats that contains transparency information.
RGBa
A color model that specifies an RGB color with a transparency level. The alpha setting is specified on a scale from 0 (fully transparent) to 1 (fully opaque).
HSLa NOTES
A color model that specifies an HSL color with a transparency level. The alpha setting is specified on a scale from 0 (fully transparent) to 1 (fully opaque).
foreground (of an element)
Consists of the element’s text and border.
background canvas
The area in an element box that includes the content area and padding, extending behind the border to the margin edge.
background painting area
The area in which fill colors are applied.
pseudo-class selector
An implied class applied to elements in the same state (such as hover).
pseudo-element selector
Selectors that insert implied or fictional elements into the document for styling.
generated content
Content that browsers insert on the fly, such as list markers or content added with ::before and ::after pseudo-element selectors.
attribute selector
Targets elements based on attribute names or values.
origin image
The first image placed in the background from which tiling images extend.
attached background image
A background image that stays in a fixed position relative to the browser window.
linear gradient
A transition from one color to another along a straight line.
radial gradient
A transition from one color to another that starts at a point and spreads out in a circular or elliptical shape.
color stop
A point along a gradient line where pure color is positioned.
vendor prefix
A browser-specific prefix added to a property to indicate that it is in an experimental mode (example: -webkit-gradient).
media queries
A method for applying styles based on the medium used to display the document.
Exercises in Chapter 13
Exercises in Chapter 13
13-1: Adding color to a document
Colors are added to various elements in a black and white menu to give it a more pleasing color palette.
13-2: Adding a tiling background image
A background image is added to the background of the whole page when it is applied to the body element.
13-3: Controlling tile direction
The background-repeat property is used to control the repeat pattern of images in the background of the page and in a header element.
13-4: Positioning background images
Here students get a chance to play around with the position of several background images.
13-5: Fixed position
A quick edit makes a single background image stay fixed in the browser window.
13-6: Convert to shorthand property
All the background properties we’ve been applying are changed to a single background shorthand property.
13-7: Multiple background images
This is an opportunity to put more than one image in the background of the header element.
13-8: Making an external style sheet
All the styles in the style element get moved to an external style sheet document that is linked first with an @import rule and then with the link element.
Test Yourself
Test Yourself
1. Which of these areas gets filled with a background color by default?
a. The area behind the content
b. Any padding added around the content
c. The area under the border
d. The margin space around the element
e. All of the above
f. a and b
g. a, b, and c
2. Which of these is not a way to specify the color white in CSS?
a. #FFFFFF
b. #FFF
c. rgb(255, 255, 255)
d. rgb(FF, FF, FF)
e. white
f. rgb(100%, 100%, 100%)
3. Match the pseudo-class with the elements it targets.
a. a:link 1. Links that have already been clicked
b. a:visited 2. An element that is highlighted and ready for input
c. a:hover 3. An element that is the first child element of its parent
d. a:active 4. A link with the mouse pointer over it
e. :focus 5. Links that have not yet been visited
f. :first-child 6. A link that is in the process of being clicke
4. Match the following rules with their respective samples as shown here. All of the samples in the figure use the same source document, consisting of one paragraph element to which some padding and a border have been applied.
a.
body {
background-image: url(graphic.gif);
}
b.
p {
background-image: url(graphic.gif);
background-repeat: no-repeat;
background-position: 50% 0%;
}
c.
body {
background-image: url(graphic.gif);
background-repeat: repeat-x;
}
d.
p {
background: url(graphic.gif) no-repeat right center;
}
e.
body {
background-image: url(graphic.gif);
background-repeat: repeat-y;
}
f.
body {
background: url(graphic.gif) no-repeat right center;
}
Additional Supplemental Resources
Additional Supplemental Resources
1. Chapter 13 summary - CSS color and background properties
1. Chapter 13 summary - CSS color and background properties
An element's text and border is called the foreground (page 311). To apply a color to it use the property: color: red; 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;
Special selectors (page 316-318) apply to the state of an element. Element states are 1) unclicked links, 2) clicked links, 3) mouse hovering over an element, 4) selected elements, and 5) active elements: a:link a:visited a:hover a:active
Attribute selectors (page 323). For examples and a try-it-yourself page, go to https://www.w3schools.com/css/css_attribute_selectors.asp
Background image (page 324 and 326), 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.
The position of the first background image is defined by the background-position property (pages 331-332).
The boundaries of the background positioning area is defined by the background-origin attribute (page 333).
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.
10. The position of the first background image is defined by the background-position property (pages 331-332).
11. The boundaries of the background positioning area is defined by the background-origin attribute (page 333).
12. 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.
13. You can change the size of the 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 link below:
https://www.w3schools.com/cssref/css3_pr_background-size.asp
14. Just as with the border property, the background property alone allows you to specify all of your background styles in one declaration. The values can appear in any order.
15. 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; }
16. The next to last section of the chapter discusses linear gradients, radial gradients, and repeating gradients. A great place to experiment with these properties is:
https://www.w3schools.com/css/css3_gradients.asp
17. External style sheets allow you to put all the CSS rules into an external file. In the head element of the document, use the link element, e.g. <link rel="stylesheet" href="menustyles.css">
2. W3Schools video on CSS Background properties
2. W3Schools video on CSS Background properties
3. Color Box website
3. Color Box website
Report abuse