|
| |
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
 |
CSS Code Bloat - 5/20/2003 17:34:13
Okay, now that we have a forum to discuss CSS specifically, I wanted to share some information with those of you making the shift from old presentational markup to the new improved use of Cascading Style Sheets.
After hand coding style sheets for over a couple of years, I' ve learned quite a few things along the way. Katherine' s tutorials were a great start for me and many others as they helped me to understand CSS in layman' s terms.
What eventually happens is your external style sheets become bloated. If they are over 4-5k in size, then you may need to do some trimming.
One of the first places you can start is with color values. Anytime a hexidecimal color value is used, it contains six digits/characters that represent the color value. If you are like me and try to use as many colors from the web safe color palette, you have a slight advantage in trimming some fat.
All web safe colors are achieved using paired values. For example...
#ffffff (white) #000000 (black) #ff0000 (red), etc.
Notice that each one of those contains three pairs. Anytime you are working with paired color values, you can use the CSS Shorthand method to trim out some fat. The above effectively becomes...
#fff (white) #000 (black) #f00 (red)
You use the first letter of each pair i.e. #ff0000 can be reduced to #f00.
If you are not using web safe colors, you would not be able to utilize the CSS Shorthand on your color attributes. Oh, you don' t have to use web safe colors for your site. You can use whatever values you wish.
My goal is to use web safe colors as much as I can especially when it comes to keeping my css files lean and mean. Usually you can find a web safe color that is very close to the color you may have selected using an eyedropper tool. Here is an example...
#efefef is a light shade of gray that I' ve been using for years. Back in the days, Netscape 4.x would display that color exactly the same as IE would.
Now I am using #ccc to trim out the bloat. That color appears consistent across most browsers, forget about NN4.x!
< Message edited by pageoneresults -- 5/20/2003 5:49 PM >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
|
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: CSS Bloat - 5/20/2003 17:38:16
Another CSS Bloat tip...
margin-top:15px;
margin-right:10px;
margin-bottom:15px;
margin-left:5px;
...can be effectively trimmed to...
margin:5px 10px 15px 5px;
When using the CSS Shorthand properties as I' ve done above, they work in a clockwise fashion; top, right, bottom, left.
Now, if I have margins that are the same for top/bottom and right/left, I can do this...
margin:5px 10px;
Now my top/bottom margins are 5px and my right/left margins are 10px.
Get it?
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
_gail
Posts: 2874
From: So FL
Status: offline
|
RE: CSS Code Bloat - 5/21/2003 8:28:58
quote:
After hand coding style sheets for over a couple of years, I' ve learned quite a few things along the way. Katherine' s tutorials were a great start for me and many others as they helped me to understand CSS in layman' s terms.
Unless I' m not looking in the right place, other than funky forms, the only CSS exercises available at Outfront are about using it for Text Formatting. Am I correct? If so, how ' bout an EASY, step-by-step tutorial on CSS POSITIONING, sort of an " An Introduction to Cascading Style Sheets Part IV?!"
This would, imho, be of significant help to folk like me who know nothing about CSS positioning. Like P1R says, Katherine' s article " An Introduction to Cascading Style Sheets" was a great start. It was written in January of 2001.
thanks for the consideration!
gail
< Message edited by _gail -- 5/21/2003 8:30 AM >
_____________________________
Digicamhelp - Easiest place on the web to learn about Digit@l Cameras & Photography
| |
|
|
|
abbeyvet
Posts: 5095
From: Kilkenny Ireland
Status: offline
|
RE: CSS Code Bloat - 5/21/2003 11:12:18
Actually I look at that CSS tutorial and cringe now a bit. Things have moved on so much, but I am glad people have found it useful.
Writing a tutorial about positioning would, I am afraid, be beyond me as it is such a broad topic, with so many ways to approach it. I certainly have only scratched the surface on the topic - you can really do so much and in so many ways that saying " this is how you do it" would never, ever be possible.
I really think that best way to learn it is to take a page, and a stylesheet, from some of the many places that have sample layouts, and just play around with it.
This is a very useful site for that as the layouts are unembellished so it is easier to see how they are done:
http://glish.com/css/
this one is pretty good too:
http://www.purpleprodigy.com/presentation/page_layouts/index.cfm
_____________________________
Katherine
:: InKK Design :: InKK Domains
| |
|
|
|
DaAngel
Posts: 300
Joined: 3/30/2003
From: Posting Machine - Belfast Child
Status: offline
|
RE: CSS Code Bloat - 5/22/2003 1:34:34
Bob' s up and down........I want to learn.......
nudge~nudge...... write another article......
please.......
Note......For any one that has noticed the dimise of Web Design Carolina....It will be back shortly....under a new improved guise.
_____________________________
North Carolina Web Design
Rockingham City Web Design
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
