CSS Lesson 4

Highlighting text and Borders.

Highlight Text with a background color

Adding a highlight color to text is pretty easy. This is useful on pages where you have a lot of text and want certain words or phrases to stand out. It is just like using a highlighter on paper. I would not over do it, as to much will be distracting to the reader.

Open up your style sheet and add this selector:

.highlightyel {
background-color: #FFFF40; }

I named my selector highlightyel, but you can name it anything, like hhy for example. Just remember that you may have to go back one day and try to remember what your shorthand was supposed to represent. Save your style sheet and then use this on your page to use the background color in your text. Don't forget the period (.) in front of the selector.

<span class=”highlightyel”> your text You can use this multiple places on your page like here. You can use any standard color, I used yellow, just make sure it does not obscure your text.

You could also add other properties to the same selector to increase the effectiveness. Such as bold, underline and italics.

highlightyel {
background-color: #FFFF40;
font-weight: bold;
font-style: italic;
text-decoration : underline;
}

Borders

Adding borders to your table cells.

It is easy to add a border to a table. The trouble with that is, what if you want a border around just one cell in that table. You could add a new table into that cell with a border, but that adds a lot more code to your page. Also, what if you wanted a border on just one or two sides of the table cell?

We’ll set up a class for our border.

.full-border {
border : 2px solid #000000;
}

Border by itself will put a border on all four side, the 2px is the size of the border in pixels, solid is the style of the border, and #000000 is the color.

To use this class we’ll make a table with 2 cells. Then add your new class to the right cell as below.

<table width="700" border="0" cellspacing="0" cellpadding="5">

<tr>

<td width=”350”> </td>

<td width=”350” class=”full-border”> </td>

</tr>

</table>

This is the result. Only the right cell has a border around it. You might use this on a product page where you have general information on the left and want to separate a few highlighted products on the right.

Maybe you want a border on just one side of your table like a divider. Here is how you define borders one border at a time:

Border-side: width style color:

Border-top: 2px solid # 000000;
Border-bottom: 2px solid #000000;
Border-right: 2px solid #000000;
Border-left: 2px solid #000000;

Now, lets set a border for the left side of our right table cell. I’ll name the class bl for border left.

.bl {
Border-left: 2px solid #000000;
}

Now to put this new class in a table:

<table width="700" border="0" cellspacing="0" cellpadding="10">

<tr>

<td width=”350”> </td>

<td width=”350” class="bl"> </td>

</tr>

</table>

And this is the result. A nice border down the left side of this cell like a divider. You also have more choices than just solid borders. Here are the different borders you can use.

Solid
Dotted
Dashed
Double
Groove
Ridge
inset
outset

Just replace “solid” in your style sheet with one of the other styles to see the changes.

You can even add a border around a block of text in the middle of a long paragraph, of practically any where on your page by using a division tag. We’ll add one around this whole example just to show you how.

Let’s make another selector and name it border-div. We will add padding and margin to keep the edge of the border away from the text.

.border-div {
border : 1px dashed #000000;
margin : 5px;
padding : 5px;
}

Before this paragraph I added a division tag like this:

<div class="border-div"> I put this whole example in here and ended it with a closing tag of </div>

As you can see, we have a nice dashed border around this whole example. We didn’t even have to use a cell to do it.

That’s all for this lesson. In Lesson 5 I’m going to give you an idea or two on doing tableless designs. This is sort of advance CSS, but still not to hard once you get the hang of it.

Table of Contents	CSS Lesson 1	CSS Lesson 1 Part 2	CSS-Lesson 2
CSS Lesson 3 Part 1	CSS Lesson 3 Part 2	CSS Lesson 4	CSS Lesson 5

Table of Contents	CSS Lesson 1	CSS Lesson 1 Part 2	CSS-Lesson 2
CSS Lesson 3 Part 1	CSS Lesson 3 Part 2	CSS Lesson 4	CSS Lesson 5