[thelist] CSS question????

Timothy J. Luoma lists at tntluoma.com
Wed Aug 28 13:57:00 CDT 2002


Matt Mozer wrote:

> .textnormal     {  font-family: arial; font-size: 11px; color: #000000;
> text-decoration: none}
>
> table        { border: 0; }
> td        { class: textnormal; }

You'd make it something like:

td.textnormal  { font-family: monospace; }

(or whatever you wanted as styles for this

td.textnormal goes in the CSS file

<td class="textnormal"> goes in the HTML page

>
>
> I thought this would work since in the actual table data i call
> <td class = "textnormal"></td>
>
> but this does not seem to be the case.
>
> How do I reference the "textnormal" style in the td style?

Answer:
There should NOT be any spaces around the = sign so that should be

	<td class="textnormal"></td>

Free, unsolicited, well-intentioned advice

1) "Subject: problem with classes and tables" would have been a better
	choice than "CSS question"

2) Become friends with the CSS validator... it will tell you a lot of
	handy things: http://jigsaw.w3.org/css-validator/

3) Consider becoming friends with TopStyle, which will tell you a
	whole bunch of stuff in a nicer/clearer way than the
	validator: http://www.bradsoft.com/topstyle/

4) It is generally considered good form to make Class and ID names
descriptive of /content/ and not /style/.  For example right now you
have 'textnormal' well that describes the style, not the content.  Let's
assume that this TD contains pricing information which you want rendered
in monospace, and say you have product names which you want in italics.
(the particulars aren't important for the sake of discussion)

So you might (wrongly) use

td.italic	{ font-style: italic; }
td.textnormal  { font-family: monospace; }

and then use this in your HTML

<tr>
	<td class="italic">Widgetblaster</td>
	<td class="textnormal">$5.95</td>
</tr>

But then later on you decide that you don't want the product names
italicized and you DO want the price to be in bold.

What do you do?  Well you either have to 1) go and change the HTML
(which is exactly what you don't want to have to do because using CSS
means editing one file and having the changes taking place site-wide) or
2) you have to change the style definitions like so:

td.italic	{ font-style: normal; }
td.textnormal  { font-family: monospace; font-weight: bold; }

Well now your styles have names that no longer seem appropriate.

However, if you used

td.productname (instead of td.italic)
and
td.productprice (instead of td.textnormal)

then you could have your styles defined in way that would work no matter
what styles they contained....

This took me a little while to "get" and so I had a bunch of styles like
this:

	.center { text-align: center; }

well then I had to think "Gee, where did I use this on the site?  Does
everything that I center use this?  So if I want to center something I
have to add another class?  That doesn't seem right."

Anyway, I hope that was helpful and not overly pedantic sounding.... I
love CSS and am always glad when folks start using it ;-)

TjL




--
30 Days to becoming an Opera Lover
                                  http://www.tntluoma.com/opera/lover/
Day Three: Choose your interface
                    http://www.tntluoma.com/opera/lover/day03-interface/





More information about the thelist mailing list