HTML and CSS Reference
In-Depth Information
3
TUTORIAL
Designing a Web
Page with CSS
Creating a Web Site for a Rural Farm
OBJECTIVES
Session 3.1
• Explore the history and theory
of CSS
• Defi ne a style rule
• Study style precedence and
inheritance
• Apply color using CSS
• Explore CSS3 color extensions
Case |
Sunny Acres
Tammy Nielsen and her husband, Brent, live and work at Sunny
Acres, a 200-acre farm near Council Bluffs, Iowa. Over the past
25 years, the Nielsen family has expanded the farm's operations to
include a farm shop, which sells fresh produce, baked goods, jams,
jellies, and gifts; a pick-your-own garden, which operates from May
through October and offers great produce at discounted prices; a
petting barn with over 100 animals and the opportunity to bottle-
feed the baby animals; a corn maze with over 4 miles of twisting
trails through harvested corn fi elds; and a Halloween Festival featur-
ing the corn maze haunted with dozens of spooky effects and tricks.
The farm also hosts special holiday events during the winter.
Session 3.2
• Use contextual selectors
• Work with attribute selectors
• Apply text and font styles
• Install a Web font
Session 3.3
• Defi ne list styles
• Use pseudo-classes and
pseudo-elements
• Create a rollover effect
Tammy created a Web site for Sunny Acres several years ago to
make information about the farm easily accessible to her customers.
The Web site has become outdated, so Tammy would like to enliven
it with a new design based on the latest elements and styles from
HTML and CSS. Tammy's knowledge of HTML and Web styles is
limited, so she's come to you for help in creating a new look for the
Sunny Acres Web site.
STARTING DATA FILES
tutorial.03
tutorial
review
case1
haunttxt.htm
hometxt.htm
mazetxt.htm
pettingtxt.htm
producetxt.htm
sa_stylestxt.css
+ 1 style sheet
+ 7 graphic fi les
+ 4 Web fonts
+ 1 text fi le
modernizr-1.5.js
holidaytxt.htm
hs_stylestxt.css
+ 1 style sheet
+ 3 graphic fi les
+ 4 Web fonts
+ 1 text fi le
modernizr-1.5.js
crypttxt.htm
c_stylestxt.css
+ 5 HTML fi les
+ 1 style sheet
+ 3 graphic fi les
modernizr-1.5.js
case2
case3
case4
demo
bmtourtxt.htm
mw_stylestxt.css
+ 1 style sheet
+ 2 graphic fi les
modernizr-1.5.js
civilwartxt.htm
cw_stylestxt.css
+ 1 style sheet
+ 3 graphic fi les
modernizr-1.5.js
choirtxt.htm
gcc_stylestxt.css
+ 1 style sheet
+ 2 graphic fi les
+ 4 Web fonts
+ 1 text fi le
modernizr-1.5.js
demo_color_names.htm
demo_css.htm
+ 3 graphic fi les
HTML 137
