css in tables and cells

[jack]

Hello.
Is it possible to set a css class for a table and then set a different class
for one of the elements of the table ie a cell (TD)?
I have a page with the following css:-

font { font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10pt;
color: #FFFFFF;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
font-size: 10pt;
color: #FFFFFF;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFF00;
text-transform: uppercase;
font-weight:900;
text-decoration: none;

****THE ABOVE IS APPLIED TO THE PAGE*******

..php {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
..php a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
..php a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
text-transform: none;
color: #FFF000;
background-color: #10184A;
}
******THE ABOVE CLASS 'PHP' IS APPLIED TO A TABLE*****
..grand {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
..grand a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

..grand a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: 900;
color: #FFF000;
text-transform: uppercase;
}
*********THE ABOVE CLASS 'GRAND' IS APPLIED TO A CELL****

The first 2 work. The table adopts the formating of the php class but the
cell doesn't use the formatting of the 'grand' class. It just follows the
php class assigned to the whole table.
Doew anyone know what I've done wrong?
Thanks.

 

[=?iso-8859-1?Q?brucie?=]

Is it possible to set a css class for a table and then set a different class
for one of the elements of the table ie a cell (TD)?

of course but it makes it much easier if you supply a URI to the
document that demonstrates the problem so a solution can easily be
found rather than asking people to make guesses looking at incomplete
information.

I have a page with the following css:-

font

don't use the font element its deprecated in favor of css so using css
on the font element doesn't make sense.

{ font-family: Verdana, Arial, Helvetica, sans-serif;

only use verdana for personal stylesheets. only specify a generic
family or none at all so the visitor sees the site in their preferred
font.

font-size: 10pt;

only use ems or % when specifying font sizes. 100% or 1em is the
visitors preferred size.

font-family: Verdana, Arial, Helvetica, sans-serif; font-family: Verdana,
Arial, Helvetica, sans-serif;

you don't have to keep repeating the same CSS all the time. let
inheritance take care of it.

.php

use meaningful class/id names.

text-decoration: none;

if removing the underlines from links it must be made clear in some
other way that the text is a link such as grouped in a separate menu
area, different text/background colors are not always enough.

text-transform: uppercase;

don't change the font on hover. it can causes the page to jump and
redraw or cut text off making it unreadable.

The first 2 work. The table adopts the formating of the php class but the
cell doesn't use the formatting of the 'grand' class. It just follows the
php class assigned to the whole table.

the .php and .grand class are identical. i assume you mean the anchor
properties for the anchors within those classes. the below may or may
not be applicable because you haven't supplied the information needed.

..php a --> applies to an <a> if its in a container with the .php class
..grand a --> applies to an <a> if its in a container with the .grand class

<table class="php">
<td><a ...></td> <-- .php a and .php a:hover applies
<td class="grand"><a... ></td> <-- .grand a and .grand a:hover applies
<td class="php"><a... ></td> <-- .php a and .php a:hover applies
<td class="grand"><a... ></td> <-- .grand a and .grand a:hover applies
<td><a... ></td> <-- .php a and .php a:hover applies
</table>

 

[jack]

In post <[email protected]> jack said...

the .php and .grand class are identical. i assume you mean the anchor
properties for the anchors within those classes. the below may or may
not be applicable because you haven't supplied the information needed.

.php a --> applies to an <a> if its in a container with the .php class
.grand a --> applies to an <a> if its in a container with the .grand class

<table class="php">
<td><a ...></td> <-- .php a and .php a:hover applies
<td class="grand"><a... ></td> <-- .grand a and .grand a:hover applies
<td class="php"><a... ></td> <-- .php a and .php a:hover applies
<td class="grand"><a... ></td> <-- .grand a and .grand a:hover applies
<td><a... ></td> <-- .php a and .php a:hover applies
</table>

Hello and thanks. I'll take on board your criticisms.
The php and grand class are very slightly different. The a:hover properties
are different. The grand has both a larger font-weight (900) and text
transform set to uppercase when the mouse rolls-over
I've apllied the php class to the table <TABLE class="php"> and this affects
everything in it and i've applied the grand class to a cell within the table
.. But the <TD class="grand"> doesn't work, the cell continues to take the
formatting of the php class assigned to the table i.e. on hover the
font-weight doesn't increase nor does the text become uppercase.

 

[=?iso-8859-1?Q?brucie?=]

The php and grand class are very slightly different.

no, they're identical.

..php -> font-family: Verdana, Arial, Helvetica, sans-serif;
..grand -> font-family: Verdana, Arial, Helvetica, sans-serif;

..php -> font-size: 10pt;
..grand -> font-size: 10pt;

..php -> font-weight: bold;
..grand -> font-weight: bold;

..php -> color: #FFFFFF;
..grand -> color: #FFFFFF;

..php -> text-decoration: none;
..grand -> text-decoration: none;

you should just use .php,.grand{... } or better use a single class.

The a:hover properties are different.

the a and a:hover properties do not have a class specified in your

I've apllied the php class to the table <TABLE class="php"> and this affects
everything in it and i've applied the grand class to a cell within the table
. But the <TD class="grand"> doesn't work, the cell continues to take the
formatting of the php class assigned to the table i.e. on hover the
font-weight doesn't increase nor does the text become uppercase.

you still haven't supplied the information needed to fix the problem
and i'm sick of wasting my time trying to mind read.