Home → Tutorials → CSS Intermediate Tutorial →

Shorthand Properties

Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

margin, padding and border-width allow you to amalgamate margin-top-width, margin-right-width, margin-bottom-width etc. in the form of property: top right bottom left;

So:


p {
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 10px;
	border-left-width: 20px;
}

Can be summed up as:


p {
	border-width: 1px 5px 10px 20px;
}

border-width, border-color and border-style can also be summed up as, for example:


p {
	border: 1px red solid;
}

(This can also be applied to border-top, border-right etc.)

By stating just two values (such as margin: 1em 10em;), the first value will be the top and bottom and the second value will be the right and left.

Font-related properties can also be gathered together with the font property:


p {
	font: italic bold 1em/1.5 courier;
}

(Where the '/1.5' is the line-height)

So, to put it all together, try this code:


p {
	font: 1em/1.5 "Times New Roman", times, serif;
	padding: 3em 1em;
	border: 1px black solid;
	border-width: 1px 5px 5px 1px;
	border-color: red green blue yellow;
	margin: 1em 5em;
}

Lovely.