Style Sheets 104 (continued)

Background Image for Block Elements
compatability: IE4+ and NN4+

Do you like the look of a background image in your tables? If so, you'll love what Cascading Style Sheets has done for this concept. Using CSS, you can now give any block element a background image. A block element simply refers to elements that define a rectangular area, such as a paragraph <p>, a header <h>, or division <div>. To apply a background image to block elements, simply insert the following CSS code into the element's tag:

<div style="background-image:url('yourimage.gif') ">.....</div>

Lets see a couple of examples:

This header has a brownish background image

These backgrounds come from a friend of Internet Brothers, Patti Barbiero. You may visit Graphics by Patti to view some of her other beautiful work including complete themes.

Fancy Table Borders - compatability: IE4+

Finally, let's wrap things up by showing you a CSS trick for quickly enhancing those optional borders of a table. Take a look at the following tables:

Table with red, thin border

Table with thick, blue border

These effects are achieved with the following code inserted inside the <table> tag:

style="border: 2px solid red"

You can change "2px" and "red" to different values to alter the thickness and color of the border, respectively.

As you can imagine, there is a lot more to Cascading Style Sheets than the novice examples we have demonstrated. There are many other terrific sites on the Web that go into greater detail. Use your favorite search engine to go for a stroll. Has this tip been helpful to you? Please let us know on the comments page or with the email icon. Thanks for selecting Internet Brothers as your choice for web page tutorials.

Was this site useful to you?

To print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said.

The hierarchical menus were created using Peter Belesis' © Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.

HTML Utopia: Designing Without Tables Using CSS

• Learn to use CSS for layout
  
• Build faster loading, leaner pages
  
• Produce clean, beautifully managed code
  
• Design device-independent, highly accessible pages
  
• Write standards compliant code

Download sample
chapters free!

Read more info

Site Map