HTML and CSS Reference
In-Depth Information
Test your
knowledge of
CSS to design
text and color
styles for a
children's choir
Web site.
Case Problem 4
Data Files needed for this Case Problem: chen.png, choirtxt.htm, gcc_layout.css,
gcc_stylestxt.css, gcclogo.png, modernizr-1.5.js, nobile.txt, nobile-webfont.eot,
nobile-webfont.svg, nobile-webfont.ttf, nobile-webfont.woff
Gresham Children's Choir
Faye Dawson is the program director for Gresham Children's
Choir in Mentor, Ohio. The choir offers a chance for talented youth to perform and to
learn about music history. Faye is working on redesigning the choir's Web site and has
asked for your help. She already has created a sample Web page for you to work on and
has developed a page layout. She wants you to complete the design by creating styles for
the text and colors in the page.
Complete the following:
1. Use your text editor to open the
choirtxt.htm
and
gcc_stylestxt.css
fi les from the
tutorial.03\case4 folder. Add
your name
and
the date
in the comment section of
each fi le. Save the fi les as
choir.htm
and
gcc_styles.css
, respectively.
2. Go to the
choir.htm
fi le in your text editor and link the fi le to the
gcc_layout.css
fi le. Take some time to study the content and structure of the document. Save your
changes to the fi le and then view the current layout in your Web browser.
3. Go to the
gcc_styles.css
fi le and create a style sheet with style rules that:
• modify the typeface, font weight, font size, kerning, and line height
• employ a Web font
• modify the appearance of list items
• change the text and background color, including at least one example of a semi-
transparent color
• employ contextual selectors, pseudo-elements, and pseudo-classes
• create rollover effects
• employ progressive enhancement
Document all of your work with informative style comments.
4. Add an embedded style sheet to the
choir.htm
fi le to apply a style rule of your own
choosing to that page only.
5. Test your Web site in a variety of browsers to ensure your design works under differ-
ent conditions.
6. Submit your completed fi les to your instructor, in either printed or electronic form,
as requested.
ENDING DATA FILES
tutorial.03
tutorial
review
case1
haunted.htm
home.htm
maze.htm
petting.htm
produce.htm
sa_styles.css
holiday.htm
hs_styles.css
crypt.htm
c_styles.css
case2
case3
case4
bmtour.htm
mw_styles.css
civilwar.htm
cw_styles.css
choir.htm
gcc_styles.css
