Try my app Expense Manager @ google play and amazon store.

Wednesday, May 9, 2012

CSS Beginner tutorial 10 : Shorthand Properties

Shorthand Properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces. For example, margin, padding and border-width allow you to set margin-top-width, margin-right-width, margin-bottom-width etc. in the form of property: top right bottom left; For example we have following code to set border width. of a paragraph

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

This can be summed up into one shorthand property as follows.

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

Further, border-width, border-color and border-style can also be summed up as follow.

p {
border: 1px red solid;

By stating just two values in format 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. For example

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

Where the '/1.5' is the line-height.

No comments:

Post a Comment

Follow by Email

Google+ Badge