|
Separating style from content using CSS style sheets is great for cutting down load times for web pages; but you can reduce it even more by optimizing your CSS using a little shorthand for borders, padding, margins, fonts, and so on.
Say, for example, if you're styling a navigation bar it could end up looking something like this (as some of mine have!):
#navbar ul {
border-top: 1px;
border-right: 0;
border-left: 0;
border-bottom: 1px;
padding-right:0;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 5px;
margin-left: 0;
margin-bottom: 5px;
margin-right: 0
background-color: #336699;
color: #ffffff;
width: 100%;
text-align: center;
}
This is cumbersome and bulky, but you can shrink it down quite a bit simply by putting the padding all on one line, margins on another, borders on another, and so on - like this:
#navbar ul {
border: 1px 0 1px 0;
padding: 5px 0 5px 0;
margin: 10px 0 10px 0;
text-align: center;
width: 100%;
color: #fff;
background:#369;
}
The thing to remember is that it's always read clockwise, starting from the top: Top, Right, Bottom, Left. So we see in the above example that the borders are 1px for the Top, 0 for the Right, 1px for the Bottom, and 0 for the Left. Because the top and bottom settings are the same, as are the left and right, (for the padding and margins, too) you can shorten this even more so it becomes:
#navbar ul {
border: 1px 0;
padding: 5px 0;
margin: 10px 0;
width:100%;
text-align: center;
color:#fff;
background: #369;
}
If three different values are being used:
{
padding-top: 20px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
Here we see that padding-right and padding-left have the same value of 5px so they can be paired together. So, beginning from top going clockwise it becomes "top(20px), right and left(5px), bottom(10px)" like so:
{padding: 20px 5px 10px;}
Fonts can be dealt with in similar fashion:
{
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;
}
In this example, we can set the font-size and line-height together (if they're different) by indicating with a slash: 1em/1.5em, then setting the weight, style, and family like so:
{font: bold 1em/1.5em italic serif;}
As far as I know, this shorthand should work on most, if not all browsers.
And that's it! Using CSS shorthand you end up with a more streamlined style sheet that loads the page quicker keeping both guests and search engines happy!
|
One thing I dont understand is the
margin: 5px 4px 3px;
with only 3 defined (top, right, bottom) what does it use for the left? From you article I assume it pairs the left and right margin and the top and botom? IF so, that would mean the left margin for the above would be 4px right?
Also does this work the same in IE and FF?
One thing I dont understand is the
margin: 5px 4px 3px;
with only 3 defined (top, right, bottom) what does it use for the left? From you article I assume it pairs the left and right margin and the top and botom? IF so, that would mean the left margin for the above would be 4px right?
Also does this work the same in IE and FF?