overdoing my CSS....critique pls //// [Archive]

cmart

September 9th, 2005, 12:43 PM

Am I way overdoing my CSS? Is this proper markup?

the div class "tableindent" is putting a 20 px padding on left and right hand side of the text. I'm assigning the class "maincopytext" to the table (which I'm not sure if that's even ok to do) which assigns text attributes to all copy text within that table. All headers are contained within other divs (they have their own CSS applied). Is there a different way to mark this up? did I do any big CSS no-no's?

I know about table-less CSS layout which I plan to explore in the future, but I am not that advanced with CSS yet and need to get this site up and running. any basic CSS pointers (such as NEVER apply classes to "example....") are welcome. Thanks for any help in advance.

"<div class="tableindent">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="maincopytext">
<tr>
<td>copy, copy, copy.....
<p>copycopycopy....
</td>
</tr>
</table>
</div>"

Ankou

September 9th, 2005, 01:26 PM

If I understood what you've done I don't see any major CSS no-no's. However you can remove the table's width, border, cell padding and spacing and put that in your CSS. And I would probably make sure that all my text is enclosed in paragraph tags. Then instead of applying the text properties to the table... I'd apply them to the paragraph tags (or even the div since all font properties are inherited).

<div class="tableindent">
<table>
<tr>
<td>
<p>copy, copy, copy.....</p>
<p>copycopycopy....</p>
</td>
</tr>
</table>
</div>

div.tableindent{ padding: 0 20px; }
div.tableindent table{ width: 100%; border-width: 0; }
p{ font-family: Arial, Verdana, Tahoma, sans-serif; font-size: 12px; }

/*
You may need this to act like cellspacing=0 and
cellpadding=0 -- I don't work with tables so I'm not sure
*/
table tr, table td{ maring: 0; padding: 0; }

If you need the text in the paragraph tag to be different than the rest of the text on the page, you can use a class.

<p class="inTable">copy, copy, copy......</p>

p.inTable{ font-size: 10px; font-family: Georgia, serif; }

CSS and how you work with it is mainly a matter of preference when it comes to classes/ids and when and where you use them. Of course there are ways to help improve on just about any HTML/CSS file.

Keep in mind that CSS can be used to help keep your file size down. So adding classes and ids when they aren't needed will start to add more to the file size. Not much, but it's still adding some extra junk.

Also if you're new to CSS make sure to get familiar with the properties that you're working with. Know what gets inherited and what doesn't. That can save you some code to.

For example font-family is inherited while padding is not. What that means is that if you have code like so...

<div>
<p>This is a test</p>
</div>

...and you set the div to have font-family: Arial, sans-serif; -- the p tag inside that div will have the same font-family. But if your div has padding: 20px 10px; -- the p tag will not. It'll have it's own default padding (unless you specifically set it's padding elsewhere).