There have been a number of occasions when looking over other developer’s CSS I notice bits of code similar to the following…
#div {
margin-top: 20px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 25px;
padding-top: 10px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-color: #666666;
font-family: Verdana, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
}The above code is littered with properties that could easily be combined for more legible code and decreased file size. Some properties might even be removed altogether since they default to the desired value. Below you will find before and after examples of some of the most useful CSS shorthand properties. As a general rule any browser later than IE5 should support all of these.
#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
/* (auto, 0, px, pt, em or % ) */
}#div {
margin:0 5px 10px 15px;
/* (top right bottom left) */
}and
#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}#div {
margin:10px 20px 0;
/* (top right/left bottom) */
}and
#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}#div {
margin:0 auto;
/* (top/bottom left/right) */
}and
#div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}#div {
margin:50px;
/* (top/right/bottom/left) */
}#div {
border-width: 5px;
/* (thin, thick, medium or set value) (default = medium) */
border-style: dotted;
/* (solid, dashed, dotted, double, etc) (default = none) */
border-color: blue;
/* (named, hex, rgb or 0-255) (default = value of elements/elements parent color property) */
}#div {
border:5px dotted blue;
}and
#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}#div {
border-right:2px solid #666;
}and
#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}#div {
border-width:3px 2px;
}#div {
background-color: #CCCCCC;
/* (named, hex, rgb or 0-255) (default = transparent) */
background-image: url(images/bg.gif);
/* (url or none) (default = none) */
background-repeat: no-repeat;
/* (repeat, repeat-x, repeat-y or no-repeat) (default = repeat) */
background-attachment: scroll;
/* (fixed or scroll) (default = scroll) */
background-position: top left;
/* (top, right, left, bottom or center) (default = 0% 0%) */
}#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}#div {
font-family: Verdana, Arial, Helvetica;
/* (Verdana, Arial, "Times New Roman", etc) (default = varies by browser) */
font-size: 12px;
/* (xx-small, medium, x-large, set value, etc) (default = medium) */
font-weight: bold;
/* (normal, bold, bolder, lighter, 100-900 or inherit) (default = normal) */
font-style: italic;
/* (normal, italic or oblique) (default = normal) */
font-variant: normal;
/* (normal or small-caps) (default = normal) */
line-height: 1.5;
/* (normal, px, pt, em, num or %) (default = normal) */
}#div {
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}#div {
list-style-image: url(images/bullet.gif);
/* (url or none) (default = none) */
list-style-position: inside;
/* (inside or outside) (default = outside) */
list-style-type: square;
/* (circle, disc, square, etc) (default = disc) */
}#div {
list-style:square inside url(images/bullet.gif);
}Black: #000000 to #000 Blue: #0000ff to #00f Dark Grey: #666666 to #666 Light Grey: #cccccc to #ccc Orange: #ff6600 to #f60 White: #ffffff to #fff
Click here to download a PDF cheat sheet.
February 2, 2013
January 7, 2013
Nice article. I didn’t know about the font-size/line-height shorthand. Thanks!
Setting the font definition with just `font` can be tricky when setting it for all elements using * selector.
If you use for example:
* { font: 11px Verdana, Arial, sans-serif }
Keep in mind that all the default styles for all elements had ben overwriten, so or is no longer bolded, same goes for etc.
Ooops, looks like you have HTML enabled comments, so let me correct that one:
Keep in mind that all the default styles for all elements had ben overwriten, so <b> or <strong> is no longer bolded, same goes for <i>, <u>, <em> etc.
Thanks Alex. Definitely BTM, global definitions need to be used very carefully. I prefer to add a global font tag to the body element. With the exception of the textarea tag and maybe a couple more everything else should inherit the styling. HTML comments should be disabled now, glad you caught that.
I was looking for a good guide for CSS shorthand for quite some time. That’s really really useful! Now I just gotta memorize it
Thank you!
I like grouping the properties all on one line, makes for faster, easier reading (once you get used to it).
The shorthand notation is definitely useful, but I often avoid it simply because I can’t remember what order the elements must go in, or I’m not sure how it’ll interpret missing parts.
This threw me in your example, for instance:
margin:10px 20px 0;
(top right/left bottom)
Ouch. Random! It could just as easily be (top/bottom right left)… I guess you just have to memorize how it will interpret only three values provided. Personally I’d never use that one… it’s just too cruel to a maintenance programmer who has to figure out if it’s a typo, or if not, how the devil it’s actually working.
The font shorthand declarations also get a bit scary… there’s more than one property in there that can be a number, so you really have to know how the parsing is going to happen (and whoever’s maintaining your code had better know as well).
@Rob Whelan – Thanks for the comment. I agree that maintainability could be an issue in a group of developers where everyone is not familiar with shorthand. I also concede that some of the shorthand tags are easier than others, the font tag is by far the most complex. Also, the easy way to remember margins, padding and border is simply to start with the top value and work your way clockwise, if margin:10px 20px 0 confuses you then be a little more verbose and use 10px 20px 0 20px, still much simpler than typing out each property individually. Also, on the majority of these, order is irrelevant although the spec does often define an order. I would recommend using the orders that I use above. I do feel that it is worthwhile to learn and apply these tags, once you get a hang of it you will be glad you did. I will try and put a PDF cheat sheet together today for download, hopefully that will help.
@BTM
It’s cascade stylesheet, so no wonder than setting normal to * will affect all tags…
From a single by-id-styling to a very long code. I think it’s an accurate way to stylize a website. But is there another alternative than this? It’s obviously too long to memorize and understand. This code helped me, but am looking forward for a shorter code with the same result. Thank you very much for this tutorial.
Read all your posts….You are truly amazing….keep rocking…
I am now your fan !
hmmm…nice…will start using font and background shorthands from now on…thanks alot.
Pretty! You describe the topic very well. Thanks once again for the push!
thanks
oi