CSS question

uoba

uoba

Re: member
How do I style text within a table cell, when that cell has already been styled with the class code. Example:

<td width="161" class="panelCellSpacer">About Me</td>

The style 'panelCellSpacer' is to add a red line to the left-hand cell wall and space the text inwards by 5 pixels.

The linkBlack, as the name suggests, is an underscored link.

Ideally I could do:

<td width="161" class="panelCellSpacer"><span class="linkBlack">About Me</span></td>

... but that doesn't work.
 
This seems to be the most common thing forgotten about CSS.

There are multiple ways to put CSS into your html and each had a different priority level.

The lowest priority is linked external style sheets, followed by imported, then embedded (ie. in the <head>) and finally inline.

So, to solve your problem, you simply add the style to the table cell you want to apply the different style too.

So your code becomes:

<td width="161" style="color: black" class="panelCellSpacer">About Me</td>

See? No need to use the <span> tag.
 
Hmm, it's not as simple as this, the About Me text is a link... thus, I would like to style the link (there will be several different link styles on the same page). The linkBlack style is a black link with underscore, and a particular pixel size (11 px).
 
Well in CSS you can't turn a td element into an a element... So if you want a link you need to use <a href="...">About Me</a>. And then to style it you could add style=" color : black ; text-decoration : underline; " . And I think that would give you a link displaying the text About Me with black words and an underline....
Oh and I forgot about your 11px font size... the CSS for that is "font-size : 11px;"
Hope that helps.
 
Oops, sorry, I'm being lazy, I forgot to add the link tag to the text, because I don't know the link filename yet! (Thanks Mr. K, I'm okay with HTML on this level)... I just don't want to use HTML font tags for formatting anything (want to do it in CSS).
 
To affect the anchor you could try something like:

td a { ... }

or

.panelCellSpacer a { ... }

and so on.

Or if you need to limit the style to just that table, give the table an id (let's say 'xyz') and

#xyz td a { ... }

and so on....

Btw, there's no reason the 'span' approach shouldn't work, but you need to account for the anchor.

hth,
bear
 
I agree with BootedBear.

You will need to specify what is happening to the anchor in the CSS.

You can just add the anchor styles to the .panelCellSpacer class like this

.panelCellSpacer a:link {
color = black;
...
}

You should also specify a style for "a:hover" and "a:visited" (otherwise it will use the defaults for the browser rather than whatever text-decoration and/or colors you want.)
 
Thanks guys... specifying the style in the .panelCellSpacer was the way I did it, I was just hoping for an alternative (don't like the idea of the style styling the table and the text also).

Anyway, that idea got thrown out of the window (didn't need to use CSS on the table after all!)

Have immediately bought a CSS book (not sure it's a good one though, it's in large print. Makes me feel a bit 'special' :) )
 
You must log in or register to reply here.
Back
Top