HTML: Style Sheets (Part 2)

 

Styles for Boxes

A "box" is a block-element, an element that starts on a new line. <P> and <H1> are boxes; <EM> is not. Boxes have their own set of characteristics that style sheets can control. These characteristics include the box's background, the margin that surrounds the box, the box's border and the padding between the border and what is inside the box.

Let's use a box to add some emphasis to a part of the eEverything.com site, where we are letting users of the site know that eEverything.com has some great deals available on hotels. We use an H3 tag to set up the box to which we are applying a style sheet. Here is how we might start:

<HEAD>

<style>

h3 { font-size:18pt; margin-left:10%; margin-right:10%; margin-bottom:5%; border-top-width:1em; border-bottom-width:1em; border-left-width:1em; border-right-width:1em; padding:1em; border-style:solid; border-color:lightcyan; }

</style>

</HEAD>

<BODY>

<p>Here at eEverything.com, look to us not only for great low prices on airline tickets to your favorite destinations, but also for <h3>low hotel fares at some of the world's finest hotels.</h3> The Ritz-Carlton in New York, the Hilton in Malibu and the Sleepin' Inn in Metuchen are just three examples of available hotels.

</BODY>

to see this how this code looks in a window.

 

 

In the example above, the margin-left, margin-right and margin-bottom properties determine the sizes of the left, right and bottom margins outside the box. The border-top-width, border-bottom-width, border-left-width and border-right-width properties determine the sizes of the four borders around the box. The padding property sets the amount of space between the border and the text inside the box. The border-style property specifies the style of the border, and the border-color property sets its color.

 

 

Box Properties

 

It is worthwhile at this point to review the box properties that are under style sheet control. HTML Help maintains a list of box properties that style sheets can control at www.htmlhelp.com/reference/css/box/. Please take a minute to review these properties.

 

 

Modifying the Example


Note in the example above that the padding property set the padding for the entire box. We could have set the padding-top, padding-bottom, padding-left and padding-right properties separately, but since they would all be the same, it was OK to simply use the padding property.

 

Note also that we set the border-top-width, border-bottom-width, border-left-width and border-right-width properties separately. Since they were all set to 1em, we can replace these four properties with one property, the border property.

 

Another modification we can make is to set the font-style and color of the text inside the box. These changes are seen in the following code:

 

<style>

h3 { font-size:18pt; font-style:italic; color:maroon; margin-left:10%; margin-right:10%; margin-bottom:5%; border:1em; padding:1em; border-style:solid; border-color:lightcyan; }
</style>

to see this how this code looks in a window.

 

 

Let's modify the example further by choosing a different border-style. Here is the code when we replace the "solid" border-style by the "ridge" border-style:

 

<style>

h3 { font-size:18pt; font-style:italic; color:maroon; margin-left:10%; margin-right:10%; margin-bottom:5%; border:1em; padding:1em; border-style:ridge; border-color:lightcyan; }
</style>

to see this how this code looks in a window.

 

 

Now let's add a background color to the box. Here is the code:

 

<style>

h3 { font-size:18pt; font-style:italic; color:maroon; margin-left:10%; margin-right:10%; margin-bottom:5%; border:1em; padding:1em; border-style:ridge; border-color:lightcyan; background-color:papayawhip }

</style>

to see this how this code looks in a window.

 

 

As a final modification using a style sheet, let's add a background image instead of a background color. We use the image "folkart.jpg" as the background image. Here is the code:

 

<style>

h3 { font-size:18pt; font-style:italic; color:maroon; margin-left:10%; margin-right:10%; margin-bottom:5%; border:1em; padding:1em; border-style:ridge; border-color:lightcyan; background-image:url(folkart.jpg) }

</style>

to see this how this code looks in a window.

 

 

Other Resources

Try these links on style sheets:

Page Link
CSS Properties www.htmlhelp.com/reference/css/properties.html
CSS Structure and Rules www.htmlhelp.com/reference/css/structure.html
Style Guide www.w3.org/MarkUp/Guide/Style.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) the eEverything.com site. Use a style sheet to define several properties of the <H4> tag. Set the left margin to 20% and the right and bottom margins to 10%. Set the padding (on all four sides) to 1em. Set the style and color of the border to a style and color of your choice. Use the image "stone.jpg" as a background image; this file's path is: uzza.us/cs/web/stone.jpg.

In the <BODY> section, put some text inside the <H4> tag to see if the style sheet is working properly.

If you work on the eEverything.com site, you might use the <H4> tag to help advertise the sale on MP3 Players that is going on now.