CSS Intermediate - Shorthand Properties

Complete CSS Tutorial

First Step - Beginner CSS	Second Step - Intermediate CSS	Third & Final Step - Advanced CSS
1. Applying CSS	1. Class and ID Selectors	1. Display
2. Selectors, Properties, and Values	2. Grouping and Nesting	2. Page Layout
3. Colors	3. Pseudo Classes	3. At-Rules
4. Text	4. Shorthand Properties	4. Pseudo Elements
5. Margins and Padding	5. Background-images	5. Specificity
6. Borders
7. Putting It All Together

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

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;
}

 Teach Yourself  by BH24 HTML Editor Tool!

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;
}

Teach Yourself  by BH24 HTML Editor Tool!

(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.

CSS Tutorial by BH24

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;
}

 Teach Yourself  by BH24 HTML Editor Tool!