Chapter 12 Exercises 12-1 to 12-6
Formatting Text
Embedded Files
Home > Chapter Review and Exercises > Chapter 12 Exercises
Modifying the Black Goose Bistro menu document
Modifying the Black Goose Bistro menu document
Follow the instructions on pages 268, 273, 275, 277, 286, and 295 of the Class Text.
I have already created a folder in your Classroom Ch12 folder with the necessary file you will need to edit.
You will start by editing the menu.html file in your Classroom folder.
As reference, the Chapter 12 textbook slides are in the Class Textbook and Resources section.
Read pages 261-267 before starting Exercise 12-1.
Read pages 261-267 before starting Exercise 12-1.
Exercise 12-1 What you need to know for this exercise
Exercise 12-1 What you need to know for this exercise
The font-family CSS property specifies one or more fonts by name, for example:.
p { font-family: "Duru Sans", Verdana, sans-serif; }
If the browser does not have the first font listed (i.e. "Duru Sans"), it will then try the second, the third, and so on.
Font names must start with a capital letter (i.e. Arial), and if they contain a character space (i.e. Duru Sans) the entire font name must be enclosed by quotation marks.
Fonts can be brought in from websites that provide fonts, e.g.
<link href="http://fonts.googleapis.com/css?family=Marko+One" rel="stylesheet">
There are five generic font families: serif, sans-serif, monospace, cursive, and fantasy.
Exercise 12-1 Walk-through
Exercise 12-1 Walk-through
Page 268
Page 268
In this exercise, we’ll change the fonts for the body and main heading of the Black Goose Bistro menu document, menu.html, which is available in your Classroom folder.
Open the menu.html document in a text editor. Likewise, open menu.html in a web browser.
1. You will use an internal style sheet for this exercise. Add a style element in the head of the document, like this:
<head>
<title>Black Goose Bistro</title>
<style>
</style>
</head>
2. Make the main text to appear in Verdana or some other sans-serif font. Instead of writing a rule for every element in the document, write one rule for the body element that will be inherited by all the elements it contains. Add this rule to the embedded internal style sheet:
<style>
body {font-family: Verdana, sans-serif;}
</style>
3. Use Marko One font from Google Web Fonts (www.google.com/webfonts) for the “Black Goose Bistro, Summer Menu” headline. Google supplies the code for linking that font file on their server to the HTML file (it’s actually a link to an external style sheet). That code must be placed in the head of the document, right after the title element and before the style element.
<head>
<title>Black Goose Bistro</title>
<link href="http://fonts.googleapis.com/css?family=Marko+One" rel="stylesheet">
<style>
4. Write a rule that applies that font to the h1 element. Use Georgia or another serif font as fallbacks:
<style>
body {font-family: Verdana, sans-serif;}
h1 {font-family: "Marko One", Georgia, serif;}
</style>
Save the document and reload the page in the browser. It should look like below. Note that you’ll need to have an internet connection and a current browser to view the Marko One headline font.
Read pages 269-272 before starting Exercise 12-2.
Read pages 269-272 before starting Exercise 12-2.
What you need to know for this exercise
What you need to know for this exercise
The font-size property specifies the size of the text, e.g. h1 { font-size: 16px; }
The default browser font size is 16px.
Some of the more common font size measurements are: em, px, and %.
Em units are based on the font size of the current element (p. 270).
The unit of measurement must immediately follow the number, thus
margin: 2 em; is incorrect, and should be:
margin: 2em;
Exercise 12-2 Walk-through
Exercise 12-2 Walk-through
Page 273
Page 273
To give the online menu a more sophisticated appearance, different font-sizes will be used.
1. In the body selector, set the font-size to 100%:
body {
font-family: Verdana, sans-serif;
font-size: 100%;
}
2. The browser's default font size is 16px. To make the main heading (enclosed in an h1 element) have a font size of 25 pixels, set the font size to 1.5em in the h1 selector.
body {
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
font-family: "Marko One", Georgia, serif;
font-size: 1.5em;
}
3. Make the h2 elements the same size as the body text by using 1em. Apply the font-size property to an h2 selector in the style element.
body {
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
font-family: "Marko One", Georgia, serif;
font-size: 1.5em;
}
h2 {
font-size: 1em;
}
Save the document and reload the page in the browser. It should look like below.
Read pages 273-274 before starting Exercise 12-3.
Read pages 273-274 before starting Exercise 12-3.
What you need to know for this exercise
What you need to know for this exercise
The font-weight property is used to adjust the boldness of the type.
The font-weight values are normal, bold, bolder, lighter, and nine numeric values (100 to 900) for targeting various weights of a font.
The font-style property specifies if the text should be vertical (normal) or slanted (italic and oblique), for example:
p { font-style: italic; }
Exercise 12-3 Walk-through
Exercise 12-3 Walk-through
Page 275
Page 275
1. The dt (definition term) elements in the HTML (there are two of them) need to be in bold text. Rather than use the <b> tag, use the font-weight property to set those elements to bold. Add a dt selector to the style element:
body {
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
font-family: "Marko One", Georgia, serif;
font-size: 1.5em;
}
h2 {
font-size: 1em;
}
dt {
font-weight: bold;
}
2. Make the text marked as strong italic so it stands out better. Create a strong selector in the style element with the font-style property and a value of italic.
body {
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
font-family: "Marko One", Georgia, serif;
font-size: 1.5em;
}
h2 {
font-size: 1em;
}
dt {
font-weight: bold;
}
strong {
font-style: italic;
}
Save the document and reload the page in the browser. It should look like below.
Read pages 275-277 before starting Exercise 12-4.
Read pages 275-277 before starting Exercise 12-4.
What you need to know for this exercise
What you need to know for this exercise
The font-variant property can be used to set the type to small-caps.
The font-stretch property allows you to condense or extend fonts by stretching or squeezing together text.
The shorthand font property allows you to put all the font-related properties into one rule.
Exercise 12-4 Walk-through
Exercise 12-4 Walk-through
Page 277
Page 277
Replace all the font properties in the h1 element into the shorthand font property. Change
h1 {
font-family: "Marko One", Georgia, serif;
font-size: 1.5em;
}
into
h1 {
font: bold 1.5em "Marko One", Georgia, serif;
}
With shorthand properties, any omitted value is reset to the default, hence the 1.5em value is used here to keep the h1 element at 1.5em in size.
Save the document and reload the page in the browser. It should look like below.
Read pages 278-285 before starting Exercise 12-5.
Read pages 278-285 before starting Exercise 12-5.
What you need to know for this exercise
What you need to know for this exercise
You can change the color of text with the color property.
The value of the color property can be the name of a color, its hex value (e.g. #666666), or its rgb value (e.g. rgb(102,102,102)).
In addition to using element name as selectors, there are descendant selectors, ID selectors, and class selectors.
Element selectors can be grouped together in a comma-separated list, such as p, ul, td, th { color: navy; }
A descendant selector targets elements that are within (and therefore are descendants of) another element. For example, the
dt strong { color: olive; } descendant selector would apply to the text inside the <strong> element here:
<dt><strong>Spicy chicken</strong></dt>
An ID selector targets any element with its id reference. For example, the text below has an id reference:
<p id="major">Something appeared in our garden</p>
The style rule just for that p tag would use an ID selector as shown here, using the # symbol:
p#major { color: olive; }
A class selector targets multiple elements with its reference. Thus, p.special { color: orange; } would target all p tags marked up with class="special".
Exercise 12-5 Walk-through
Exercise 12-5 Walk-through
Page 286
Page 286
1. Change all text marked up with the strong element to the color tomato. Add to the style section a descendant selector that applies the color property to all strong elements that are within dt elements.
dt strong {
color: tomato;
}
2. Apply a teal color to the text in the div element with the ID “info”. Add the following class selector to the bottom of the style section:
#info {
color: teal;
}
3. Make the paragraphs inside the ID "info" section italic. A contextual selector is used so only those paragraphs are selected. Add the following class selector to the bottom of the style section:
#info p {
font-style: italic;
}
4. All the prices on the menu have been marked up with the span element with the class "price". Create a rule using a class selector to change the font to Georgia or some serif font, italic, to make the prices italic, and to color them grey. Add the following class selector to the bottom of the style section:
.price {
font-family: Georgia, serif;
font-style: italic;
color: gray;
}
5. Use the following class selector to apply these font properties all span elements with the class "label":
.label {
font-weight: bold;
font-variant: small-caps;
font-style: normal;
}
6. Make the warning at the bottom of the page small and red. Use a class selector to make all p tags marked up with class ="warning" and the sup element. Add this to the bottom of the style element:
p.warning, sup {
font-size: small;
color: red;
}
The style section will now appear as follows:
body {
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
font: bold 1.5em "Marko One", Georgia, serif;
}
h2 {
font-size: 1em;
}
dt {
font-weight: bold;
}
strong {
font-style: italic;
}
dt strong {
color: tomato;
}
#info {
color: teal;
}
#info p {
font-style: italic;
}
.price {
font-family: Georgia, serif;
font-style: italic;
color: gray;
}
.label {
font-weight: bold;
font-variant: small-caps;
font-style: normal;
}
p.warning, sup {
font-size: small;
color: red;
}
Save the document and reload the page in the browser. It should look like below.
Read pages 287-294 before starting Exercise 12-6.
Read pages 287-294 before starting Exercise 12-6.
What you need to know for this exercise
What you need to know for this exercise
Text line adjustments
The line-height property defines the minimum distance between the lines of text.
The text-indent property indents the first line of text by a specified amount.
The text-align property aligns text. Its values are left, right, center, or justify. This property is very frequently used, as it is used to replace the obsolete <center> tag.
Other text modifiers
The text-decoration property allows you to put a line under, over, or through text, or if you’d like, to turn off the underline under links.
The text-transform property to a text element, it changes its capitalization.
The letter-spacing property inserts space between letters.
The word-spacing property inserts space between words.
The text-shadow property adds a “shadow” below your text.
Exercise 12-6 Walk-through
Exercise 12-6 Walk-through
Page 295
Page 295
1a. Change the font-family property value in the body element from Verdana and sans-serif to Georgia and serif. Change this
body {
font-family: Verdana, sans-serif;
font-size: 100%;
}
to this
body {
font-family: Georgia, serif;
font-size: 100%;
}
1b. Use the line-height property in the body element to open up the text lines and make them easier to read. Change this:
body {
font-family: Georgia, serif;
font-size: 100%;
}
to this:
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 1.75em;
}
2a. Remove the teal color setting by deleting that whole rule. Remove these lines:
#info {
color: teal;
}
2b. Make the h1 olive green. Change this
h1 {
font: bold 1.5em "Marko One", Georgia, serif;
}
to this
h1 {
font: bold 1.5em "Marko One", Georgia, serif;
color: olive;
}
2c. Make the paragraph in the header gray. In the #info.p selector, change this
#info p {
font-style: italic;
}
to this:
#info p {
font-style: italic;
color: gray;
}
3. Create a new rule with a grouped selector to center the headings (that would be h1 and h2) and the “info” section. To do this, separate h1, h2, and #info with commas, and add the grouped selector to the style element, like this:
h1, h2, #info {
text-align: center;
}
4. The h2 headings need to be all uppercase letters, with extra letter spacing, and the color olive. Change the h2 selector in the style section from this,
h2 {
font-size: 1em;
}
to this
h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: .5em;
color: olive;
}
5. Center the paragraphs that are right after the h2 headings. This special selector is called a next-sibling selector (p. 283).
For example, this next-sibling rule,
h1 + p {font-style: italic;}
makes any paragraphs that follow an h1 have the italic font style. Other paragraphs are unaffected.
To do center the paragraphs that are right after the h2 headings, place the following selector as the last selector in the style element:
h2 + p {
text-align: center;
font-style: italic;
}
Now every paragraph, <p>, that follows an h2 element will be centered and in italic.
6. Add the "sienna" color to the dt elements. In the style element, change the dt property from this,
dt {
font-weight: bold;
}
to this:
dt {
font-weight: bold;
color: sienna;
}
7. Make the h1 heading stand out by using the drop shadow property. In the style element, add to the h1 selector,
h1 {
font: bold 1.5em "Marko One", Georgia, serif;
color: olive;
}
the text-shadow property:
h1 {
font: bold 1.5em "Marko One", Georgia, serif;
color: olive;
text-shadow: .05em .05em .1em lightslategray;
}
The final style element will be as follows:
The final style element will be as follows:
<style>
body {
font-family: Georgia, serif;
font-size: 100%;
line-height: 1.75em;
}
h1 {
font: bold 1.5em "Marko One", Georgia, serif;
color: olive;
text-shadow: .05em .05em .1em lightslategray;
}
h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: .5em;
color: olive;
}
dt {
font-weight: bold;
color: sienna;
}
strong {
font-style: italic;
}
dt strong {
color: tomato;
}
#info p {
font-style: italic;
color: gray;
}
.price {
font-family: Georgia, serif;
font-style: italic;
color: gray;
}
.label {
font-weight: bold;
font-variant: small-caps;
font-style: normal;
}
p.warning, sup {
font-size: small;
color: red;
}
h1, h2, #info {
text-align: center;
}
h2 + p {
text-align: center;
font-style: italic;
}
</style>
Save the document and reload the page in the browser. It should look like below.
Report abuse