css shorthand

[HelenDev]

I've got this code to style a table...

.tableBlueBorder{
border-collapse: collapse;
}
.tableBlueBorder td{
border:2px;
border-color: #333366;
border-style:solid;
padding: 3px;
}
.tableBlueBorder th{
border:2px;
border-color: #333366;
border-style:solid;
padding: 3px;
}

but should I not be able to do this instead...

.tableBlueBorder{
border-collapse: collapse;
}
.tableBlueBorder td,th{
border:2px;
border-color: #333366;
border-style:solid;
padding: 3px;
}

But when I do it this screws up the styles - have I got the syntax wrong?

[benihana]

shoud be:

.tableBlueBorder td,.tableBlueBorder th{
border:2px;
border-color: #333366;
border-style:solid;
padding: 3px;
}

you can also swap :

border:2px;
border-color: #333366;
border-style:solid;

for:

border:2px solid #336;

:)

[HelenDev]

Great stuff, cheers :)

Is there a good reference point for css shorthand? I'm coming to the conclusion that guessing isn't the best way forward ;)

[Birdman]

[edit]benihana already posted my advice. sorry![/edit]
Also look into combining the properties:

.tableBlueBorder{
border-collapse: collapse;
}
.tableBlueBorder td, .tableBlueBorder th{
border: 2px solid #336;
padding: 3px;
}

Cheers,
Birdman

[createErrorMsg]

Is there a good reference point for css shorthand?

W3 Specs Index [w3.org]. Lists the shorthand property and the individual properties that make it up. Just find the property in the index list and click.

Properties that have a shorthand:
margin [w3.org]
padding [w3.org]
border [w3.org]
background [w3.org]
font [w3.org]
list-style [w3.org]
outline [w3.org]

I think that's all of them, but I'm open to being corrected.

cEM

[HelenDev]

Cheers for that cEM, looks pretty good :)