Cascading Style Sheets Tutorials and Lessons: Add a style to your HTML

Stay at Home and Learn

Cascading Style Sheets

Adding Styles to your HTML

Computer Tutorials List

Change the Text Background Colur

We'll now use the HTML Editor to add a style that changes the background colour behind some text. This will demonstrate the how the Class Selector works. With your HTML Editor, adding a Class Selector Style is a two step process:

Step One - Setting up the Class Selector

Click on Add from the menu bar
From the drop down list, click Style > Background Text Style
The following dialogue box appears:

Background Colour Dialogue box

From the first drop down box, Pick the colour you would like behind your text
From the second drop down box, Pick the colour you would like for the text itself
Click OK
The following code is added to the HEAD section of your web page:

<STYLE>

.BackTextColour
{
Background-Color: Blue;
Color: White;
}
</STYLE>
</HEAD>

Note the name of the Class Selector - BackTextColour. This will be used in Step Two.

Step Two - Applying the Class Selector

To apply the Class selector, do this:

Type some text between the two BODY tags of your web page
Highlight a word or two of the text you've just typed
Click Insert from the menu bar
From the drop down menu, click Style Tag
The following dialogue box appears:

Select a Style Dialogue box

Click the black arrow of the drop down box to reveal a list of Styles
Select the first one, "Coloured Text Background"
Then Click OK
The Editor will add this to the text you selected:

<SPAN Class = BackTextColour> Background Colour</SPAN>

Save your work and view the results in a browser

It should look like the text below:

Text With The Background Colour Changed

Exercise

On the Add > Style menu of your Editor, there is an item called Change Font Style. This is another Class Selector, and works in the same way as the one above. Use the two step process to apply the Font Style to your web page.

In the next part, we'll see how to add a border around text.

<-- Back One Page Move on to the Next Part -->

<--Back to the Style Sheets Contents Page

View all our Home Study Computer Courses