HTML and CSS Reference
CSS to design
text and color
styles for a
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-
• 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-
6. Submit your completed fi les to your instructor, in either printed or electronic form,
ENDING DATA FILES