css file takes too long to load who knows good shorthand?

im trying to compress my whole css file but it takes way to long to load

[ezyid]

hey guys.
im not that good at css as you may find out, but i am trying to get my file to load faster than it does.
and i think its bloated wth excess text.
can someone help me format this file down so it can load alot faster

thanx guys :)

BODY { background-color: white }

BODY { margin: 0cm 0cm 0cm 0cm }

BODY {padding: 0cm 0cm 0cm 0cm }

table.greyback { font: normal 65% arial, verdana, helvetica, sans-serif; color: 000000; }

p { font: normal 85% arial, verdana, helvetica, sans-serif; color: 000000; text-aign: left;

}

#text { font: normal bold 100% arial, verdana, helvetica, sans-serif; color: 000000; text-aign: left; }

h1 { font: normal bold 100% arial, verdana, helvetica, sans-serif; color: #000000; }

h2 { font: normal bold 130% arial, verdana, helvetica, sans-serif; color: red; }

h3 { font: normal 60% arial, verdana, helvetica, sans-serif; color: 000000; text-aign:center; }

h4 { font: normal bold 100% arial, verdana, helvetica, sans-serif; color: red; }

h1, h2, h3, p, h4 {display: inline;}

a:link { color: #000000; }

a:visited { color: #000000; }

a:hover { background-color: #FFFFFF; color: #CCCCCC; }

a:active { color: #000000; }

#btmnav { font: normal 80% arial, verdana, helvetica, sans-serif; color: 000000; text-

align: center; }

#btm { font: normal 60% arial, verdana, helvetica, sans-serif; color: 000000; text-align:

center; }

#foot { font: normal 60% arial, verdana, helvetica, sans-serif; color: 000000; text-align: center; }

as usual thankyou for helping me!

steve.

[BonRouge]

That's it?!? If that's all your file there's no way it's taking too long to load.

Having said that, here are a few pointers.

1. You don't need to separate different properties of your body style. Put them together.
   
2. 0 doesn't need 'px' or 'pt' or anything - 0 is zero of anything you want to count.
   
3. For things like margin and border, you don't need to set all four values. '10px' will give you 10px all around. '10px 5px' will give you 10px top and bottom borders and 5px left and right borders. '10px 5px 0' will give you a 10px top border, 5px right and left and no bottom border.
   
4. 'color :000000' is wrong. You need '#000000' or, more easily, 'black' (you've actually written it correctly a few times but wrongly a few times).
   
5. Be careful with spelling. 'text-aign' is wrong (same thing here - you've written it correctly a few times, but wrongly a few times too).
   

You might want to try validating your css with W3C and you'll find some problems.

I hope this helps.

[supermanjnk]

for colors that are all the same like white black the grey your using. You can use three of the letters instead of all 6, not sure if it's considered valid code, but it works, so #000000 would become #000 and #CCCCCC would become #CCC ect

[ezyid]

wicked guys thankyou for the help. ill try to validate the css.
is there a good site that can check the validation but actually give me a "stupid person" answer to whats wrong.. as ive validated before but the thing told me soo much "geek" tech i was like na flag..

thanx again.

[DRock80]

That's certainly not what's holding up your website, bu there's a lot that can be done to condense this file You're redefining elements multiple times to add a single property. Do it all under one definition of that element. Also, if you're setting all sides of a padding, margin, border to the same number, a single number will suffice for all four sides. For instance, Change:

BODY { background-color: white }
BODY { margin: 0cm 0cm 0cm 0cm }
BODY {padding: 0cm 0cm 0cm 0cm }

- To -

BODY{
background-color: #fff;
margin: 0cm;
padding: 0cm;
}

While my example takes more lines, it's probably an ever so slightly smaller file. More importantly, it leads to style sheets that are much easier to maintain!

[encyclo]

There's a lot of redundancy in the stylesheet as presented, but even with that, it shouldn't be long to load. A couple of things: you're using the same font everywhere, so I've defined it once on the

body

element. I removed Verdana from the list as any machine which has Verdana has Arial also, so the second choice would never be called. Also, I've defined the

body

element color as black, meaning it doesn't need to be repeated elsewhere.

Here's what I've distilled:

body {background:#fff;color:#000;margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;}
.greyback {font-size:65%;}
p {font-size:85%;}
h1, h4, #text {font-size:100%;font-weight:bold;}
h2 {font-size:130%;color:#f00;}
h3, #btm, #foot {font-size:60%;text-align:center;}
h4 {color:red;}
h1, h2, h3, h4, p {display:inline;}
a {color:#000;}
a:hover {color:#ccc;}
#btmnav {font-size:80%;text-align:center;}

One major issue that I haven't attempted to address is the problems in logic which mean that the stylesheet as such still contains problems. In particular, you are defining certain items such as

h3

with the rule

text-align:center;

, however, you are also setting it as

display:inline;

, so the first rule won't work. Without seeing the associated markup, it is impossible to diagnose an appropriate solution.

[ezyid]

guys thank you so very much!
the reasion i have "display:inline;"
is because of my question here : [webmasterworld.com...]

thankyou again for the great help!.
steve

[ezyid]

encyclo, mate your a css GOD!
now i think i just need to validate it lol...
good luck..
steve.