Understand and Use CSS Properties

As you have discovered, selectors enable you to apply styles to specific portions of an XHTML document. In the sections that follow, you will learn how to use properties. To keep it simple, think of properties as governing four general areas of page design: fonts, text, colors-backgrounds, and box properties (margins, padding, borders, and so on). There is much more to CSS than these four groups of properties, but this will give you plenty to start with.

In addition, this next section is designed to give you some more practical experience with CSS. As you read through the list of properties, type in the code following each one; gradually you will build a sample style sheet to incorporate into the plain Web page you created at the beginning of the chapter.

Use Font Properties for Controlling Font Display

Font properties enable you to apply styles to the fonts on your page. With these properties you can specify different fonts: their sizes, styles, weights, and so on. As each of the properties is listed, it will be added to the style rule for the <p> element. To see how it displays, import it into your original sample page. Try experimenting with CSS by substituting different values in the various declarations. Your choices for font properties are as follows:

Did You Know?—What's the difference between CSS 1, CSS 2, and CSS 3?

The different numbers refer to three successive CSS “versions” or “recommendations” by the W3C. The current version is CSS 2. CSS 3 is still under development. Because many of the new properties added in CSS 2 are not widely supported by the browsers, much of CSS 2 still cannot be used effectively in Web pages. For the most part, this book focuses on the selectors and properties of CSS 1. A complete listing of CSS 1 selectors and properties, along with some of the better-supported properties of CSS 2, can be downloaded from the author's Web site at www.jamespence.com, or Osborne's Web site at www.osborne.com.

Note

Throughout these property sections, you will be able to build some style rules for a sample document. It is not necessary to rewrite each line of code; the new additions are indicated in bold type. Also, you will notice that these style rules make use of most of the different length measurements. This is so that you can experiment with them and see the results that they give you.

• Font-family Allows you to specify the font you want to display. Although you can choose any font you’d like, remember that if the font is not on your visitor’s system, the browser will substitute a default font. Generic values for font-family are serif, sans-serif, monospaced, cursive, and fantasy.

       p { font-family: sans-serif; }

• Font-style Toggles between normal and italic fonts. A third possible value is oblique, but this generally displays as italic.

       p {font-family: sans-serif; font-style: italic; }

• Font-variant Enables you to display a font as small caps. The possible values to choose from are, as you would expect, normal and small caps.

        p {font-family: sans-serif; font-style: italic;     font-variant: small-caps; }

• Font-weight Offers a greater range of choices than HTML’s bold <b> element. You can specify values by descriptive terms such as normal, bold, lighter, and bolder, or with a numerical value of 100 through 900 (in increments of 100).

        p {font-family: sans-serif; font-style: italic;       font-variant: small-caps; font-weight: 700;}

Did You Know?—What Is the Difference Between the Generic Fonts?

A serif font has decorative strokes at the ends of each character. These strokes are called ascenders and descenders, but are generally known as serifs. For example, Times New Roman is a serif font (and is used here). A sans-serif font has no ascenders or descenders. Arial is an example of a sans-serif font. A monospace font generally is a courier or “typewriter”-style font. Cursive fonts attempt to simulate handwritten script. Fantasy fonts tend to be anything a particular browser finds that doesn't fit into one of the preceding categories.

• Font-size Sets you free from HTML’s seven-step font sizes. This property enables you to specify font sizes with nine different measurements: inches (in), millimeters (mm), centimeters (cm), points (pt), picas (pc), pixels (px), ems (em), exs (ex), and percentages (#%).

        p {font-family: sans-serif; font-style: italic;      font-variant: small-caps; font-weight: 700;      font-size: 14pt;}

• Color Enables you to choose colors for your fonts by using color names or their hexadecimal or RGB values.

        p {font-family: sans-serif; font-style: italic;      font-variant: small-caps; font-weight: 700;      font-size: 14pt; color: blue;}

Applying this style rule to the original plain text HTML page produces these results:

Apply Text Properties for Spacing and Alignment

Whereas font properties deal with size, color, weight, and style of fonts, text properties handle the more mundane tasks of dealing with character and line spacing, alignment, justification, and so on. The text properties enable you to arrange your page with far greater precision than you ever could with HTML. For example, you can specify details such as the following:

• Word-spacing With this property you can specify additional space between words using the same types of measurements as with font-size. The default is normal.

       h1 {word-spacing: .1em;}

• Letter-spacing As its name suggests, letter-spacing allows you to add to the default spacing between letters. Again, normal is the default.

       h1 {word-spacing: .1em; letter-spacing: .2cm; }

• Text-decoration With text-decoration you can add the values of underline, overline, line-through, and blink. The default value is text-decoration: none.

        h1 {word-spacing: .1em; letter-spacing: .2cm;      text-decoration: underline; }

• Vertical-align This allows you to apply the same vertical alignment properties to text elements as you did with text alignment attributes in HTML. Values include baseline, sub, super, top, text-top, middle, bottom, text-bottom, and percentage.

        h1 em {vertical-align: super;}

  Note

  Notice that in addition to the h1 selector, this line also has em added. This is called a descendent selector. By adding an element to the selector, you can create styles for specific contexts. To create a superscript in an h1 headline, simply enclose the words you want to superscript in a set of <em></em> tags.

• Text-transform With the text-transform property, you can automatically capitalize every word in any given element, change them all to uppercase, or make them all lowercase.

        h1 {word-spacing: .1em; letter-spacing: .2cm;      text-decoration: underline;      text-transform: capitalize;}

• Text-align The text-align property works essentially the same way as the align attribute. You can choose from values of left, right, center, and justify.

        h1 {word-spacing: .1em; letter-spacing: .2cm;      text-decoration: underline;      text-transform: capitalize;      text-align: center; } 

• Text-indent Using text-indent frees you from the old convention of using the non-breaking space entity, &nbsp;, for indenting. Using this property, you can specify exactly what kind of indent you would like. The possible values are a number, a measurement, and a percentage.

  p {font-family: sans-serif; font-style: italic;      font-variant: small-caps; font-weight: 700;      font-size: 14pt; color: blue;      text-indent: .5in;}

• Line-height If you want to space lines farther apart than the default setting for a browser, use the line-height property. You can specify line-height by a number, a measurement, or a percentage.

  p {font-family: sans-serif; font-style: italic;      font-variant: small-caps; font-weight: 700;      font-size: 14pt; color: blue;      text-indent: .5 in; line-height: 1em;}

Try adding these modified rules to your css_sample.htm document and compare your results to the following illustration:

Use Color and Background Properties

As you might imagine from the name, color and background properties enable you to control the display of background images and colors. These properties work much the same way as the bgcolor and background attributes but give you many more options to work with. The color and background properties are as follows:

• Background-color With HTML you were able to set the background color for only an entire page or individual table cells. The CSS background-color property enables you to set a background color for any element.

       body {background-color: yellow; }

• Background-image With this property you can set a background image for any element, not just for a page.

  Tip

  If you are working through this example, you can supply any image you have in place of weavetile.gif. If you want to try to copy the page exactly, then you can download weavetile2.gif, along with the rest of the code and images, from this book at the author’s Web site, www.jamespence.com.

        body {background-color: yellow;              background-image: url(weavetile2.gif); }

• Background-repeat This property allows you a much greater range of choices in how a background image repeats on your page. You can choose to have the image repeat (tile) through the entire page, repeat horizontally or vertically, or not at all. The values are repeat, repeat-x (horizontal), repeat-y (vertical), and no-repeat.

       body {background-color: yellow;              background-image: url(weavetile2.gif);             background-repeat: repeat-y; }

• Background-attachment To create a watermark effect with a fixed background image that allows content to scroll, you can use the background-attachment property. Your options are scroll or fixed.

        body {background-color: yellow;              background-image: url(weavetile2.gif);             background-repeat: repeat-y;             background-attachment: scroll; }

• Background-position With the background-position property you can specify where an image occurs in an element. You can describe the position in terms of top/center/ bottom and left/center/right. In other words, you can specify an image to show up in the top right, center, bottom left, and so on.

       body {background-color: yellow;              background-image: url(weavetile2.gif);             background-repeat: repeat-y;             background-attachment: scroll;             background-position: left;}

Copy the preceding style rule into your Web page, and then save and display it. It should resemble the following illustration:

Note

With background-position and other position-related properties, the positioning is relative to an imaginary “box” that surrounds the element. If you would like to visualize what that box looks like with one element, open an HTML page and modify any <h1> element to read <h1 style "background-color: blue>". The h1 element will now appear with a blue rectangle behind it. That’s the invisible box. When you specify background position with any element, the background image is placed relative to the invisible box around that element, not the entire page—unless, of course, you are modifying the <body> element.

Control Margins, Padding, and Borders with Box Properties

Perhaps the most complicated (and useful) properties are the box properties. These allow you much greater influence over positioning, layout, borders, text flow, and so on, than you ever could have with HTML. To better understand how the box properties work, envision each element on your page as being contained in a box. You can add padding around the element, a border around the edge of the box, and margins around the outside of the box (and between other elements). Figure 10-1 illustrates the CSS box model.

Figure 10-1: The Box Model

With the box properties, you can influence the layout of your entire page. These properties can take quite a while to master, but they are great tools to have at your disposal. They are as follows:

• Margin-top (right, bottom, left) With the margin properties, you can specify margins in measurements or percentages. If you don’t specify margins, the browser will set them automatically (this can also be specified as “auto”). The following sets left and right margins to one inch:

       body {background-color: yellow;             background-image: url(weavetile2.gif);             background-repeat: repeat-y;             background-attachment: scroll;              background-position: left;             margin-left: 1in; margin-right: 1in;}

• Padding-top (right, bottom, left) If you think about tables and the cell-padding attribute, you will understand how padding works. Now, you don’t need to be limited to individual cells—you can add padding to any element.

       p {font-family: sans-serif; font-style: italic;          font-variant: small-caps; font-weight: 700;          font-size: 14pt; color: blue;          text-indent: .5 in; line-height: 1em;          padding: .25in .50in;}

• Border-style If you want to add a border to any element, you can do it with this property. You can choose from eight possible options: solid, dashed, dotted, inset, outset, ridge, groove, or double.

       p {font-family: sans-serif; font-style: italic;          font-variant: small-caps; font-weight: 700;          font-size: 14pt; color: blue;          text-indent: .5 in; line-height: 1em;          padding: .25in .50in;          border-style: inset;}

• Border-color This property enables you to set the color for a border. You can specify up to four values; they are assigned the same way as margin values.

       p {font-family: sans-serif; font-style: italic;           font-variant: small-caps; font-weight: 700;          font-size: 14pt; color: blue;          text-indent: .5 in; line-height: 1em;          padding: .25in .50in;          border-style: inset;          border-color: red;} 

• Border-top-width (right-width, bottom-width, left-width) You can set the width of a border as thin, medium, or thick, or you can specify a unit of measurement.

        p {font-family: sans-serif; font-style: italic;          font-variant: small-caps; font-weight: 700;          font-size: 14pt; color: blue;          text-indent: .5 in; line-height: 1em;          padding: .25in .50in;          border-style: inset;          border-color: red;          border-width: thick;}

When you’ve modified your style rules to match these, save your page and compare it in your browser. It should look something like the following illustration:

If you plan to add images, the height, width, float, and clear properties will prove quite useful. These properties correspond to the height, width, and align attributes in HTML—that is, they allow you to specify how an image will be displayed and whether text will wrap around it.

• Width This property functions much the same as the width attribute. Its best use is with graphics or to set the width of a block-level element.

       img.pansy1 {height: 200px;} 

• Height As with width, this property sets the height of an element.

       img.pansy1 {height: 200px; width: 320px;}

• Float Similar to the align attribute, this property allows you to set an element to the left or right margin, with text flowing around the opposite side.

       img.pansy1 {height: 200px; width: 320px;             float: left;}

If you have added the preceding style rule to the page (and have supplied or downloaded a picture to go with it), you will notice that the image is overlapping part of the text box as in the following illustration:

If you don’t want the image to float with text wrapping, use the clear property.

• Clear The clear property will prevent an image from floating on top of another element, leaving one or both sides clear. The values for this property are none, left, right, and both.

       p {font-family: sans-serif; font-style: italic;       font-variant: small-caps; font-weight: 700;      font-size: 14pt; color: blue;      text-indent: .5 in; line-height: 1em;      padding: .25in .50in;      border-style: inset;      border-color: red;      border-width: thick;      clear: left;}

  

With the box properties, you now have the ability to create complex layouts for a Web page using nothing more than HTML and CSS. Now that you have had a chance to see the box properties in action, why don’t you try creating a complete layout using CSS?

Project 17: Create a Layout with CSS

In Chapters 8 and 9 you learned how to create simple layouts with tables and frames. This project will show you how to create a similar layout using only CSS. You will create a Web page using the same basic elements you used in Chapters 8 and 9: a banner, a group of navigational links, some content, and a copyright section. Then you’ll link to an external style sheet. However, to make things a bit more interesting, and to show you some of what CSS can do, we’ll add in a picture and supply our own bullets for the navigation list.

Copy the XHTML Code

Because of the complexity of this project, the code for the Web page is reproduced in this section. As you copy the markup, be sure to observe how classes are implemented and how the <div> element is applied. After you have finished copying the code, save it as css-layout.htm and view it in your browser. You’ll notice that the content is presented in a linear fashion—one item comes after another. In fact, the content can’t even be presented in a single browser window, as the following illustration shows. You will use CSS to modify the presentation of these elements into a better page layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head>     <title>CSS Layout</title>        <link rel="stylesheet" type="text/css"               href="CSS-layout1.css" />   </head>   <body>     <div >       <img alt="HTDEXHTML Banner" src="/books/4/238/1/html/2/banner.gif"                        height="100" width="600" />     </div>     <div >       <p style="text-align: center"><strong>Links</strong></p>       <ul> <li><a href="headings.htm" target="_blank">Headings</a></li> <li><a href="text.htm" target="_blank">Text Elements</a></li> <li><a href="sup.htm" target="_blank">                Superscript &amp;Subscript</a></li> <li><a href="del.htm" target="_blank">Deleted Text</a></li> <li><a href="pre.htm" target="_blank">Preformatted Text</a></li> <li><a href="ulist.htm" target="_blank">Unordered List</a></li> <li><a href="ulist2.htm" target="_blank">Multi-level Unordered List</a></li> <li><a href="olist.htm" target="_blank">Ordered List</a></li> <li><a href="olist2.htm" target="_blank">Ordered List with Start Attribute</a></li> <li><a href="olist3.htm" target="_blank">Outline List</a></li> <li><a href="dlist.htm" target="_blank">Definition List</a></li> <li><a href="text-format.htm" target="_blank">Text Formatting</a></li> <li><a href="generic-fonts.htm" target="_blank">Generic Fonts</a></li> <li><a href="font-colors.htm" target="_blank">The Color Property</a></li> <li><a href="16colors.htm" target="_blank">The Sixteen Basic Colors</a></li> <li><a href="css-color.htm" target="_blank">CSS Color</a></li> </ul>     </div>     <h1 >This is a heading.</h1>     <div ><img  alt="jim (9K)"               src="/books/4/238/1/html/2/jim.jpg" height="200" width="183" />      <p> This is just more meaningless text that I wrote to use as filler for this illustration. It might not be very profound, but then it doesn't need to be, does it? By the way, the handsome guy in the photo on this page is yours truly.</p> </div> <p >Web Design by Me! &copy; Copyright 2050. All Rights Reserved.</p> </body> </html>

Write the Style Sheet

After you have copied and saved the XHTML page, you need to create a style sheet to go with it. Because you are using an external style sheet, simply use Notepad to create a blank file (no XHTML elements), and save it as CSS-layout1.css. Then work through the following steps to create your style rules. The style rules are written out for you below each step.

Write a style rule that sets the background color of the page to white.

body    {   background-color: white;               }

1. In this step, you design a style for your navigation links. Create a class called “nav” and set the background color to aqua. Then set the margin-top property to 110 pixels and the width to 200 pixels. Set the font family to arial and sans-serif. Specify a font-size of .80 ems and use the float property to position the navigation bar on the left side of the page.

   .nav {      background-color: aqua;             margin-top: 70px;             width: 200px;             font-family: arial, sans-serif;             font-size: .80em;             float: left;             }

2. This style rule enables you to substitute your own bullet for the list items instead of using the bullet supplied by the browser. For this to work, you will either need to download star.gif from the author’s Web site (www.jamespence.com) or supply a small (20 20) image of your own. For the list item selector, use the list-style-type property to set the bullet to disc. This is a backup style, in case your visitor’s browser doesn’t load star.gif. Use the list-style-image property to point to star.gif as your bullet of choice. The last two properties position the bullet on the inside and in the middle (vertically) of the line. You won’t notice the “inside” effect unless a list item extends to more than one line. If it does, the bullet will be positioned flush with the first letter of the second line.

   li       {             list-style-type: disc;             list-style-image: url(star.gif);             list-style-position: inside;             vertical-align: middle         }

   The next rule uses the :hover pseudo-class to add a hover effect and color change when a mouse cursor passes over a link. The text-decoration: none declaration will remove the underline on a mouseover, and the color property will turn the link red.

   a:hover {             text-decoration: none;             color: red;          }

   Now you will create a rule that allows you to format your content box. Create a class named content and set its background color to transparent. Set the text-align property to justify and the font family to arial. Add a 30 pixel top margin and add 15 pixels of padding to the left and right sides. Finally, set the width of your content box to 75 percent.

   .content {  background-color: transparent;             text-align: justify;             font-family: arial;             margin-top: 30px;             padding-left: 15px;             padding-right:15px;             width: 75%;           }

3. To set the styles for your copyright box, create an ID named copyright. Set its background color to transparent, and the font size to .75em. Center-align the text and change its color to navy.

   #copyright { background-color: transparent;              font-size: .75em;              text-align: center;              color: navy;             }

4. The following style rule uses a descendent selector to modify the word Links on the Web page. This rule sets the font size to 2 ems.

   p strong {   font-size: 2em;             } 

5. The next rule modifies your heading by moving down from the top of the page and center-aligning it. Create a class named h1.heading and use the margin-top and text-align properties to set your values.

   h1.heading { margin-top: 90px;              text-align: center;             }

6. Create a class named img.jim for the next rule. These style declarations add a bit of space around the picture and separate it from the surrounding text. You will also use the border shortcut property to add a thick, yellow outset border to the picture.

   img.jim    {  margin-left: 5px;               margin-right: 5px;               float: left;               border: thick yellow outset              }

7. The final style rule centers your banner and uses the clear property to make sure no other elements conflict with or overlap it.

   .banner   {   text-align: center;                clear: both           }

When you have finished writing your style sheet, save it and display CSS-layout.htm in your Web browser. Hopefully, your results will resemble the following illustration. If they don’t, remember that differences in browsers and display screens can create some variety in how a style sheet layout will look from system to system.

How to: Learn More About Style Sheets

Because CSS are so extensive, you will find the Quick Reference chart for CSS at www .jamespence.com. This chart focuses primarily on CSS 1 selectors and properties. For a complete listing of CSS selectors and properties in downloadable form, go to www .blooberry.com and check out Index.DOT/CSS, a comprehensive online CSS reference. You can access this site for free online or download it (for a small fee).