I did some cosmetic surgery on the site and managed to cut down the size of the CSS from 21K to 17K to 12K.
Mostly I did this by removing classes I didn’t use and more importantly by avoiding to use declarations like “font-family”, “font-size”, “margin-left”, “margin-right”, “padding-left”, “padding-right”, “background-color”, “background-image” etc, as much as I could.
Background
For example by changing the following:
background-image: url(bodybg.gif);to:
background-attachment:fixed;
background-color: #B53500;
background: #B53500 url(bodybg.gif) fixed;
Margins and Paddings
The same thing can be done with margins and padding indicators:
padding-top: 10px;can be written like this:
padding-right: 0;
padding-bottom: 20px;
padding-left: 20px;
padding: 10px 0 20px 20px;
Keeping in mind that the order start from the top in a clockwise direction:
TOP - RIGHT - BOTTOM - LEFT
Fonts
Fonts can be simplified as well:
font-weight: bold;Can be simplified to:
font-style: italic;
font-size: 12px;
font-family: times, sans-serif;
font:bold italic 12px times, sans-serif;
Unnecessary Spaces
Another good size reducing trick is, instead of using multiple spaces to indent your code lines, just use tabs.
table
??{
????border-collapse: collapse;
??}
Using tabs reduces the number of characters need for indenting, from 8 to 3 in this case. This may not sound much at first but as your project gets bigger and so with it your CSS files, the difference will be dramatically quite notable.
Tanin 
Ness 
Andrew 
Ramona 
Nees 
chris Stewart 
…
I think you’re a geek.
-Shade
…
I wouldn’t say all that unless he was pasty white from lack of sun. =p
…
does all that stuff really need to be posted?
…
It is his site…
Well Bob,
…I think the question you should ask yourself is, should you comment on a topic when you don’t know what it is about? And thank you, Shade, I hold that title with pride! *puffs chest out*
…
i know what its about. ive been shorthanding my code for a long time. i just didnt see the point.
…
His petty victories over small CSS irritants amuse him, and makes him feel warmth within his tappity soul…
…
No, wait, that’s me!
-Shade
PS - TCorp:
“The big delete my cookies on this computer button”
HA HA HA!
…
Wow…from the Eminem forum AND knows CSS…what a rare and oddly intriguing combination…
^.o
Shade,
The title of the button was already pretty long, so i though, why not make it amusing if I have to stick with a long title anyway….?
…
isnt it?
…
I remeber doing this on some community site I was a member in, since they didnt allow you to link CSS files and they gave you a characters limit on the part where you could type your HTML, you had to put everything together, like on the scrollbars code…
this
scrollbar-3dlight-color:#1a1a1a;scrollbar-arrow-color:#00C000;
scrollbar-face-color:#1a1a1a;
scrollbar-highlight-color:#2a2a2a;
scrollbar-darkshadow-color:#2a2a2a;
scrollbar-shadow-color:#2a2a2a;
scrollbar-track-color:#1a1a1a;
would be..
…
Oopz.
--style tag here--body{
scrollbar-track-color:#1a1a1a;
scrollbar-highlight-color:#2a2a2a;
scrollbar-3dlight-color:#1a1a1a;
scrollbar-darkshadow-color:#2a2a2a;
scrollbar-shadow-color:#2a2a2a;
scrollbar-arrow-color:#404040;
scrollbar-face-color:#1a1a1a}
–style tag here lol—
Raul,
…are you talking about style manipulation via code injection….? And in order to overcome the field limit in the database, you basically wrote the entire makeup of the object (body) in one line?
(I had to edit your post, since it was stretching out the layout)
btw, scrollbar isn’t really valid CSS code (only supported by IE5.5+), so we don’t use that
tcorp
is there supposed to be a bg image in your new CSS or did you take it out? i wasnt sure because the background in firefox on my laptop shows up white. it showed up before but i know you changed it and now its not. i looked in your css and saw that there is supposed to be an image.
…
The body background had an image but it was commented out a few days ago.
The #container has a very subtile mosaic background comprised of #FFFFFF, #FCFCFC, #FBFBFB and #FAFAFA. The colors don’t show up on the LCD display of my laptop either but they look fine on my TFT display and CRT monitor. Maybe I’ll darken it a bit later…
…
Lol, sorry about that, but yeah thats what i used to do before, putting the ; between each value and keep them in the same line instead of hitting enter each time I typed one.
ahh
okay, that makes sense.
i used to write all my values on the same line as well but i found it easier to divide and read when i was editing/debugging, if i wrote them each on their own lines.
this is hybrid, btw. lol
hybrid?
Well, there goes your theory that you don’t spend any time here and my theory that “bob” actually may know a bit of CSS…I should’ve known it was you since you’re the only person ever to search for “/designer” on my site..Here’s what you’re looking for…
btw, Shade…
….if you’re reading this, remind me to tell you friday on AIM how to solve our bbcode-for-php-tag paradox. I found a way to do it right !
…
lol, your news blog always has something interesting to read so i had to stop by. and i do know css. im currently writing the css for my website.
…
ok, i see the mosaic bg now. i just put firefox on my work computer and it shows up with FF but now with IE, even though it should have, judging by the monitor im on. IE = s*it.
…
1 2 3 4 5 6 7 8 9 10<? echo "booya!!"; phpinfo (); function test() {indented; //indented again code; code; } ?><a href="http://magnablog.0xtc.com/">tcorp</a>clear text and not formatted in html</a> <!-- where the heck is this last span tag coming from ? -->