css shorthand

7/29/2019 Css Shorthand

1/75

CSSSHORTHAND


2/75

What are

shorthand

properties?


3/75

CSS propertiesare the aspect ofthe element that can be styled -

such as color, border, padding.

p { color: red; }

Property


4/75

Some CSS properties can becombined into shorthand

properties.

p {

list-style-type: disc;

list-style-image: none;

list-style-position: inside; }

p { list-style:disc none inside; }


5/75

Shorthand properties aredesigned tomake it easier for

authors- to save writing multiple

declarations.


6/75

Shorthand properties include:

background, border, border-color,

border-style, border-width,

border-top, border-right, border-bottom, border-left, font, list-

style, margin, outline andpadding


7/75

A note on the

order of values


8/75

In many cases, shorthandproperties are defining one or

more sides of an element.


9/75

In these cases, they are definedusing one, two, three or four

values.


10/75

The orderthat values arespecified for two, three and four

values is critical!


11/75

One value means that all four

sides will be styled the same way.

(top/right/bottom/left)

p { margin: 1em; }


12/75

Two value are used to define:

(top/bottom) (left/right)

p { margin: 1em2em; }


13/75

Three value are used to define:

(top) (left/right) (bottom)

p { margin: 1em2em3em; }


14/75

Four value are used to define:

(top) (right) (bottom) (left)

p { margin: 1em2em3em4em; }


15/75

One way to remember four values

is to think clockwise -

starting at the top.


16/75

Another way to remember

shorthand values is to use:

TRouBLe

top right bottom left


17/75

The shorthand

properties


18/75

1. Margin


19/75

Margin using one shorthand value

p {

margin-top: 1em;

margin-right: 1em;

margin-bottom: 1em;

margin-left: 1em; }

p { margin: 1em; }


20/75

Margin using two shorthand value

(order critical)

p {

margin-top: 1em;

margin-right: 2em;

margin-bottom: 1em;

margin-left: 2em; }

p { margin: 1em 2em; }


21/75

Margin using three shorthand

value (order critical)

p {

margin-top: 1em;

margin-right: 2em;

margin-bottom: 4em;

margin-left: 2em; }

p { margin: 1em 2em 4em; }


22/75

Margin using fourshorthand value

(order critical)

p {

margin-top: 1em;

margin-right: 2em;

margin-bottom: 4em;

margin-left: 3em; }

p { margin: 1em 2em 4em 3em; }


23/75

2. Padding


24/75

Padding using one shorthand

value

p {

padding-top: 1em;

padding-right: 1em;

padding-bottom: 1em;

padding-left: 1em; }

p { padding: 1em; }


25/75

Padding using two shorthand


p {

padding-top: 1em;

padding-right: 2em;



p { padding: 1em 2em; }


26/75

Padding using three shorthand


p {

padding-top: 1em;

padding-right: 2em;



p { padding: 1em 2em 4em; }


27/75

Padding using fourshorthand


p {

padding-top: 1em;

padding-right: 2em;



p { padding: 1em 2em 4em 3em; }


28/75

A note about

borders


29/75

The default value for a property,

when it hasnt been specified by

authors is called the initial value.


30/75

The initial value of each property

is defined in the CSS

specification.


31/75

The initial values for the various

border properties are:

p { border-width:medium; }

p { border-style: none; }

p { border-color: content-color; }


32/75

3. Border-color


33/75

Border-color using one

shorthand value

p {

border-top-color: #999;

border-right-color: #999;

border-bottom-color: #999;

border-left-color: #999; }

p { border-color: #999; }


34/75

Border-color using two

shorthand value (order critical)

p {


border-right-color: #aaa;


border-left-color: #aaa; }

p { border-color: #999 #aaa; }


35/75

Border-color using three


p {




border-left-color: #aaa; }

p { border-color: #999 #aaa #000; }


36/75

Border-color using four


p {




border-left-color: #666; }

p {border-color: #999 #aaa #000 #666;}


37/75

4. Border-width


38/75

Border-width using one

shorthand value

p {

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px; }

p { border-width: 1px; }


39/75

Border-width using two


p {





p { border-width: 1px 2px; }


40/75

Border-width using three


p {





p { border-width: 1px 2px 3px; }


41/75

Border-width using four


p {





p { border-width: 1px 3px 4px 1px; }


42/75

5. Border-style


43/75

Border-style using one

shorthand value

p {

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid; }

p { border-style: solid; }


44/75

Border-style using two


p {


border-right-style: dashed;


border-left-style: dashed; }

p { border-style:solid dashed; }


45/75

Border-style using three


p {

border-top-style: ridged;

border-right-style: dashed;


border-left-style: dashed; }

p { border-style: ridge dashed solid;}


46/75

Border-style using four


p {

border-top-style: ridged;border-right-style: dashed;


border-left-style: inset; }

p { border-style: ridge dashed solid

inset; }


47/75

6. Border-top


48/75

Border-top combining three

longhand properties(order is not critical)

p {




}

p { border-top: 1px solid #000; }


49/75

7. Border-right


50/75

Border-right combining three


p {


border-right-style: solid;

border-right-color: #000;

}

p { border-right: 1px solid #000; }


51/75

8. Border-bottom


52/75

Border-bottom combining three


p {




}

p { border-bottom:1px solid #000; }


53/75

9. Border-left


54/75

Border-left combining three


p {

border-left-width: 1px;

border-left-style: solid;

border-left-color: #000;

}

p { border-left:1px solid #000; }


55/75

10. Border


56/75

Border combining three


p {

border-width: 1px;

border-style: solid;

border-color: #000;

}

p { border:1px solid #000; }


57/75

11. Outline


58/75


outline properties are:

p { outline-width:medium; }

p { outline-style: none; }

p { outline-color: invert; }


59/75

Unlike border, there are no

outline-top, outline-right, outline-bottom or outline-left properties.


60/75

However, authors can use

outline instead ofoutline-width,outline-style, outline-color.


61/75

Outline combining three


p {

outline-width: 1px;

outline-style: solid;

outline-color: #000; }

p { outline:1px solid #000; }


62/75

Be aware that IE5, IE6 and even

IE7 do not support outline.


63/75

12. Background


64/75


background properties are:

p { background-color: transparent; }

p { background-image: none; }

p { background-attachment: scroll; }

p { background-repeat: repeat; }

p { background-position: 0 0; }


65/75

The background shorthand

property (order is not critical)

p {

background-color: #f00;

background-image: url(a.gif);

background-repeat: repeat;

background-attachment: fixed;

background-position: 0 0;}

p { background: #f00 url(a.gif) repeat

fixed 0 0; }


66/75

13. Font


67/75


font properties are:

p { font-style: normal; }

p { font-variant: normal; }

p { font-weight: normal; }

p { font-size:medium; }

p { line-height: normal; }p { font-family: [up to user agent]; }


68/75

The font shorthand property

(order critical)

p {

font-style: italic;font-variant: small-caps;

font-weight: bold;

font-size: 1em;

line-height: 140%;

font-family: times, serif; }

p { font: italic small-caps bold 1em/140%

times, serif; }


69/75

14. List-style


70/75


list-style properties are:

p { list-style-type: disc; }

p { list-style-image: none; }

p { list-style-position: outside; }


71/75

p {list-style-type: disc;

list-style-image: none;

list-style-position: inside; }

p { list-style:disc none inside; }

The list-style shorthand property

(order is not critical)


72/75

A recap

/* mar in al es */


73/75

/* margin values */

p {margin: 1em; }

p {margin: 1em2em; } - (top/bottomleft/right)

p {margin: 1em2em4em; } - (topleft/rightbottom)

p {margin: 1em2em4em3em; } - (toprightbottomleft)

/* padding values */

p {padding: 1em; }

p {padding: 1em2em; } - (top/bottomleft/right)

p {padding: 1em2em4em; } - (topleft/rightbottom)

p {padding: 1em2em4em3em; } - (toprightbottomleft)

/* border-color values */

p {border-color: #999; }

p {border-color: #999#aaa; } - (top/bottomleft/right)

p {border-color: #999#aaa#000; } - (topleft/rightbottom)

p {border-color: #999#aaa#000#666; } - (toprightbottomleft)

/* border-width values */

p {border-width: 1px; }

p {border-width: 1px2px; } - (top/bottomleft/right)

p {border-width: 1px2px3px; } - (topleft/rightbottom)

p {border-width: 1px3px4px1px; } - (toprightbottomleft)

/* border style values */


74/75

/* border-style values */

p {border-style: solid; }

p {border-style: soliddashed; } - (top/bottomleft/right)

p {border-style: ridgedashedsolid; } - (topleft/rightbottom)

p {border-style: ridgedashedsolidinset; } - (toprightbottomleft)

/* border values - order of values not critical */

p {border-top: 1pxsolid#000; }

p {border-right: 1pxsolid#000; }

p {border-bottom: 1pxsolid#000; }

p {border-left: 1pxsolid#000; }

p {border: 1pxsolid#000; }

/* outline values - order of values not critical */

p {outline: 1pxsolid#000; }

/* background values - order of values not critical */

p {background: #f00url(a.gif)repeatfixed00; }

/* font values - order of values critical!! */

p {font: italicsmall-capsbold1em/140% times, serif; }

/* list-style values */

p {list-style: discnoneinside; } - order not critical


75/75

Russ WeakleyMax Design

Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign

Linkedin:linkedin.com/in/russweakley

css shorthand

Documents