Lesson 2: Applying Styles
In the previous lesson you learned the basic anatomy of a CSS style, and applied this knowledge by stylizing the h1 tag in your portfolio home page. In the current lesson, you will learn more about CSS and will apply style to your entire web page.
At the completion of this exercise:
- you will be able to apply CSS to a variety of XHTML elements.
- Visit csszengarden.com to see the creative potential of CSS.
- Open your portfolio's index.htm file with your text
- For at least five of the HTML elements that appear within the body of
create a CSS style declaration within the STYLE section of your page. The
five elements do not include body and h1, which you've
For each of the five elements (known in the STYLE section as
"selectors"), apply at
least one property, but preferably more than one where it makes sense to
do so. Note: By now, the body of your web page should
contain the following elements: body, h1, h2,
h3, a, hr, p, ul,
ol, and li. Follow these guidelines:
- Use the Web Design Group CSS Properties website for an organized list of available properties.
- Additional resources are listed in the Resources section below
- One of the properties you may define for most elements is color. Use a consistent color scheme. Remember you can use a web based tool for that task such as the Wellstyled Color Scheme Generator or the VisiBone Webmaster's Color Lab.
- Whenever you have the choice between absolute or relative values choose relative values.
- Save and check your work often.
- Experiment with different styles to see how they effect your document. Have fun!
After you have saved the changes to index.htm, open the file in your browser. Refresh your browser and study each of the changes.
Show your instructor your results before starting Lesson 3.
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-0540615). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.