Hello,

a couple of questions about formating fonts and colours in Dreamweaver:

How do I change the font colour just in one of the cell of the table, not in the whole table?

Can I set a border just for a part of the table or once the border is set it is always for the whole table – each cell has its own border. For example I have a table with one row and two columns and I just want to have a border around the whole row not the litlle border in between the two columns?

Similar problem with the colour of the links – once the colour is set up, it has to be the same on the whole page? Some of my link are invisible now as I set up their colour as white and as the new text does not have colour in background I can not see them..

Thanks a lot

Petra

Hi Petra,

You need to use CSS!

This was covered in your Dreamweaver 8 Introduction course, but CSS is a big topic, and it can definitely take a while to get the hang of it.

The things you are trying to do would require some more intermediate CSS techniques, so let me see if i can help you here. If you get stuck, reply back to this post and I'll help further :)

1) To change the font colour in just one of the cell tables, you can apply a style to just one cell, like this. (code view)
<td style="color: red;">Your cell data</td>

Or you could create a class, which is better, cause then you can re-use the style throughout your page or site.

CSS code:
.celldiff {
color: red;
}

HTML code:
<td class="celldiff">Your cell data</td>

In Dreamweaver, select cell and apply "celldiff" style. (celldiff can be called something else if you want, you make up the name during CSS definition).

Note you can apply colours in the same way in a body of text, just by using the span tag, like this:
<p>This part of the text <span class="celldiff">is a different colour</span> and this is normal.</p>

2) You can change a border for just one cell. You use the same CSS method, and use parameters:
border-left
border-top
border-right
and border-bottom
or just border.

So to get the effect you want of just highlighting one row, with no line between cells, you could create 3 styles. All with top/bottom borders; The first with border on left, second with neither left or right borders, and the third with border on the right, like this:

.highlightleft {
border: 1px 0 1px 1px;
}

.highlightmid {
border: 1px 0;
}

.highlightright {
border: 1px 1px 1px 0;
}

Then your HTML code would be:
<tr>
<td class="highlightleft"></td>
<td class="highlightmid"></td>
<td class="highlightright"></td>
</tr>

3) Different link colours for different areas of your page definitely require CSS. I recommend using class selectors for this. I will give the basics here, and once you understand the theory, you should be able to experiment to get the effect you're after.

If I wanted an area of my site to have white text on a green area, I can do this:
CSS code:
#greenarea {
color: white;
background-color: green;
}

HTML code:
<div id="greenarea">
My green area here
</div>

Now if i want to have the links within this area as orange, I need to also specify the anchor tag (a) selector classes within my green area definition, like this:
CSS code:
#greenarea a:visited, #greenarea a:hover, #greenarea a:link, #greenarea a:active {
color: orange;
text-decoration: underline;
}

I don't need to apply the style or id in my texts, the CSS knows that any links within a #greenarea div tag will be orange.

HTML code:
<div id="greenarea">
This is normal text.
<a href="products.html">This will be an orange link</a>
This is normal text again (white, according to CSS definition).
</div>

Hope this helps.

Regards, Rich