On a quest to reduce file size and make managing files much easier and more relevant, I've done something. It doesn't work. HELP!
Okay, here are the details. I have a gradient, and there are multiple variations of the gradient. However, there are a set of attributes that are always applied on the gradient (and only colors change). I used to list these set details EVERY time I made a new gradient, which worked, but also bloated the file size. Now I'm trying cut it down. What I would have liked is to have two categories, the gradient style, which has the always used details, and then a second category that applies the specific details to the cells.
Some more background information, here is the original gradient:
/* HEADER AND LOGO */
.blacktowhite0 {background:#000;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite1 {background:#111;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite2 {background:#222;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite3 {background:#333;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite4 {background:#444;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite5 {background:#555;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite6 {background:#666;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite7 {background:#777;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite8 {background:#888;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite9 {background:#999;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteA {background:#AAA;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteB {background:#BBB;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteC {background:#CCC;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteD {background:#DDD;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteE {background:#EEE;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.logo {background:#000;font-size:16pt;font-family:charlesworth,
book antiqua,serif;border-bottom:2px solid #000;width:200px;font-weight:900;font-variant:small-caps;}
.link {color:#FFF; text-decoration:none}
That's the css and here's the html:
<table cellspacing="0" class="tablestat3" cellpadding="5">
<tr>
<td class="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><span class="link">The<br />Writing Pot</span></a></td>
<td class="blacktowhite0"> </td>
<td class="blacktowhite1"> </td>
<td class="blacktowhite2"> </td>
<td class="blacktowhite3"> </td>
<td class="blacktowhite4"> </td>
<td class="blacktowhite5"> </td>
<td class="blacktowhite6"> </td>
<td class="blacktowhite7"> </td>
<td class="blacktowhite8"> </td>
<td class="blacktowhite9"> </td>
<td class="blacktowhiteA"> </td>
<td class="blacktowhiteB"> </td>
<td class="blacktowhiteC"> </td>
<td class="blacktowhiteD"> </td>
<td class="blacktowhiteE"> </td>
<td class="title"><center>Home</center></td>
</tr>
</table>
This worked fine. However, as you can see, there are extra details that are very redundant.
Here was my attempted solution, but it turned out that I couldn't assign two classes to an element.
/* HEADER AND LOGO */
.gradient {border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.logo {font-size:16pt;font-family:charlesworth,book antiqua,serif;border-bottom:2px solid #000;width:200px;font-weight:900;font-variant:small-caps;}
.link {text-decoration:none}
/* BLACKTOWHITE */
.blacktowhite0 {background:#000;}
.blacktowhite1 {background:#111;}
.blacktowhite2 {background:#222;}
.blacktowhite3 {background:#333;}
.blacktowhite4 {background:#444;}
.blacktowhite5 {background:#555;}
.blacktowhite6 {background:#666;}
.blacktowhite7 {background:#777;}
.blacktowhite8 {background:#888;}
.blacktowhite9 {background:#999;}
.blacktowhiteA {background:#AAA;}
.blacktowhiteB {background:#BBB;}
.blacktowhiteC {background:#CCC;}
.blacktowhiteD {background:#DDD;}
.blacktowhiteE {background:#EEE;}
and
<table cellspacing="0" class="tablestat3" cellpadding="5">
<tr>
<td class="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><span class="link">The<br />Writing Pot</span></a></td>
<td class="gradient" class="blacktowhite0"> </td>
<td class="gradient" class="blacktowhite1"> </td>
<td class="gradient" class="blacktowhite2"> </td>
<td class="gradient" class="blacktowhite3"> </td>
<td class="gradient" class="blacktowhite4"> </td>
<td class="gradient" class="blacktowhite5"> </td>
<td class="gradient" class="blacktowhite6"> </td>
<td class="gradient" class="blacktowhite7"> </td>
<td class="gradient" class="blacktowhite8"> </td>
<td class="gradient" class="blacktowhite9"> </td>
<td class="gradient" class="blacktowhiteA"> </td>
<td class="gradient" class="blacktowhiteB"> </td>
<td class="gradient" class="blacktowhiteC"> </td>
<td class="gradient" class="blacktowhiteD"> </td>
<td class="gradient" class="blacktowhiteE"> </td>
<td class="title"><center>Home</center></td>
</tr>
</table>
Help me! AAAAH!
Let me reiterate what is desired. I want to have two sets of css styles. One for the normal traits of a gradient, and the other for the colors of the gradient. I do not want to hand write the gradient in as a STYLE because certain gradients are difficult to create. Help would greatly be appreciated.Assign the gradient class to the <tr> instead of the <td>. Then in the CSS do this:
tr.gradient td {gradient settings here}
Dunno if that will work, but it's worth a shot.You're actually very close! Try:
<td class="gradient blacktowhite0"> </td>
Place a space between the classes tells the browser to apply both classes.Oops, I didn't notice that not all the <td> tags are using gradient (the logo one at start). This will likely cause problems with that, as the gradient class will conflict with your .logo settings. You could probably override them, by declaring the .logo after the .gradient in your CSS file.Thanks tiocontien. That solved my problem.
Okay, here are the details. I have a gradient, and there are multiple variations of the gradient. However, there are a set of attributes that are always applied on the gradient (and only colors change). I used to list these set details EVERY time I made a new gradient, which worked, but also bloated the file size. Now I'm trying cut it down. What I would have liked is to have two categories, the gradient style, which has the always used details, and then a second category that applies the specific details to the cells.
Some more background information, here is the original gradient:
/* HEADER AND LOGO */
.blacktowhite0 {background:#000;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite1 {background:#111;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite2 {background:#222;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite3 {background:#333;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite4 {background:#444;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite5 {background:#555;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite6 {background:#666;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite7 {background:#777;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite8 {background:#888;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhite9 {background:#999;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteA {background:#AAA;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteB {background:#BBB;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteC {background:#CCC;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteD {background:#DDD;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.blacktowhiteE {background:#EEE;border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.logo {background:#000;font-size:16pt;font-family:charlesworth,
book antiqua,serif;border-bottom:2px solid #000;width:200px;font-weight:900;font-variant:small-caps;}
.link {color:#FFF; text-decoration:none}
That's the css and here's the html:
<table cellspacing="0" class="tablestat3" cellpadding="5">
<tr>
<td class="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><span class="link">The<br />Writing Pot</span></a></td>
<td class="blacktowhite0"> </td>
<td class="blacktowhite1"> </td>
<td class="blacktowhite2"> </td>
<td class="blacktowhite3"> </td>
<td class="blacktowhite4"> </td>
<td class="blacktowhite5"> </td>
<td class="blacktowhite6"> </td>
<td class="blacktowhite7"> </td>
<td class="blacktowhite8"> </td>
<td class="blacktowhite9"> </td>
<td class="blacktowhiteA"> </td>
<td class="blacktowhiteB"> </td>
<td class="blacktowhiteC"> </td>
<td class="blacktowhiteD"> </td>
<td class="blacktowhiteE"> </td>
<td class="title"><center>Home</center></td>
</tr>
</table>
This worked fine. However, as you can see, there are extra details that are very redundant.
Here was my attempted solution, but it turned out that I couldn't assign two classes to an element.
/* HEADER AND LOGO */
.gradient {border-bottom:2px solid #000;font-size:8px;width:20px;text-align:center;vertical-align:middle;}
.logo {font-size:16pt;font-family:charlesworth,book antiqua,serif;border-bottom:2px solid #000;width:200px;font-weight:900;font-variant:small-caps;}
.link {text-decoration:none}
/* BLACKTOWHITE */
.blacktowhite0 {background:#000;}
.blacktowhite1 {background:#111;}
.blacktowhite2 {background:#222;}
.blacktowhite3 {background:#333;}
.blacktowhite4 {background:#444;}
.blacktowhite5 {background:#555;}
.blacktowhite6 {background:#666;}
.blacktowhite7 {background:#777;}
.blacktowhite8 {background:#888;}
.blacktowhite9 {background:#999;}
.blacktowhiteA {background:#AAA;}
.blacktowhiteB {background:#BBB;}
.blacktowhiteC {background:#CCC;}
.blacktowhiteD {background:#DDD;}
.blacktowhiteE {background:#EEE;}
and
<table cellspacing="0" class="tablestat3" cellpadding="5">
<tr>
<td class="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><span class="link">The<br />Writing Pot</span></a></td>
<td class="gradient" class="blacktowhite0"> </td>
<td class="gradient" class="blacktowhite1"> </td>
<td class="gradient" class="blacktowhite2"> </td>
<td class="gradient" class="blacktowhite3"> </td>
<td class="gradient" class="blacktowhite4"> </td>
<td class="gradient" class="blacktowhite5"> </td>
<td class="gradient" class="blacktowhite6"> </td>
<td class="gradient" class="blacktowhite7"> </td>
<td class="gradient" class="blacktowhite8"> </td>
<td class="gradient" class="blacktowhite9"> </td>
<td class="gradient" class="blacktowhiteA"> </td>
<td class="gradient" class="blacktowhiteB"> </td>
<td class="gradient" class="blacktowhiteC"> </td>
<td class="gradient" class="blacktowhiteD"> </td>
<td class="gradient" class="blacktowhiteE"> </td>
<td class="title"><center>Home</center></td>
</tr>
</table>
Help me! AAAAH!
Let me reiterate what is desired. I want to have two sets of css styles. One for the normal traits of a gradient, and the other for the colors of the gradient. I do not want to hand write the gradient in as a STYLE because certain gradients are difficult to create. Help would greatly be appreciated.Assign the gradient class to the <tr> instead of the <td>. Then in the CSS do this:
tr.gradient td {gradient settings here}
Dunno if that will work, but it's worth a shot.You're actually very close! Try:
<td class="gradient blacktowhite0"> </td>
Place a space between the classes tells the browser to apply both classes.Oops, I didn't notice that not all the <td> tags are using gradient (the logo one at start). This will likely cause problems with that, as the gradient class will conflict with your .logo settings. You could probably override them, by declaring the .logo after the .gradient in your CSS file.Thanks tiocontien. That solved my problem.