1 - Lab Activity On CSS

In this exercise, well add font properties to the Black Goose Bistro menu document.
Open the document in a text editor. You can also open it in a browser to see its before
state.
It should look similar to the page shown in Figure 12-1.

Figure 12-1. Before and after views of the Black Goose Bistro menu that well be working on in
this activity.

Hang onto this document, because this exercise will continue as we pick up additional font
properties.

1. Were going to use an embedded style sheet for this exercise. Start by adding a style
element with its required type attribute to the head of the document (remember, the only place
a style element can go is in the head), like this:

<head>
<title>Black Goose Bistro</title>
<style type="text/css">
</style>
</head>
2. I would like all the text on the page to appear in Verdana or some other sans-serif font.
Instead of writing a rule for every element in the document, we will write one rule for the body
element that will be inherited by all the elements it contains. Add this rule to the embedded style
sheet.

<style type="text/css">
body {font-family: Verdana, sans-serif;}
</style>

Save the document and reload the page in the browser. It should look like Figure 12-3.

3. Well work on the font size in the next installment.

Figure 12-3. The menu in the Verdana or sans-serif font.
Lets refine the size of some of the text elements to give the online menu a more
sophisticated appearance.
Follow the steps below.
You can save the document at any point and take a peek in the browser to see the
results of your work.
You should also feel free to try out other size values along the way.

1. I would prefer that the body text for the document appear smaller than the common 16 pixel
default. I am going to set the size of the body to small, which renders at approximately 12
pixels on most current browsers. If it ends up too small for some users, they can always zoom
the text up, since it was specified with a keyword.

body { font-size: small; }
2. Now lets get that giant h1 under control. Im going to make it one and a half times larger than
the body text size with an em measurement. I could also use font-size: 150% to accomplish the
same thing.

h1 { font-size: 1.5em; }

Figure 12-7 shows the result of our font sizing efforts.

Figure 12-7. The online menu after a few minor font-size changes. (font-size is set to small)
I want to point out that at this point, I dont really know exactly how many pixels tall the
h1s will be for every user.
Theyre likely to be 18 pixels, but they may be smaller or much larger.
The important part is that Ive set my desired proportion of h1 elements to the
surrounding text. If the user resizes or zooms the text, that proportion stays the same.

Back to the menu. Ive decided that Id like all of the menu item names to be in bold text.
What Im not going to do is wrap each one in <b> tags... that would be so 1996!
Im also not going mark them up as strong elements... that is not semantically accurate.
Instead, the right thing to do is simply apply a style to the semantically correct dt
(definition term) elements to make them all bold at once.
Add this rule to your style sheet, save the file, and try it out in the browser (Figure 12-9).

dt { font-weight: bold; }

Figure 12-9. Using the font-weight property to dt elements in the menu.
Now that all the menu item names are bold, some of the text Ive marked as strong isnt
standing out very well, so I think Ill make them italic for further emphasis.
To do this, simply apply the font-style property to the strong element.

strong { font-style: italic;}

Once again, save and reload.
Itshould look like the detail shown inFigure 12-11.

Figure 12-11. Applying the font-style property to the strong elements.
Just for kicks, lets set the first level heading (h1) in small caps so we can try out this
font-variant property.
Remember that you can add this property to the existing h1 rule.
The result is shown in Figure 12-12.
If you find it kind of clunky, dont worry, well be undoing it later.

h1 {
font-size: 1.5em;
font-variant: small-caps;
}

Figure 12-12. Using font-variant for small caps. (h1 in small caps)
Next, I want the h2 headings to be in a bold, Georgia (serif ) typeface to stand out from
the surrounding text.
I also want it to be 1.2 times larger than the body font.
Instead of writing out three declarations, well combine them in one shorthand font
property.
Add this rule to the style sheet, save your work, and take another look in the browser
(Figure 12-13).
Notice that the font-size and font-family are next to one another and are the last things
in the list of values.

h2 { font: bold 1.2em Georgia, serif; }
You might find it redundant that I included the bold fontweight value in this rule.
After all, the h2 elements were already bold, right?
The thing about shorthand properties is that if you omit a value, it is reset to the default
value for that property; it doesnt just leave it the way it was before.
In this case, the default value for font-weight is normal.
Because a style sheet rule weve written overrides the browsers default bold rendering
of headings, the h2s would appear in normal weight text if we dont explicitly make them
bold in the font property.
Shorthand properties can be tricky that way... pay attention that you dont leave
something out and override a default or inherited value you were counting on.

Figure 12-13. Changing multiple properties for h2 elements with the shorthand font Property
(before and after {font: bold 1.2em Georgia, serif;} ).

This time, we'll add a few more style rules using descendant, ID, and class selectors
combined with the font and color properties weve learned about so far.

1. Id like to add some 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 element. Add this
rule to the embedded style sheet, save the file, and reload it in the browser.

strong { color: maroon; }

That worked, but now the strong element Very spicy in the description is maroon, too, and
thats not what I want. The solution is to use a contextual selector that targets only the strong
elements that appear in dt elements. Try this and take a look.

dt strong { color: maroon; }
2. Look at the document source and you will see that the content has been divided into three
unique divs: header, appetizers, and main. We can use these to our advantage when it comes
to styling. For now, lets do something simple and make all the text in the header teal. Because
color inherits, we only need to apply the property to the div and it will be passed down to the h1
and p.

#header { color: teal; }
3. Now lets get a little fancier and make the paragraph inside the header italic in a way that
doesnt affect the other paragraphs on the page. Again, a contextual selector is the answer. This
rule selects only paragraphs contained within the header section of the document.

#header p { font-style: italic; }
4. I want to give special treatment to all of the prices on the menu. Fortunately, they have all
been marked up with span elements, like this:

<span 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 and make them italic.

.price {
font-style: italic;
font-family: Georgia, serif;
}
5. Similarly, I can change the appearance of the text in the header that has been marked up as
belonging to the label class to make them stand out.

.label {
font-weight: bold;
font-variant: small-caps;
font-style: normal;
}
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 Im at it, Im going to apply the same style to the sup element (the footnote
asterisk) earlier on the page so they match. Note that Ive used a grouped selector so I dont
need to write a separate rule.

p.warning, sup {
font-size: x-small;
color: red;
}
Figure 12-15 shows the results of all these changes.

Figure 12-15. The current state of the Black Goose Bistro online menu.
Finishing up the menu
Lets add a few finishing touches to the online menu. It might be useful to save the file and look
at it in the browser after each step to see the effect of your edits and to make sure youre on
track.

1. First, I have a few global changes to the body element in mind. Ive had a change of heart
about the font-family. I think that a serif font such as Georgia would be more sophisticated and
appropriate for a bistro menu. Lets also use the lineheight property to open up the text lines
and make them easier to read. Make these updates to the body style rule, as shown:

body {
font-family: Georgia, serif;
font-size: small;
line-height: 175%;
}
2. I also want to redesign the header section of the document. First, remove the teal color
setting by deleting that whole rule. Get rid of the font-variant property for the h1 element as
well. Once that is done, make the h1 purple and the paragraph in the header gray. You can just
add color declarations to the existing rules.

#header { color: teal; } /* delete */
h1 {
font-size: 1.5em;
font-variant: small-caps; /* delete */
color: purple; }
#header p {
font-style: italic;
color: gray; }

3. Next, to imitate a fancy print menu, Im going to center a few key elements on the page using
the text-align property. Write a rule with a grouped selector to center the whole header div, the
h2 elements, and the paragraphs contained within the appetizer and entrees divs, like this:

#header, h2, #appetizers p, #entrees p { text-align: center; }

4. I want to make the Appetizer and Main Courses h2 headings kind of special. Instead of
large, bold type, Im actually going to reduce the font-size, and use all uppercase letters, extra
letter spacing, and color to call attention to the headings. Heres the new rule for h2 elements
that includes all of these changes.

h2 {
font: bold 1em Georgia, serif; /* reduced from 1.2 em */
text-transform: uppercase;
letter-spacing: 8px;
color: purple; }
5. Were really close now; just a few more tweaks. Add a rule using contextual selectors that
makes the paragraphs in the Appetizers and Main Courses sections italic.

#appetizers p, #entrees p { font-style: italic; }

6. Finally, well add a softer color to the menu item names (in dt elements). Note that the strong
elements in those dt elements stay maroon because the color applied to the strong elements
overrides the color inherited by their parents.

dt {
font-weight: bold;
color: olive;}

And were done! Figure 12-22 shows how the menu looks now...an improvement over
the unstyled version, and we used text properties to do it.
Notice that we didnt touch a single character of the document markup in the process.
Thats the beauty of keeping style separate from structure.

Figure 12-22. The formatted Black Goose Bistro menu.

1 - Lab Activity On CSS

Uploaded by

Copyright:

Available Formats

1 - Lab Activity On CSS

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1 - Lab Activity On CSS

Uploaded by

Copyright:

Available Formats

In this exercise, well add font properties to the Black Goose Bistro menu document.

You might also like