Important CSS Shorthand and Longhand Note

For those who intermix short and long...

[JAB Creations]

If you're interchanging your CSS between shorthand and longhand you should keep the following in mind...

You should declare your shorthand BEFORE your longhand in order for many browsers to effectively render the styling correctly.

If you know what short/longhand CSS is you can skip this to see examples of what I'm talking about at the bottom...

For those who are unaware of what is short/longhand and the difference here is an easy example...

Shorthand Border Example

border: #0ff solid 1px;

Shorthand Font Example

font: arial 12px;

Longhand Example (using same attributes as above)
Border Longhand

border-color: #0ff;
border-style: solid;
border-width: 1px 1px 1px 1px;

Font Longhand

font-family: arial;
font-size: 12px;

Here is an example of the CSS that will not work when interchanging short and long.

border-width: 1px 2px 1px 2px;
border: #efe solid;

Correctly working example...

border: solid 2px;
border-color: #fd0 #fd0 #f0a35d #fd0;

I have not had the time to scour the W3C on this but I'm sure they must mention somethine somewhere. I could be wrong and would love to see any examples of something better or an example of where this could mess up.

I hope this helps some folks someplace who've been going out of their minds why their css isn't working.

I was having an issue with a div border being a certain color and even after I removed all instances of that color from the stylesheet the div's border still rendered that way in Opera, IE, and Gecko.

[jetboy]

Yeah, it is mentioned. What you're seeing is this:

Shorthard declarations like 'border' expect a certain number of values. In this case, three:

width, colour and style

When you leave one or more of them out, you're not *actually* leaving them out, you're choosing to use the initial value. Consider it the default setting. In your last non-working example, where you set only the colour and style, the width defaults to 'medium'. So the web browser reads the decalaration as:

border: #efe solid medium;

Hopefully the browser behaviour makes more sense now.

So, by using shorthand, you are in fact setting every possible property, whether or not you explicitly state it. Any that you leave out revert to their initial values, which are listed in the W3C specs.