Overview

Now it's time for the second lesson on cascading style sheets. In the first lesson, we explored three methods for using style sheets: external styles, document-level styles, and inline styles. We also discussed how these three styles interact with one another and learned which styles take precedence, or "cascade," over others. We also explored style classes.

Although CSS seems very powerful, we were able to observe only a few properties affecting the <H3> tag. It's time to explore the properties available to us and to apply these properties to a diverse assortment of tags. Let's learn more about CSS properties.

Font and text properties come first. Cascading style sheets make a distinction between font properties and text properties. Font properties control text size, style, and formatting. Text properties determine text alignment and kerning, and they allow a first-line indent.

Font properties allow us to call out font sizes in points, pixels, percentages, ems, and keywords. Quite a tongue-twister!! Just deciding what unit of measure to use can be a challenge. The "font-family," "font-weight," and "font-style" properties are also used.

My favorite text property, "line-height," allows us to control the leading, the spaces between lines of text. This value can be assigned in a wide variety of ways, just like the font-size property. Next comes "text-decoration." Text properties also allow us to justify text and set a first-line indent. This may not sound like a big deal, but for years these two tricks were very difficult to achieve with HTML tags. There were many clunky work-arounds, but no clean and simple solution. Well … with CSS properties, the problem is solved.

Color and background properties can really cut down on the amount of code you need to type. Have any of you ever created a table with one row and one cell just so you could create a text block with a pale blue background? Well, throw out the table tags and give your tired fingers a rest. Using the "background-color" property, you can assign a text block, list item, or table element any background color you choose. There are also the "color," "background-image," and "background-repeat" properties.

By using box properties, we have an opportunity to think both "inside" and "outside" the box. CSS assumes that all elements on a Web page fit into a rectangle. Box properties allow you to control the size, appearance, and position of these boxes and the elements they contain. Learning about this group of styles can feel a bit like studying geometry - but don't be alarmed, we will use just a few simple properties.

Finally, we will use CSS properties that allow us to control the appearance of items in ordered and unordered lists. We can identify an image to mark each list item (bye-bye, bullets). The "list-style-type" property allows us to control text symbols or numbers assigned to list items. CSS classes can come in handy when we are creating complex lists.

There are lots of new properties to use, so let's get started.

instructor contact information
c. sumner - chaela@webgoddessdesign.com
c. massell - cmassell@santarosa.edu

copyright 2005 linda hemenway