CSS Shorthand Guide
Ok. Let’s set the record straight. There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Ok. Straight to the business. Anytime I’ve ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you’re supposed to be set on your way. Well well. Over the years, I’ve found quite some interesting unknown quirky facts about these shorthands… hence this Guide was born.
Background
Backgrounds can be tricky. Nevertheless, effective when condensed correctly. The syntax for declaring the background shorthand values are as follows:
background properties
element {
background-color: color || #hex || (rgb / % || 0-255);
background-image:url(URI);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;
}
Believe it or not, all these properties can be combined into one single background property as follows:
the background shorthand property
element {
background:
#fff
url(image.png)
no-repeat
20px 100px
fixed;
}The Unknown
Often times developers find themselves wondering What if I leave out this value or that one? How will that effect the design?
. Good questions.
By default, the background property will assume the following when you do not declare each value of the properties.
default background property values
element {
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}Lesson learned: be careful on what you don’t declare. By chosing to not declare a value on a shorthand property, you are explicitly declaring the above default settings. For example, let’s look at the following example.
background shorthand example (unexplicit)
element {
background:red url(image.png);
}This would be the same as declaring the following values:
background shorthand example (explicit)
element {
background:red url(image.png) repeat top left scroll;
}Font
Font is perhaps the trickiest. However, it follows the same rules as the background shorthand property. All that you do not declare will have unexplicit values. Here is the font shorthand specification:
font properties
element {
font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";
}The default values for the font shorthand property are as follows:
default font property values
element {
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}And of course without any further ado. The font shorthand property syntax:
the font shorthand property
element {
font:
normal
normal
normal
inhert/
normal
inherit;
}Here is where it gets tricky. The fact that font-style, font-variant, and font-weight all come “normal” out of the box, you may need to pay a little more close attention when you’re styling elements that come with default browser styles like <h1> - <h6> or <strong> and <em>. For example, styling the strong element:
strong element styled with font
strong {
font:12px verdana;
}By writing the above into your style sheet, you will be unexplicitly removing the font-weight:bold default browser style that is applied to strong elements.
Last but not least (for -font- that is), a real world example:
font shorthand property example (unexplicit)
p {
font:bold 1em/1.2em georgia,"times new roman",serif;
}This would be the same as declaring the following properties:
the font shorthand property (explicit)
p {
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:1em;
line-height:1.2em;
font-family:georgia,"times new roman",serif;
}Border
Let’s not waste time discussing the warnings. The same rules apply from here on out. This is all you need to know
border properties
element {
border-width: number+unit;
border-style: (numerous);
border-color: color || #hex || (rgb / % || 0-255);
}becomes this:
the border shorthand propertie
element {
border:
4px
groove
linen
}Don’t ask me how that would look. The fact that “linen” is in there, things could get scary. Nevermind the matter, here is where ‘border’ gets funny.
border examples
p {
border:solid blue;
}
/* will create a '3px' solid blue border...
who knows where 3px came from?? */
p {
border:5px solid;
}
/* will create 5px solid 'black' border...
default must be black?? */
p {
border:dashed;
}
/* will create a '3px' dashed 'black' border...
3px black lines unite! */
p { border:10px red; }
p { border:10px; }
p { border:red; }
/* these just don't even work */
One thing to specially take note about declaring a border without a color, the default will be ‘black’ unless otherwise noted through an explicit or inherited ‘color’ property. See the following examples:
border color examples
p {
border:dotted;
color:red;
}
/* will create a 3px dotted red border */
/* ----------------------------- */
body {
color:blue;
}
body p {
border:5px solid;
}
/* will create a 5px solid blue border */
/* ----------------------------- */Get it? Got it. Good! (isn’t that a song?) Anyway. On with this
Margin and Padding
These are by far the easiest. Just think about the hands of a clock starting at noon, and follow the hour. For the sake of brevity, we’ll be working with margin (since it’s a shorter word). So for all cases of margin, the same rules apply to padding.
margin properties.
element {
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}… combined into the margin superpowers:
the margin shorthand property
/* top right bottom left */
element {
margin: auto auto auto auto;
}Of course, you may declare your margin with one, two, three, or four values. Here is how each scenario will be played out:
margin fun
/* adds a 10px margin to all four sides */
element {
margin:10px;
}
/* adds a 20px margin to top and bottom
and a 5px margin to left and right */
element {
margin:20px 5px;
}
/* adds a 50px margin to top
and a 10px margin to left and right
and a 300px margin to bottom */
element {
margin:50px 10px 300px;
}
Understood? Let’s keep going. This is fun isn’t it! (whatever, you like it).
Outline
Quite frankly, this property has dropped off the existence of the design radar. Mainly because of lack of browsers supporting this CSS 2.1 standard (yep, it’s an actual property), but nonetheless, it too has a shorthand property. This property follows the exact same (or same exact - they mean the same thing) specification as the ‘border’ shorthand property. But, for purposes of this being a Guide, it must be here. So:
outline properties
element {
outline-width: number+unit;
outline-style: (numerous);
outline-color: color || #hex || (rgb / % || 0-255);
}Outline written as shorthand:
outline shorthand property
element {
outline:3px dotted gray;
}For purposes of trying to keep things from repeating, please see the border shorthand section on this document to understand the odds, ends, and quirks of the outline property.
List-style
This is it. The last one. It’s rarely used frequently. Hence rarely. That is why I kept it until the end (sorry, the best was first in my own opinion). Here is the list-style properties:
list-style properties
element {
list-style-type: (numerous);
list-style-position:inside || outside;
list-style-image:url(image.png);
}Here is the defaults:
list-style property defaults
element {
list-style-type:disc;
list-style-position:outside;
list-style-image:none;
}And for the sake of final brevity. Here is a simple example:
list-style shorthand property example
ul li {
list-style:square inside url(image.png);
}
/* in this particular case if image.png is not available
then a square will be provided as secondary */That’s it!
I hope this provides years and years of referencing for all your CSS shorthand needs. When CSS3 is finally outside its working draft, expect to see this guide updated as necessary.
October 23rd, 2005 at 7:08 am
One thing I’ve never understood is the use of (viz) 1em/1.2em on font tags. How exactly does that work? What’s the difference between that and just, say, 1em?
I’ve only seen it a few times, but I really don’t get it.
October 23rd, 2005 at 7:51 am
Hey Jordan,
1em/1.2em means font-size: 1em & line-height:1.2em
October 23rd, 2005 at 8:02 am
Well done, nie tutorial about shorthand properties. Hi Jordan means - 1em(font-size)/1.2em(line-height). I prefer this method too.
October 23rd, 2005 at 10:08 am
Jordan on a font taf like this “(viz) 1em/1.2em” the 1em represents the font size and the 1.2em represents the line height. It’s a shortcut for handling font size and line height at once.
October 23rd, 2005 at 11:02 am
Hey Jordan, The 1em/1.2em is equal to font size / line-height… or
font-size:1em;
line-height:1.2em;
October 23rd, 2005 at 12:16 pm
Jordan - The 1em/1.2em syntax says (IIRC) that the text itself should be 1em in size, but the line-height of the line that it sits on should be of size 1.2em.
Dustin - I just found this entry via the del.icio.us popular pages. Thanks for a nice easy to overview of CSS shorthand.
October 23rd, 2005 at 12:54 pm
When you use the the 1em/1.2em format, the line-height(leading) is set to 1.2em and the font-size is set to 1.0 em. Without the slashed setting, the line-height remains at the inherited value (default normal value is determined by the browser 1.0 to 1.2 as recommended by w3c).
October 23rd, 2005 at 1:07 pm
Oh my…
Excuse the moderated comments. As many of you know, your comments will not be approved automatically unless you’ve posted at least once with a moderated comment. I suppose I will temporarily turn that feature off due to the small increase in numbers thus far.
October 23rd, 2005 at 5:20 pm
[…] el.com”>
Entrée du weblog CSS Shorthand Guide Un guide des raccourcis CSS. Aurait pu s’appeller Comment sauver de la bande passante en écrivant mo […]
October 23rd, 2005 at 6:44 pm
Thank you very much for all the answers. :)
Now that I know this little trick, I’ll have to start implementing it.
October 23rd, 2005 at 9:18 pm
[…] ith examples for:- Background Font Border Margin and Padding List-style Continue Reading […]
October 23rd, 2005 at 11:12 pm
[…] quo; Joel Does Web 2.0 - Marketroids, ATTACK! CSS Shorthand Guide www.dustindiaz.com This entry was posted on Monday, October 24th, […]
October 24th, 2005 at 2:10 am
Nicely done, Dustin. Very useful. May I steal freely from it? Purely for education purposes. I couldn’t find the exactl CC license you’re using! :)
October 24th, 2005 at 2:19 am
[…] little help « Tractors CSS shorthand CSS Shorthand Guide This looks like a very useful round up of all the parameters for CSS chorthand decla […]
October 24th, 2005 at 4:08 am
Excellent, very useful. Thanks!
October 24th, 2005 at 5:30 am
There are a few more shorthand properties available. The complete list is:
margin
padding
border
border-left
border-right
border-top
border-bottom
border-color
border-style
border-width
list-style
background
font
outline
pause (only for aural)
cue (only for aural)
October 24th, 2005 at 6:39 am
Question on shorthand regarding fonts.
Is it possible to include color: when using font size and line-height in 1em/1.5em format?
I have not been able to get this to work in any order.
My apologies if this was covered in a comment I didn’t read through them.
I have tried font:
size/line-height color family
size/line-height family color
family color size/lineheight
etc etc.
Maybe I was doing something silly, just curious :)
October 24th, 2005 at 7:57 am
Shane: The color of text is not part of the “font” attributes (there is no “font-color”). Instead, you must set it in the “color” attribute, which prevents you from using it in this shorthand.
font: bold 1em/1.2em georgia,"times new roman",serif;color: red;
October 24th, 2005 at 8:53 am
I wrote a litte something about CSS shorthand some time ago: Efficient CSS with shorthand properties.
October 24th, 2005 at 11:20 am
[…] ts: liquid, fluid, elastic, flexible, jello… (tags: css webdesign stylesheets) CSS Shorthand Guide (tags: css tutorials webdesign shorthand) Design Shack - Inspirational CSS and […]
October 24th, 2005 at 11:48 am
I wrote a script awhile back that lets you play around with CSS non-destuctively. It works in all browser, except the CSS readout only works in IE (for now). You can check it out at:
Live Page Change.
October 24th, 2005 at 11:56 am
@Molly:
Most likely It will become part of the creative commons lisencing like most of the other scripts I’ve written. This was in fact my first guide so if you know of a better lisence for tutorial / guides / reference material, please let me know.
@Jazzle. Thanks. ‘preciate it :)
@Dave There was a reason I didn’t cover things like border-top mainly because I didn’t exactly qualify them as shorthand. border is definitely a special case but I can see why you pointed it out. I could at the least just mention that they follow the same rules as ‘border’…that should be a good compromise.
@Roger I ran into yours while doing some research. It was quite good in fact. One thing I wanted to duely note in this guide is the scenario’s of ‘not declaring’ certain values. Eg. “What if I leave out ‘bold’?” or “is border:dotted allowed?” It was those kind of quirks I wanted to cover in detail in which I had yet to find a resource for.
October 24th, 2005 at 1:44 pm
CSS Shorthand Guide
sehr nette Referenz!
~/dustindiaz.com/
October 24th, 2005 at 1:58 pm
[…] CSS shorthand property value. So let’s work together and put one together shall we? read more | digg story This entry was posted on Monday […]
October 24th, 2005 at 3:21 pm
Congrats on making the front page of Digg!
Really handy guide, thanks :)
October 24th, 2005 at 3:23 pm
@Ethan and Shane.
Seeking to plug in a ‘color’ is totally a valid question. Simply because ‘color’ is not part of the ‘font’ group doesn’t mean it shouldn’t be included. The fact that ‘line-height’ is in font shorthand spec can make one assume that color would be too.
So, by all means, that’s not a silly question… and there were times I wish it was included. I’m not exactly sure why it’s not since color really only seems to effect fonts. In some browsers color also effects things like <hr />, but that is so quirky who knows…
October 24th, 2005 at 3:38 pm
[…] 8212; marcorosè alle 23:39 . . . link di fine settimana: - Lo stile in sintesi: CSS Shorthand Guide. - Lulu, ovvero se non nano, ormai micro o medio publishing. - Il primo Guerre Stel […]
October 24th, 2005 at 4:57 pm
In regards to borders, when no color is specified, it applies color implicitly from either its own font color rule, or from a parent’s font color rule. If it is not set in any case, it defaults to black.
Not very useful, just something I’ve noticed, and the author seemed miffed about.
October 24th, 2005 at 6:26 pm
Drew. careful how you word your sentences. The author is right here. It’s my site. lol.
Anyway, Thanks for the tip. I did in fact say “Let’s work together and put one (a guide) together shall we?”
I’ll make a special note about declaring color. These were in fact the ‘quirks’ I was aiming after.
October 24th, 2005 at 6:38 pm
Ok, I updated the guide to appropriately reflect Drew’s remarks on inherted border color.
October 24th, 2005 at 9:00 pm
[…] CSS Shorthand Guide Dustin Diaz has compiled a nice CSS shorthand property reference guide. This entry was posted on […]
October 25th, 2005 at 4:02 am
Yeah this rocks, many thanks
October 25th, 2005 at 4:32 am
[…] rrollo web Con este ttulo tan funky-gipsy-fandangero quiero anunciar la gua definitiva para CSS shortla […]
October 25th, 2005 at 11:45 am
[…] g a great job capturing the various ways CSS instructions can be simplified. Checkout his CSS CSS Shorthand Guide for a wealth of information Reviewing his references both beginning web develop […]
October 25th, 2005 at 12:27 pm
[…] uff, Photoshop, Other — Robin @ 9:18 pm Dustin Diaz has put together a very nice CSS Shorthand Guide. What’s nice about this guide is that it includes the default value for the […]
October 25th, 2005 at 12:49 pm
[…] CSS Shorthand Guide October 25th, 2005 CSS shorthand property reference guide by Dustin Diaz Ok. Let’s set the record straight. There is no […]
October 26th, 2005 at 8:37 am
Thanks for this writeup! I’ve been trying to get a few friends to make the switch from tables to CSS, but they’ve found the whole short-hand / long-hand thing too daunting of a task to learn. I think this will help convince them.
October 26th, 2005 at 9:17 am
Great compilation Dustin. Bookmark’d! The one thing I always thought was screwy about background-position is that the order is X then Y. That seems to make sense…but when you do any of the 4 sided properties (border, margin, padding, etc.) you specify them clockwise from the top…with the short-hand being top-bottom left-right.
OK, so the more I write, the less sense this is making but… background-position: 10px 50px; always gets confused with background-position: 50px 10px in my head because I think from top clockwise to bottom because of those 4 sided properties.
Not saying it should be different. Just saying it often causes me 5-10sec. of grief when background’s show up all out of place. But then…I can’t even spell postion correctly half the time either.
October 26th, 2005 at 12:54 pm
Jaso, Yea, that is funny. Especially since I usually always write background-position:top left it becomes confusing when you write the X/Y which would then change it to writing left top… either that or we both failed geometry.
October 26th, 2005 at 4:29 pm
[…] co Rosella at 1:30 am
. . . of weekend’s links: - The syle in synthesis: CSS Shorthand Guide. - Lulu, not nano, but now micro or medium publishing. - First episode of Star Wars […]
November 6th, 2005 at 10:15 am
I can’t seem to get the certian things set on my page - I want the width of the center table to be greater & also I’d like to change the widths of the columns (make the topic longer & the started by & last post shorter. I think the problem is I need to define these settings, but I’m not sure how
Any help would be great
November 7th, 2005 at 11:37 am
hope you can add to the “margin fun” section the proper order for 4 values (top, right, bottom, left) so that your list becomes complete. ^^; cheers! lovely site.
November 8th, 2005 at 10:59 am
wow
gotta love this css shorthand guide.
something i’ve been waiting for…
thanx a lot!
hope your having a good time
–rob
November 9th, 2005 at 11:53 pm
CSS Shorthand Guide
Using CSS shorthands instead of the regular rules will help reduce the weight of your CSS files dramatically. Instead of writing bloated rules such as:
element {
background-color: red;
background-repeat: no-repeat;
background-image: url(image.pn…
November 10th, 2005 at 4:02 am
[…] 217;s toes but there’s a great guide to CSS shorthand on Dustin Diaz’s blog at http://www.dustindiaz.com/css-shorthand/ For someone like me who doesn’t use CSS every day and th […]
November 12th, 2005 at 7:40 pm
[…]
The Mainbrace
blog
CSS Shorthandin the wee hours
http://www.dustindiaz.com/css-shorthand/ There is a PDF coming soon he says!
[…]
November 23rd, 2005 at 7:29 am
Fantastic stuff, Dustin - extremely useful work!!
One small thing (just to complicate matters slightly for those new to the CSS ‘game’) - don’t forget that web browsers have their own default stylesheets too!
You might think that you’re getting a default value, but you end up getting a default browser value :)
November 29th, 2005 at 7:52 pm
I’d like to clarify something about the background function: background-attachment: fixed; sometimes does not work unless you’ve set a background-position: Xpx Ypx;
November 29th, 2005 at 8:10 pm
Thanks Benn,
I’ll make a note of it! I wouldn’t want to leave a quirk behind.
December 5th, 2005 at 5:00 pm
[…] d Guide”> Un outil précieux dans l’arsenal du web developpeur. Lien : http://www.dustindiaz.com/css-shorthand/ Ce billet a été posté le […]
December 11th, 2005 at 10:47 am
[…] . Para fuentes. Equivalencias de las unidades de medida Chuleta imprimible atributos CSS CSS Shorthand Guide Ref: Desarrollo web Programacion.com HTML Help Manual CSS de Carlos Benavídez ASPT […]
December 16th, 2005 at 5:25 pm
ahh yes, great information.
However the infamous Internet explorer the bane of all web coders,
does have some serious CSS
short handing incompetanciesDecember 27th, 2005 at 10:14 am
Just what I was looking for, thanks for publishing this.
January 2nd, 2006 at 8:37 pm
[…] nti vari) Ten more CSS tricks you may not know How to size text using ems CSS Panic Guide CSS Shorthand Guide Ideas for a better form Caroline’s Corner: Registration Forms - what to do if […]
January 9th, 2006 at 3:25 pm
[…] thand guide! There’s a great guide to CSS shorthand on Dustin Diaz’s blog at http://www.dustindiaz.com/css-shorthand/ I go through periods where my life seems to be CSS and therefor […]
January 12th, 2006 at 4:01 pm
[…] guring that they could use a little help in this department, I decided to add a link to my CSS Shorthand Guide I wrote back in October of last year. I mea […]
January 17th, 2006 at 12:51 pm
Thanks for the guide. It’s an awsome read. It’s a life saver! I totally needed this.
January 20th, 2006 at 12:47 pm
[…] nti vari) Ten more CSS tricks you may not know How to size text using ems CSS Panic Guide CSS Shorthand Guide Ideas for a better form Caroline’s Corner: Registration Forms - what to do if […]
March 5th, 2006 at 5:04 am
Hi! Great summary, it will be nice to show to beginners I meet. Well done
(Sidenote: you have a typo under “the font shorthand property”, “inhert/” instead of “inherit/”)
March 9th, 2006 at 3:12 pm
Nice post:
But what about the most popular yet, “ Most inept browser ?”
March 9th, 2006 at 3:35 pm
@Gilray4: Your example of demonstrating background’s in shorthand syntax are incorrect. you’re putting no-repeat directly after the url(). Try putting a space between the two and you’ll be good.
Eg:
background:url(img.png) top left no-repeat;That indeed works.
March 12th, 2006 at 5:38 pm
Hey w00t, indeed it does:
I was treating the closing “)” bracket like you have the semi colon. With no color stated you can put the “url” or anything for that matter adjacent to the semi colon, and I had assumed that was ok with the closing “)”, as long as any subsequent, shorthanded properties had the proper space between them.
TY for looksee and reply, I’m glad to put that one to rest.
March 12th, 2006 at 5:44 pm
Things that make you hmmm:
So is that to say the fire fox is actually incorrect to render the image as centered, without the space?
April 7th, 2006 at 5:39 am
I left a Question/comment last week. It’s gone and there’s been no reply!?? I found a VERY old paper with short hand on it and would like help in cracking the short hand code. PLEASE.
April 14th, 2006 at 12:14 pm
[…] Desarrollo web Programacion.com HTML Help Manual CSS de Carlos Benavídez ASPTutor.com WebEstilo Menéame « Anterior: Del.icio.us Siguiente: Navegadores» […]
April 18th, 2006 at 5:21 am
[…] CSS bietet auch einige Kurzschreibweisen zum Beispiel bei der Formatierung des Hintergrundes. Dadruch lässt sich ein CSS-Dokument ebenfalls übersichtlicher Gestalten und verkürzen. Interessante Beispiele für die Kurzschreibweise findet man im CSS Shorthand Guide von Dustin Diaz. […]
April 29th, 2006 at 1:47 pm
[…] http://www.dustindiaz.com/css-shorthand/ […]
May 7th, 2006 at 1:50 pm
[…] Desarrollo web Programacion.com HTML Help Manual CSS de Carlos Benavídez ASPTutor.com WebEstilo Menéame « Anterior: Definir estilos utilizando clases Siguiente: Agrupaciones de estilos» […]
May 22nd, 2006 at 4:07 pm
i like the irreverent tone of the author’s original post. some people think CSS is a holy grail, passed down by the gods, but in reality it’s just another hack put together by fallible human beings.
May 25th, 2006 at 5:24 pm
[…] CSS Shorthand Guide […]
June 9th, 2006 at 3:32 am
[…] CSS, yes really Jack Daniels (personally I recommend Talisker) : http://www.ilovejackdaniels.com/css/css-cheat-sheet/ | http://web.tampabay.rr.com/bmerkey/cheatsheet.htm | http://www.dustindiaz.com/css-shorthand/ […]
June 12th, 2006 at 5:32 am
[…] Dustin Diaz’s CSS shorthand Guide is a wonderful collection of.. CSS shorthands (duh?!). Definately worth checking out. […]
July 4th, 2006 at 8:14 am
[…] A guide to css shorthand. Link […]
September 10th, 2006 at 7:50 am
CSS Best Articles…
[This post is constantly updated. Last Update - 06/09/2006]
Articles
CSS Frames v2, full-height
Ten CSS tricks you may not know
A List Apart: Multi-Column Lists
Turning a list into a navigation bar
How To Clear Floats Without Structural Markup
A CSS s…
October 14th, 2006 at 10:08 pm
Nice work. Bookmarked for handy reference.
October 20th, 2006 at 3:24 am
[…] CSS Shorthand Guide […]
October 26th, 2006 at 1:10 pm
[…] CSS Shorthand Guide […]
October 29th, 2006 at 3:21 pm
[…] CSS Shorthand Guide […]
October 31st, 2006 at 6:16 pm
[…] CSS Shorthand Guide […]
November 7th, 2006 at 2:07 pm
Thanks for the reference Dustin, it is much appreciated.
November 23rd, 2006 at 11:27 am
[…] I just found the blog of Dustin Diaz via a posting at digg to one of his articles. Dustin is a User Interface Engineer for Yahoo! and has great information on his site about CSS, DOM JavaScript and a topping of XHTML too. The article in question is entitled CSS Shorthand Guide and although being over a year old now it is a great read and quick reference. […]
November 23rd, 2006 at 11:48 am
Thanks for the shorthand reference. The font one has always confused me, and I hadn’t known about the font-size/line-height shorthand before. That’s definitely going to get some use from me!
Also, a good acronym for remembering the margin shorthand is TRouBLe.
November 23rd, 2006 at 12:06 pm
[…] Hier te vinden […]
November 23rd, 2006 at 1:02 pm
muchas gracias, es de mucha utilidad. arturo durán.
November 23rd, 2006 at 2:55 pm
I’ve never heard of the outline CSS property before, can it be used in addition to the border property or does one replace the other?
November 23rd, 2006 at 5:21 pm
[…] There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Ok. Straight to the business. Over the years, I’ve found quite some interesting unknown quirky facts about these shorthands… hence this Guide was born.read more | digg story […]
November 23rd, 2006 at 7:23 pm
[…] CSS Shorthand Guide (tags: css webdesign) […]
November 23rd, 2006 at 8:12 pm
[…] During my work using CSS I found some interesing CSS tips and tricks sites. […]
November 24th, 2006 at 1:08 am
[…] Ok. Let ’s set the record straight. There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Ok. Straight to the business. Over the years, I’ve found quite some interesting unknown quirky facts about these shorthands… hence this Guide was born.read more | digg story […]
November 24th, 2006 at 3:51 am
wow
gotta love this css shorthand guide.
something i’ve been waiting for…
thanx a lot!
hope your having a good time
–Japie
November 24th, 2006 at 5:19 am
[…] CSS Shorthand Guide A guide to CSS. (tags: css refererence shorthand design web) […]
November 24th, 2006 at 5:24 am
[…] read more | digg story […]
November 24th, 2006 at 6:39 am
This is a very interesting article.
I will use some of the features on my site.
Thanks and congrats for this great work.
November 24th, 2006 at 11:07 pm
[…] read more | digg story […]
November 26th, 2006 at 5:08 pm
[…] Other Development CSS Shorthand Guide How to structure large CSS files Web development blogs you should read PowerShell Language Definitions for Notepad++ […]
November 27th, 2006 at 12:19 am
[…] read more | digg story […]
November 27th, 2006 at 12:32 am
One more thing to add: the ‘border-width’ property, in addition to numbered values, allow for these extra values:
thin/medium/thick
with ‘medium’ being the default. (that might explain the default 3px value)
(IMHO, I think they’re nonsense: Why not just use point values, like we’ve been doing for years in print? They’re just as scalable.
November 27th, 2006 at 8:01 am
[…] CSS Shorthand Guide […]
November 28th, 2006 at 1:51 pm
[…] A working guide to every CSS shorthand property value. « Web 2.0 style buttons […]
November 28th, 2006 at 6:46 pm
[…] Via Dustin diaz: Ok. Let’s set the record straight. There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Ok. Straight to the business. Anytime I’ve ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you’re supposed to be set on your way. Well well. Over the years, I’ve found quite some interesting unknown quirky facts about these shorthands… hence this Guide was born. READ […]
November 29th, 2006 at 11:18 pm
[…] CSS Shorthand Guide Ok. Let’s set the record straight. There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Ok. Straight to the business. Anytime I’ve ran into a specification (besides the con (tags: web-developer fonts reference technology blogs web-developer/css) […]
December 4th, 2006 at 3:26 pm
I was taught long ago to remember the order of padding and spacing by the word “trouble”. ( Top, Right, Bottom, Left ).
Just a little something that sticks in your head.
HTH,
Jason
December 7th, 2006 at 10:17 am
[…] Read the Article… […]
December 8th, 2006 at 1:54 am
very useful guide. bookmarked! but dont have that much time to read. grrr. :(
http://thygoodies.blogspot.com/
December 15th, 2006 at 10:52 pm
[…] CSS Shorthand Guide […]
December 16th, 2006 at 9:53 am
[…] ~/dustindiaz.com/ […]
December 26th, 2006 at 12:50 am
Nice explanations.
January 6th, 2007 at 5:16 am
[…] CSS Shorthand Guide […]
January 13th, 2007 at 1:46 pm
[…] CSS Shorthand Guide […]
February 3rd, 2007 at 4:21 pm
[…] CSS Shorthand Guide Ok. Let’s set the record straight. There is no official guide for each and every CSS shorthand property value. So let’s work together and put one together shall we? Ok. Straight to the business. Anytime I’ve ran into a specification (besides the con (tags: css design code) […]
February 8th, 2007 at 12:38 am
[…] CSS Shorthand Guide […]
February 9th, 2007 at 1:07 am
[…] CSS Shorthand Guide […]
February 14th, 2007 at 1:05 pm
[…] Here is a similar CSS Shorthand Guide by Dustin Diaz. […]
February 14th, 2007 at 1:53 pm
[…] Another CSS Cheat Sheet […]
February 15th, 2007 at 7:25 am
Interesting article! Good work!
February 28th, 2007 at 3:10 pm
[…] CSS Shorthand Guide […]
March 8th, 2007 at 6:31 am
[…] CSS Shorthand Guide […]
March 14th, 2007 at 10:34 am
[…] CSS Shorthand Guide […]
March 15th, 2007 at 3:18 am
[…] CSS Shorthand Guide […]
March 15th, 2007 at 4:07 am
[…] CSS Cheat Sheet CSS Shorthand Guide CSS Reference Sheet Javascript Cheat Sheet Javascript Quick Reference JQuery Cheat Sheet (PDF) JQuery Reference (PDF) […]
March 15th, 2007 at 12:54 pm
[…] CSS Shorthand Guide […]
March 25th, 2007 at 4:59 am
A working guide to every CSS shorthand property value. « Web 2.0 style buttons
March 25th, 2007 at 10:15 am
[…] CSS Shorthand Guide […]
March 30th, 2007 at 1:03 am
[…] CSS Shorthand Guide […]
April 10th, 2007 at 3:01 pm
[…] http://www.dustindiaz.com/css-shorthand/ […]
May 3rd, 2007 at 7:13 am
Thank you SO much for this, maybe now I can get a better handle on CSS and finish my website redesign. :-)
May 31st, 2007 at 11:00 am
Thank you very much for all the answers. :)
Now that I know this little trick, I’ll have to start implementing it.
June 9th, 2007 at 1:01 pm
I’d like to clarify something about the background function: background-attachment: fixed; sometimes does not work unless you’ve set a background-position: Xpx Ypx;
June 19th, 2007 at 9:58 am
I appreciate your suggestions, it will definitely help me in the future.
June 20th, 2007 at 3:24 pm
I also start on working with CSS but it´s not that easy to learn and understand. but with a good book andmany examples I will get it working. do you know any good forums regarding CSS only?
best regards
Golf from GTI Treffen
June 24th, 2007 at 3:45 am
I didn’t know about the list-style shorthand and the defaults if you’re not defining all the properties. Thanks for the info.
July 9th, 2007 at 8:26 am
Hello
This is a very interesting article.I will use some of the features on my site.
Thanks and congrats for this great work
July 15th, 2007 at 12:13 pm
Fantastic stuff! thats i`m looked for the hole time. i have bookmarked this site now as one of my favourite resources for CSS. this great article its like my little css-bible for allways looking at then i`m stuck. thank you so much for sharing dustin.
July 25th, 2007 at 6:12 pm
I also start on working with CSS but it´s not that easy to learn and understand. but with a good book andmany examples I will get it working. do you know any good forums regarding CSS only?
August 1st, 2007 at 1:18 pm
I put down the border color design on one of my blogs, it looks very good. But I have some misunderstanging with margin fun. Is evething ok with it?
August 24th, 2007 at 2:33 am
Hi, I just discovered your site - I think its very helpful, especially this CSS-Shorthand-Guide I like pretty much.
Thanks for sharing knowledge and best regards from Germany
September 4th, 2007 at 3:51 am
Great article. thanks for the big help! found this at google!
September 4th, 2007 at 4:10 am
very helpfull shorthands .I’ll use them
September 6th, 2007 at 9:37 pm
[…] So the other day I was working on some boring CSS, and found myself having to look up ‘list-style’ for the millionth time. Just something about it that prevents me from remembering. So I looked over at my CSS cheat sheet, and it was absent. So I searched the webbernet for a cheat sheet. I found Dustin Diaz’s guide, but that wasn’t what I was looking for. It was full of information, however I know the values–I work with them every day. I just wanted a quick guide to figure out the order and defaults… that I can put on my wall. […]
September 11th, 2007 at 4:31 am
Other Development CSS Shorthand Guide How to structure large CSS files Web development blogs you should read PowerShell Language Definitions for Notepad++
September 11th, 2007 at 4:45 am
It’s very useful CSS resource. Thank you very much.
September 11th, 2007 at 5:46 am
I will use this type of CSS more often on my sites. Thanks for sharing.
September 19th, 2007 at 6:17 pm
Thank you SO much for this, maybe now I can get a better handle on CSS and finish my website redesign.
September 19th, 2007 at 6:20 pm
number one web sites, thank you.
September 20th, 2007 at 3:45 am
Mmm, shorthand. Lots of learning to do I think.
September 24th, 2007 at 1:00 am
Thanks for this great tutorial it has come in handy and been a great help for me.
September 30th, 2007 at 2:53 pm
it’s a realy funny thing
just have to look if it is valid ;)
October 2nd, 2007 at 1:26 pm
very useful css informations thank you
October 4th, 2007 at 10:35 am
[…] CSS Shorthand Guide […]
October 24th, 2007 at 12:20 pm
Great Guide! Thank you.
November 4th, 2007 at 3:46 am
Thank you for the great article.But i couldnt figure out how to do the background thing :(
December 4th, 2007 at 1:49 pm
[…] CSS Shorthand Guide: A JavaScript, CSS, XHTML web log focusing on usability and accessibility. Check out this awesome tutorial compiled by Dustin Diaz’s. […]
January 2nd, 2008 at 6:25 pm
Thanks for the guide. It’s an awsome read. It’s a life saver! I totally needed this.
January 22nd, 2008 at 6:11 pm
I’ve translated your article to Portuguese.
http://e.entao.com.br/2008/01/22/guia-de-abreviacoes-de-css.html
February 1st, 2008 at 6:05 am
damned you explain it in funny way :) but i love it, it more like hear your talking rather than reading your post. great!
February 6th, 2008 at 4:11 am
Nice article! Can I translate and post in on my own blog?
February 19th, 2008 at 1:18 pm
[…] I’m getting to work on this website overhaul. Great resource for keeping your code trim is this page here with lots of CSS shorthand notation […]
March 9th, 2008 at 7:44 pm
wow.. thank you so much for the amazing article.
you don’t know how much it help me with my forum.
March 12th, 2008 at 1:04 am
why can’t i comment on this article?
do i really need to be a blogger to be able to post?
March 15th, 2008 at 9:10 am
[…] quite some interesting unknown quirky facts about these shorthands… hence this Guide was born.read more | digg story Filed under Blog by […]
March 25th, 2008 at 11:27 am
Great Guide! Thank you.
April 9th, 2008 at 10:54 am
This guide was really interesting, thanks so much for the css information.
April 25th, 2008 at 5:56 am
Hi, I just discovered your site - I think it is very helpful, especially this CSS-Shorthand-Guide. I like it pretty much.
Thanks for sharing knowledge and best regards from Germany
April 27th, 2008 at 4:29 pm
Thanks so much! I am glad to find this site and it’s useful for cleaning up.
Is there a shorthand for font color?
font: bold 23px Arial, Helvetica, sans-serif;
color: #000;
I tried a few ways with the color before bold and after but no dice!
July 11th, 2008 at 7:06 pm
[…] CSS Shorthand Guide: Check this out for Dustin Diaz’s tutorial on CSS […]