Newby Question: Cleaning up my CSS

@leaningAug 31.2006

Hello all,

Still learning CSS. AS I learn new things, I apply them, but it is a slow process.

Here is a piece of my CSS:

.a1 {
font : 16px Arial , Helvetica , Verdana , sans-serif;
color : rgb(0 , 0 , 0);}
.a2 {
font : bold 16px Arial , Helvetica , Verdana , sans-serif;
color : rgb(0 , 0 , 0);}
.a3{
font : 12px Arial , Helvetica , Verdana , sans-serif;
color : rgb(0 , 0 , 0);}
.a4{
font : bold 12px Arial , Helvetica , Verdana , sans-serif;
color : rgb(0 , 0 , 0);}

The way I am using this is a1 is the code for an Arial 16px black font, a2 is the same but bolded, a3 is a size change, a4 is the size change bolded.

I do this same setup with all the colors that I use (.b1 for white 12, .c1 for Navy 12, etc.)

Then in the html, I just put <p class=”a2″>words</p> and the font is changed to the size/color that I want. No <font> tags in the html, no <b> tags, etc.

Looking at the CSS, is there a way to squash that info up a bit. I want to separate the classes by commas but each class is diffeerent from the preceding one by one thing.

The normal font for the page is 12 pt Arial (mostly Navy-colored).

???

Appreciate the help and alleviation of confusion. ?

VR/

JOhn

P.S. I already have the px versus em/% thing on my to-do list. It is easier for me to use px, but that hampers the viewer abit for re-sizing. Still working that one.

to post a comment

CSS

4 Comments(s) _↴

@ray326Aug 31.2006 — #<humor>Wow, you generate code bad enough to be Microsoft Word! ? </humor>

Try factoring out the common rules like the font-family and color.

<i>
 </i>body {
 font-family:Arial , Helvetica , Verdana , sans-serif;
 font-size: 12pt;
 color:#005; /*navy?*/
 }

Then make meaningful classes for the variants.

<i>
 </i>.bold { font-weight:bold }
 .big { font-size:16px }
 .small { font-size:12px }
 .black { color:#000 }

BUT having said that, you need to mark up your content in a meaningful way at which point you won't need the classes at all. You'll be styling h*, em, strong, q, p and so forth.

@leaningauthorAug 31.2006 — #Ray,

Thanks for the reply.

1) If you make a class for "big" and then another one for "black", but what you want for the html is "big" and "black", now you can either make a "bigblack" class or do what I do with the a2, a3 stuff..does it make a difference?

2) Also, by "styling" , do you mean style="blah;" in your html? Depending on the length of the style description, class="a2" takes up less writing and reduces the html file size. I used to have alot of "style=" stuff in there, but when I go to the a2 method, the css file is 7kb or so, and the html files (all 40 of them) are reduced by 3kb or so each (some more) . 1 or 2kb gain in an external css file versus 120kb in the overall site is a big change. All those style="blah" tags in the html add up fast.

3) I tried to move the font-family to just the body tag and delete all the others in the css file (a2, a: hover, etc.), but when I did that (left font-family only one place -in the body tag), the font SIZES jumped all over the place in the finished page ....?? So, I stuck them all in there again. I thought that whatever was in the body tag became the baseline for the whole page (so you didn't have to put that same info in all the other classes, but for some reason, the final look jumped around. I still have to play with that one)

4) what I was asking was some way to combine the classes..

a2, b2, b2 {bold; arial}

but then I need another for color: a2 (white)

b2 (blue), etc.

so I wind up with two .a2's

I think I am getting wrapped around the CSS axle here :eek:

VR/

John

@ray326Aug 31.2006 — #

1. <p class="big black">...</p>

2. No, I mean using element selectors. E.g.,

em { font-style: italic; color: #800; }

strong { font-style: normal; font-weight: bold; color: #008; }

3. Yes, the styles for the body element apply generally to the whole page unless overridden elsewhere. If sizes are changing then you're telling them to change somewhere.

4. See above.

Yes, you need to look at the links in my sig to get unwound. You haven't quite grokked it yet.

@leaningauthorAug 31.2006 — #Found the basic info I needed at http://www.brainjar.com/css/using/default2.asp:

<quote>

This is known as grouping. Also note that a tag name can appear in any number of style rules.

h1, h2, h3 { background-color: #ffff00 }

h1 { color: red }

[B]The styles of all rules that match a given element will be applied.[/B]

</quote>

so, i can just do (using my example from my original post)

a1, a2, a3, a4 {font : Arial , Helvetica , Verdana , sans-serif; color : rgb(0 , 0 , 0);}

a1{font :16px;}

a2{font :bold 16px;}

a3{font: 12px;}

a4{font: bold 12px;}

which should cut my CSS file down another KB or so.

Also found this:

<quote>

Multiple Classes

A tag can be assigned more than one class by specifying a list of class names separated by spaces in its STYLE attribute. Consider this code,

.warning { color: red }

.highlight { background-color: yellow }

...

<h3 class="warning highlight">Danger</h3>

<p class="highlight">An important point.</p>

The H3 element would appear as red text on a yellow background because both classes are applied. On the P element however, only the background color is affected.

</quote>

This is the explanation for your help where you talked about combining a "big" class with a "black" class to make "big black".

Good stuff. Thanks for your guidance!

VR/

John

Also in #CSS _↴

Css relative overlay causing gap at bottom of page Background image gone in IE6,. Negative margin??[RESOLVED] Min Height

Success!

Help @leaning spread the word by sharing this article on Twitter...

Tweet This

Newby Question: Cleaning up my CSS

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Newby Question: Cleaning up my CSS

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴