CSS shortland is a technique of writing mulitple declarations and values in a single line of CSS code. The advantages of using shorthand is to primarily reduce the CSS file size, but there are other benefits. A bloated and disorganised stylesheet can be hard to debug if you encounter problems, especially if you wrote it and another unfortunate colleage has to fix it while your away sunning it in some hot climate.
To make it easy we’ll look at the most commonly used CSS declarations, write them in longhand, then sprinkle our magic, resulting in a neat, short line of code.
There are many permutations you can use with each declaration and using them all in an example would be a headache, so we’ll pick one, then simplify that, hopefully giving you a flavor of CSS shorthand.
0 values
The golden rule is if the value is 0 you don’t have to specify the unit (px/em/%). You may write:
01| padding: 10px 5px 0px 0px;
try
01| padding: 10px 5px 0 0;
Remove Selectors
A selector is basically the element you’re applying the styling to, for instance h1, h2, h2, div, strong, pre, ul, ol etc.. If your using a class (.classname) or an ID (#idname) you don’t need to include the selector within your declaration.
01| div#logowrap
let’s lose the selector from within this CSS declaration
01| #logowrap
So the selector in this case was div
* is the joker in the pack
Use * wisely in CSS as it’s a firey little monkey. * is a wildcard declaration, you can use it to set a group of declarations to all or parts of your design, for example:
01| * {
02| margin: 0;
03| }
This declaration would set the margin to zero on every element on your page. Alternatively, set this wildcard with an element, such as:
01| #menu * {
02| margin: 0;
03| }
This declaration would set the margin to zero on every element within #menu.
Backgrounds
Background properties include the ability to set a colour, an image, image position and image repetition. You could write:
01| background-image: url("logo.png");
02| background-position: top center;
03| background-repeat: no-repeat;
Becomes
01| background: url(logo.png) no-repeat top center;
Colours
The most common way of specifying a colour in CSS is to use hexadecimal notation: a (#) followed by six digits. One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:
#000000 becomes #000, #336699 becomes #369
This technique only works if you have three pairs, here are some examples where you can’t omit any values:
#010101, #223345, #FFF000
Margin
Apply margin to all four sides of an element like this:
01| margin-top:0px; 02| margin-right:10px; 03| margin-bottom:0px; 04| margin-left:10px;
Let’s simplify this even more by removing zero value prefixes and merging it into one declaration:
01| margin:0 10px 0 10px;
When applying padding, margin and border (and possibly a few others) you set these four values in a clockwise direction. Compare this to the hours on a clock, start with 12, 3, 6, 9, all in a clockwise direction. With this in mind there is another trick to slim this declaration down. Look out for two pairs, if the top and bottom match, and the left and right match then your a winner! Omit the 3rd and 4th values. The first value represents the top and bottom value, the second represents the left and right.
So let’s simplify this declaration down again with the pairing technique that’s just been explained:
01| margin:0 10px;
The result is the element would attain margin of 10px to the left and right sides, and zero to the top and bottom. Here are a few declarations where the pairing technique can’t be applied:
Padding
Same principles in padding as explained in margin above.
01| padding-top:0px; 02| padding-right:10px; 03| padding-bottom:0px; 04| padding-left:10px;
Becomes
01| padding: 0 10px;
Borders
Borders are a bit more complicated since they can also have a style and a colour. To give an element a one pixel solid black border on all sides, you could write:
01| border-width:1px; 02| border-style:solid; 03| border-color:#000;
Becomes
01| border:1px solid #000;
I typically write in order of width style color.
We can also set different widths on all four sides of the box element by writing:
01| border-top-width:1px; 02| border-right-width:2px; 03| border-bottom-width:3px; 04| border-left-width:4px;
The CSS shorthand for this would be:
01| border-width:1px 2px 3px 4px;
Finally we could style just the left and right like this
01| border-right:1px solid #000; 02| border-bottom:1px solid #000;
This would be
01| border:1px solid #000; 02| border-width:0 1px 1px 0;
Set a default style for all four sides then overwrite the widths below.
Fonts
There are many properties for font, just like the background properties. In a complex string you may write:
01| font-style:italic; 02| font-variant:small-caps; 03| font-weight:bold; 04| font-size:1em; 05| line-height:150%; 06| font-family:Verdana, Arial, sans-serif;
You could write
01| font:italic small-caps bold 1em/150% Verdana, Arial, sans-serif;
Lists
01| list-style-type:square; 02| list-style-position:inside; 03| list-style-image:url(filename.gif);
And finally
01| list-style:square inside url(filename.gif);
Credit to 456bereastreet for the inspiration to write this useful 10 shorthand CSS tips.
If you want to download a quick reference guide in PDF you can by clicking this link.
September 29th, 2008 at 4:12 pm
Wow, I’ve been using the border overloading one ever since I learned css, I’m so glad to see shortcuts and overloaded css functions so functional and easy to understand.
Thanks for the great list!
September 29th, 2008 at 5:25 pm
Hi,
Thanks for this great lineup. I’m a little sceptical though about the “Remove the selector” item. In most cases you can, but there are examples where a selector is necessairy.
Say you have the same class, which u want to use for 1. divs, and 2. paragraphs. You should apply the selector then, no?
I think therefore, that it is better to always apply, then to generally leave out, and encounter conflicts.
All and all still a great line up!
September 29th, 2008 at 5:48 pm
Hi Kim thanks for the comments.
Selectors are a debatable subject in CSS, some deciding to use them and others deciding against. I think the golden rule here is to be consistent in you choice, either use them all the time or not at all.
I personally don’t use them because sometimes I want the same class and styling on several different elements, using selectors in this case would cause me problems.
Where you want to use the same class for 1. divs, and 2. paragraphs, you shouldn’t include the selector. Having div.classname would mean these styling declarations won’t apply to the paragraphs with that class name.
I feel the only use of a selector in your CSS file is if you have no other choice but to use the same class name on different elements in your page, using the selector to distinguish between them in your CSS file.
Hope that makes sense
September 29th, 2008 at 7:31 pm
For the example:
#header #menu * {
margin: 0;
}
You say “This declaration would set the margin to zero on every element within #menu.”
But I believe this is slightly erroneous - it would only set the margin to zero on elements of #menu if #menu is a descendant of #header.
September 29th, 2008 at 8:26 pm
Yes your right, this example does rely on #menu, in simple terms, being with an element with an ID of header.
#menu * {
margin: 0;
}
This would have been a simpler example but I think we’re on the same wavelength.
I will correct the article so others won’t get confused, thanks again
September 30th, 2008 at 9:08 pm
Hi there,
Nice list, very well written. One thing though, and please correct me if I am mistaken but isnt this:
#menu * {
margin: 0;
}
A little redundant as the * could be omitted like below:
#menu {
margin:0;
}
Am I wrong here? Anyway, again, great list.
Regards,
Drew
September 30th, 2008 at 9:15 pm
[...] The Frog Blog » 10 CSS shorthand techniques you’ll use everyday (tags: http://www.thefloatingfrog.co.uk 2008 mes8 dia30 top10 shorthand CSS blog_post) [...]
September 30th, 2008 at 9:15 pm
Hi Drew
If you had a DIV let’s say with the ID #menu;
#menu {
margin: 0;
}
Then JUST the DIV would have a margin of zero, now the following declaration instructs every type of element (p, ul, li, ol etc etc) WITHIN #menu to have a margin of zero, NOT the DIV itself
#menu * {
margin: 0;
}
So for example if within div#menu there was a P then that P would have a margin of zero.
Hope that makes sense.
October 1st, 2008 at 11:40 am
[...] the css file smaller, of course, thus the downloading time will be smaller also. Other website from Frog Blog also teach how to use the CSS Shortcut as [...]
October 1st, 2008 at 12:02 pm
Can I just say the design of your site is lovely. The colours you’ve used for the code snippets look fantastic, great work.
Good tips to, admittedly I didn’t learn anything new, but keep up the good work nonetheless!
October 1st, 2008 at 12:10 pm
Thanks Rob appreciate the kind comments.
I guess this article serves as a reminder to merely improve one’s CSS and/or maintain high standards.
October 1st, 2008 at 2:20 pm
hi very good all this for sure will be a great help to me,
I am very grateful to you
October 1st, 2008 at 2:30 pm
I read in one of the links you gave that an addition to your colours section could be that #A0B0C0 can be abbreviated to #ABC. I did not know this.
Keeping stylesheets small is definitely worth the effort - especially in high traffic sites generating gigabytes of traffic every month for the CSS along.
Keep your class and id names small, your syntax succint, and minimize it when you’re publishing it to remove superfluous whitespace (keeping the original of course!). CSS drive have a good compressor which I used on http://www.lrseries.com/ to good effect. http://www.cssdrive.com/index.php/main/csscompressor/
October 1st, 2008 at 2:40 pm
Dude, #A0B0C0 can’t be abbreviated to #ABC, who told you that? Or am I mistaken?
October 1st, 2008 at 2:44 pm
Dude - this dude does, maybe it was an erroneous example?
http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/#comment1
October 1st, 2008 at 2:52 pm
Of course it’s nonsense … how would the renderer know whether you meant #AABBCC or #A0B0C0 … move along, nothing to see here.
October 1st, 2008 at 4:46 pm
You can make the last border example even shorter
your example:
border:1px solid #000;
border-width:0 1px 1px 0;
because you will specify the width in the next line you can take it out on the 1st like this:
border: solid #000;
border-width:0 1px 1px 0;
This works well and validates in jigsaw
October 2nd, 2008 at 1:24 pm
Never used the lists shorthand before. I’m glad that I read this.
October 2nd, 2008 at 2:14 pm
Be explicit about the background colour too.
background: transparent url(logo.png) no-repeat top center;
October 2nd, 2008 at 2:37 pm
background: url(logo.png) no-repeat top center; - very useful, but if the image it’s too big, the site will load too hard …
October 2nd, 2008 at 3:14 pm
You forgot border-color:
border-color: #666 #333 #333 #666;
October 2nd, 2008 at 3:34 pm
Hi Ben, you’ve taught me something there cheers
October 2nd, 2008 at 3:51 pm
That’s a good one Ben.
Are there any contractions where you can abbreviate the north, east, south, west values so that you didn’t have to specify all 4 if a couple of them were identical?
October 2nd, 2008 at 3:58 pm
In the first example “0 Values” it says: “if the value is 0 you don’t have to specify the syntax (px/em/%)”
The word ’syntax’ should be replaced with the word ‘unit’
In the “Backgrounds” example, there is an opportunity to shorten the rule just a bit more:
“background: url(logo.png) no-repeat top center;”
can be written:
“background: url(logo.png) no-repeat 0 50%;”
(you just have to be careful to always put the vertical value before the horizontal value)
October 2nd, 2008 at 4:23 pm
[...] Floral Brushes for Photoshop 35 Photoshop Tutorials Inspired by Apple 25 Ways to Spice Up Photos 10 CSS shorthand techniques you’ll use everyday Body Border 2: Fade In with Gradient BigTarget.js Animate a hover with jQuery Test your Website: A [...]
October 2nd, 2008 at 4:24 pm
very helpfil comment thanks for this i am really gonna use it..
October 2nd, 2008 at 5:03 pm
@squid
North East South west can be abbreviated to North/South East/west if the pairings match:
margin:10px 20px 10px 20px; becomes margin:10px 20px;
I’d treat this as the simplest Declaration there is
October 2nd, 2008 at 5:04 pm
@Andy Ford
Thanks Andy, you’re entirely correct.
October 2nd, 2008 at 6:13 pm
I have to disagree with your colours recommendation. Consistent styling isn’t just something for the end product: future maintainers will have to be able to read your CSS someday, and having multiple (and for maintainers, sometimes confusing) ways of expressing the same thing– in this case, a colour– only increases the cognitive load.
Who knows? It may someday be you who has to go back and revise your CSS.
Programmers like to say that you have to be smarter to fix a broken program than it was to write the program in the first place. If you write at the limits of your cleverness, you are by definition not clever enough to fix it if it doesn’t work. Having multiple descriptions for a colour is one of those “clever” techniques that makes it hard to find and fix problems later.
October 2nd, 2008 at 8:10 pm
Hi Elf, I am inclined to agree with you on this - I think that sites should maintain a longer format of the CSS file where all elements are consistently named/formatted and another file which is compressed as far as possible. Whether it is practical to do this in practise depends on how you organise your development - automated build tools certainly help.
October 2nd, 2008 at 8:21 pm
Great stuff. You know, this kind of information usually takes a while to collect and figure out — unless you happen to work with a guru who knows everything. Thanks for putting this together.
Question: Sometimes, I see three values in a top, right, bottom, left scenario. For example:
margin: 2px 4px 6px;
What’s the significance of that? (And I’ve seen it often enough from different sources to know that it’s not a typo.)
And by the way, what’s the deal with underscores and hyphens in class or selector names? Are those still taboo?
Just wondering.
October 2nd, 2008 at 11:51 pm
If you only declare two or three values, the undeclared values are taken from the opposing side.
margin: 10px 20px; /* 2 values */
Top and bottom is 10px, left and right is 20px
margin: 10px 20px 30px; /* 3 values */
Top is 10px, left and right is 20px and the bottom margin is 30px;
Also underscores and hyphens in class, ID and selector names are just down to the developer coding the CSS/XHTML, they have no relevance. I guess you can call them what you will
October 3rd, 2008 at 5:53 am
[...] TITLE!! The Frog Blog » 10 CSS shorthand techniques youâll use everyday Body Border 2: Fade In with Gradient - CSS-Tricks Quick IE6 Fixes - Webmonkey The Fed just released [...]
October 3rd, 2008 at 5:09 pm
[...] The Frog Blog » 10 CSS shorthand techniques you’ll use everyday (tags: css webdesign forblog) [...]
October 5th, 2008 at 4:27 pm
[...] 10 CSS shorthand techniques you’ll use everyday by The Floating Frog [...]
October 6th, 2008 at 5:08 am
[...] Del.icio.us The Frog Blog » 10 CSS shorthand techniques you’ll use everyday Ten Drupal 6 modules for every site | …himerus …himpressive Audit Files - Drupal [...]
October 14th, 2008 at 12:40 pm
thank u r information
it very useful
u r blog Is very nice
October 26th, 2008 at 2:13 pm
[...] 10 tecnicas de css para nosso dia-a-dia [...]
October 30th, 2008 at 12:16 am
[...] guess your too good for this, it’s like child’s play, right? Well have a look at this, 10 CSS shorthand techniques you’ll use everyday, it will be more up your [...]
November 8th, 2008 at 5:15 pm
[...] 10 CSS shorthand techniques you’ll use everyday [...]
November 27th, 2008 at 7:07 am
[...] bl.a. i: 10 CSS shorthand techniques you’ll use everyday Jag tycker att universalselektorn (*) oftast inte behöver användas. För browser-reset använder [...]
December 31st, 2008 at 10:00 pm
It took me forever to remember the order of the values in the margins and padding shorthands
February 7th, 2009 at 5:39 pm
[...] Big mistake that was. Spent a few hours fixing all of the damage I caused. I found the tips from David’s old blog. Actually found a number of good resources…a few of which I [...]
February 20th, 2009 at 10:33 am
[...] CSS shortland is a technique of writing mulitple declarations and values in a single line of CSS code. The advantages of using shorthand is to primarily reduce the CSS file size, but there are other benefits. A bloated and disorganised stylesheet can be hard to debug if you encounter problems, especially if you wrote it and another unfortunate colleage has to fix it while your away sunning it in some hot climate. CSS shorthand techniques [...]
April 16th, 2009 at 3:21 am
Man I loved your blog has great tips on css, so its great job, congratulations.
we4 design studio’s last blog post..Bilheteria Brasília Shopping
April 17th, 2009 at 12:29 pm
[...] 10 CSS shorthand techniques you’ll use everyday [...]
April 22nd, 2009 at 6:58 pm
[...] 10 CSS shorthand techniques you’ll use everyday [...]
May 8th, 2009 at 7:14 am
This is very useful post. Shorthand really makes your work easy and can save time. Nice post
May 12th, 2009 at 5:09 pm
[...] 10 CSS shorthand techniques you’ll use everyday [...]
May 30th, 2009 at 2:00 pm
[...] 10 CSS Shorthand Techniques You’ll Use Everyday [...]
May 30th, 2009 at 9:06 pm
Nice list, only one I don’t use for everything is the font one.
June 1st, 2009 at 12:28 am
Nice list. Don’t forget to mention that if you use the “font” shorthand, you have to put the different properties in a specified order, otherwise they won’t work. Which is basically why I personally don’t use that one.
Louis’s last blog post..How To Put a Multi-Line Indent on a Styled Blockquote
June 27th, 2009 at 10:35 am
Nice tips… ever since I learned CSS, I’ve been doing things the hard way until the other day a friend told me it was messy, so I better get my act together…. =P