Cascading Style Sheets Tutorials and Lessons: Adding a Border

Stay at Home and Learn

Cascading Style Sheets

Adding a Stlye to your HTML

Computer Tutorials List

Adding a Border around text

We'll now use the Editor to add a border around a paragraph of text. This will demonstrate how to use the ID Selectors.

So create a new web page. Add a paragraph or two of text. Again, it's a two step process to set up and apply an ID selector. So once you have your paragraphs of text, do this:

Step One - Setting up the ID Selector

From the menu bar, click on Add
From the drop down menu, click Style > Add a Border
The following dialogue box appears:

The Border Dialogue Box

The Border Width and Border Colour are self-explanatory. The Border Padding is the space between the text and the Border. Set all three values to anything you like. When you're done, click OK. The following code will be added to the HEAD section of your web page:

<HEAD>
<TITLE>Add a Border</TITLE>

<STYLE>
#Borders
{
Border: 3pt solid Black;
Padding: 10pt;
}
</STYLE>
</HEAD>

Note the name of the ID Selector - Borders. The Hash symbol (#) in front of it is enough to set up an ID selector.

Step Two - Applying the ID Selector

To apply the ID selector you have just set up, do this:

Highlight a paragraph of your text
From the menu bar, click on Insert > Style Tag
From the dialogue box that appears, select Borders from the drop down box
Click OK
The Div tag will now surround the text you highlighted

<Div ID = Borders>
Your text here
</DIV>

Save your work and view the results in a browser. Your paragraph should look something like this:

A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text. A paragraph of text.

In the next part, we'll see how to set up page margins.

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

<--Back to the Style Sheets Contents Page

View all our Home Study Computer Courses