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.
Margins and Padding
margin
allows you to amalgamate margin-top
, margin-right
, margin-bottom
, and margin-left
in the form of property: top right bottom left;
So:
p {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;
}
Can be summed up as:
p {
margin: 1px 5px 10px 20px;
}
padding
can be used in exactly the same way.
By stating just two values (such as padding: 1em 10em;
), the first value will be the top and bottom and the second value will be the right and left.
Borders
border-width
can be used in the same way as margin
and padding
, too. You can also combine border-width
, border-color
, and border-style
with the border
property. So:
p {
border-width: 1px;
border-color: red;
border-style: solid;
}
Can be simplified to be:
p {
border: 1px red solid;
}
Fonts
Font-related properties can also be gathered together with the font
property:
p {
font: italic bold 12px/2 courier;
}
This combines font-style
, font-weight
, font-size
, line-height
, and font-family
.
So, to put it all together, try this code:
p {
font: 14px/1.5 "Times New Roman", times, serif;
padding: 30px 10px;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 10px 50px;
}
Lovely.