How to Do Everything with HTML & XHTML

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.

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.

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:

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:

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:

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.

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.

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 ><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).

Related

Категории