Web Site Building · Advanced Topics · Cascading Style Sheets 1

What this is about:

CSS, or Cascading Style Sheets, is a technology that gives site builders enhanced control over the look of elements on a web page. Objects once considered unchangeable, such as the underline beneath links, the color of form elements, the spacing between text, and more, can now all be altered, thanks to CSS. Before proceeding with this tutorial, it is recommended you have a firm understanding of HTML tags, elements, and properties.

Rollover Text Links

Rollover Effects Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML.

With the huge popularity surrounding cool rollover image effects (see here), it's no wonder people ask how to create rollover text links. CSS allows you to easily give your text links a rollover personality. The link changes color when the mouse cursor hovers over it. Here's the source code for this effect:

#changestyle a:hover{

This should be inserted in the <head> section of your page. You can change the keyword "green" to your liking. Here's an example of a rollover link. Refer back to the changestyle style declaration id in your block element:

<p id="changestyle">Hover your mouse cursor... </p>

Hover your mouse cursor over this text.

Highlighting Text

As you've noticed above and elsewhere on our site, Internet Brothers likes to use this technique to assist with page layout. It's a nice effect for highlighting text. We find it useful when featuring code samples. Since we want to emphasize the words "Internet Brothers likes to use this", we use style attributes to give that portion of the text a background color of yellow. Here's the source code we used:

<span style="background: yellow;">
Internet Brothers likes to use this

As you can see, just surround the text you want to highlight with the part in bold.

Perhaps you would 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 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>

Table Borders With CSS

CSS enables you to significantly enhance the means of applying borders to tables. take a look at the following:

Table with red, thin border

Table with thicker, 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 significantly more detail. We have more on the next page about incorporating CSS into your every day coding practice.

Proceed to Cascading Style Sheets Page 2.

go to the next page