10 CSS shorthand techniques you’ll use everyday
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.
Leave a reply below
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!
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!
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
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.
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
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
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.
Pingback: rascunho » Blog Archive » links for 2008-09-30
Pingback: Variolicious
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!
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.
hi very good all this for sure will be a great help to me,
I am very grateful to you
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/
Dude, #A0B0C0 can’t be abbreviated to #ABC, who told you that? Or am I mistaken?
Dude – this dude does, maybe it was an erroneous example?
http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/#comment1
Of course it’s nonsense … how would the renderer know whether you meant #AABBCC or #A0B0C0 … move along, nothing to see here.
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
Never used the lists shorthand before. I’m glad that I read this.
Be explicit about the background colour too.
background: transparent url(logo.png) no-repeat top center;
background: url(logo.png) no-repeat top center; – very useful, but if the image it’s too big, the site will load too hard …
You forgot border-color:
border-color: #666 #333 #333 #666;
Hi Ben, you’ve taught me something there cheers
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?
@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
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)
Pingback: Ethan’s Blog » Blog Archive » New Year (Jewish)
very helpfil comment thanks for this i am really gonna use it..
@Andy Ford
Thanks Andy, you’re entirely correct.
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.
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.
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.
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
Pingback: [root@EGA]# » Blog Archive » links - 20081002
Pingback: JeremiahTolbert.com » Blog Archive » links for 2008-10-03
Pingback: Link Post Sunday 10/5 | Mr Sun Studios
Pingback: Daily Del.icio.us
thank u r information
it very useful
u r blog Is very nice
Pingback: Links for 2008-10-26 [del.icio.us] | Blog do Camillo - O dia-a-dia de um Desenvolvedor Web
Pingback: The Frog Blog » CSS for ABSOLUTE BEGINNERS - shaping up with CSS
Pingback: Link Love Time! SEO Forecasting, SEM Tools, Free Ivy League Business Courses And More | SEO ROI Services
Pingback: lillbra » Blog Archive » 4 css-tips jag INTE följer
It took me forever to remember the order of the values in the margins and padding shorthands
Pingback: With great power comes great responsibility | qrisper
Pingback: 10 CSS shorthand techniques | just4freaks.de
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
Pingback: 84 Amazingly Useful CSS Tips & Resources | Hi, I'm Grace Smith
Pingback: 84 Amazingly Useful CSS Tips & Resources | Grace Smith | cssOrigins.com
This is very useful post. Shorthand really makes your work easy and can save time. Nice post
Pingback: 84 recursos y consejos sobre CSS « GoVisual
Pingback: 10 CSS Shorthand Techniques You’ll Use Everyday | Design Newz
Nice list, only one I don’t use for everything is the font one.
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
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
Pingback: 84 Amazingly Useful CSS Tips & Resources « Knowledge Articles
Pingback: CSS Inheritance: Slideshare Presentation | Frog's Digital Design Blog
Pingback: A Comprehensive CSS Development Guide For Beginners & Experts « deCode10 – trends, technologies & more …
writing it the shorthand way is important – true – but avoiding redundancy is imho more important. optimizing properties is quite easy but cleaning up selectors is a pain in the azz, because you also have to change the markup.
However: great article – perfect for mailing it to some people at work