Affordable Web Hosting

Free email with every new domain registration, transfer and renewal.

Professional website templates with free sample template to download

Cascading Style Sheets

What is CSS?

CSS stands for Cascading Style Sheets. A style is a set of formatting instructions placed in the HEAD element of an HTML document Styles define how to display HTML elements. Styles allow you to make one change that affects multiple HTML elements. Style changes can be made to occur periodically or throughout a document. A good place to get free CSS tutorials is at W3schools.com.

background-color

Change the color behind the text. Use either named colors or hexadecimal codes.

background-color : Blue;
Once you've decided on the styles you want, you need to write your style sheet. Place the following in the <head> of your HTML document:

The first three of the above styles will be set by using the tags: <p></p>, <h1></h1>, and <h2><h2>. The final style notation is used with the class attribute. Since it is a notation, it would usually be used with the <span></span> tag. For example:

<p>
This paragraph would be in the p style. <span class="note">Note: inheritance means that this text will have the same styles as the paragraph itself</span>
< /p>

The styles set by the first tag will be inherited by any tag that is within it. This is why we don't have to redefine the font color or size for the note.

Script for changing linked text color on mouse over

This only works with the IE browsers. Add this code within your <head> tags. To keep the underline on your links, replace "none" with "underline" Change "Your Color" with the hexadecimal number of color required.

Color scrollbars script

Add the following script within your head tag and change the color attributes to suit.

No underline on links

Add this code to your page, within the <head></head>tags.

< style
type="text/css">  </style>

Changing your hyperlinks color

You can use CSS to change the appearance and behavior of hyperlinks. CSS uses the following states to determine how hyperlinks look and behave:

A
A:link
A:visited
A:hover
A:active
Here's an example of the code that you might insert into a style sheet to achieve the desired effect.

A {font-family:Georgia,serif; font-size:large}
A:link {color:blue;}
A:visited {color: #FF0000;}
A:hover {text-decoration: none; color: #000099;
font-weight:bold;}
A:active {color: red;text-decoration: none}

The A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the effect of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (red) will apply when the user both activates and hovers over the A element.

Color and font

Following code segment defines the color and font-size properties for H1 and H2 elements:

<HEAD>
< TITLE>CSS Example</TITLE>
< STYLE TYPE="text/css">
H1 { font-size: x-large; color: blue }
H2 { font-size: large; color: green }
< /STYLE>
< /HEAD>

home :: site map :: glossary :: contact :: faq's :: privacy statement