css shorthand
TRANSCRIPT
-
7/29/2019 Css Shorthand
1/75
CSSSHORTHAND
-
7/29/2019 Css Shorthand
2/75
What are
shorthand
properties?
-
7/29/2019 Css Shorthand
3/75
CSS propertiesare the aspect ofthe element that can be styled -
such as color, border, padding.
p { color: red; }
Property
-
7/29/2019 Css Shorthand
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; }
-
7/29/2019 Css Shorthand
5/75
Shorthand properties aredesigned tomake it easier for
authors- to save writing multiple
declarations.
-
7/29/2019 Css Shorthand
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/29/2019 Css Shorthand
7/75
A note on the
order of values
-
7/29/2019 Css Shorthand
8/75
In many cases, shorthandproperties are defining one or
more sides of an element.
-
7/29/2019 Css Shorthand
9/75
In these cases, they are definedusing one, two, three or four
values.
-
7/29/2019 Css Shorthand
10/75
The orderthat values arespecified for two, three and four
values is critical!
-
7/29/2019 Css Shorthand
11/75
One value means that all four
sides will be styled the same way.
(top/right/bottom/left)
p { margin: 1em; }
-
7/29/2019 Css Shorthand
12/75
Two value are used to define:
(top/bottom) (left/right)
p { margin: 1em2em; }
-
7/29/2019 Css Shorthand
13/75
Three value are used to define:
(top) (left/right) (bottom)
p { margin: 1em2em3em; }
-
7/29/2019 Css Shorthand
14/75
Four value are used to define:
(top) (right) (bottom) (left)
p { margin: 1em2em3em4em; }
-
7/29/2019 Css Shorthand
15/75
One way to remember four values
is to think clockwise -
starting at the top.
-
7/29/2019 Css Shorthand
16/75
Another way to remember
shorthand values is to use:
TRouBLe
top right bottom left
-
7/29/2019 Css Shorthand
17/75
The shorthand
properties
-
7/29/2019 Css Shorthand
18/75
1. Margin
-
7/29/2019 Css Shorthand
19/75
Margin using one shorthand value
p {
margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em; }
p { margin: 1em; }
-
7/29/2019 Css Shorthand
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; }
-
7/29/2019 Css Shorthand
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; }
-
7/29/2019 Css Shorthand
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; }
-
7/29/2019 Css Shorthand
23/75
2. Padding
-
7/29/2019 Css Shorthand
24/75
Padding using one shorthand
value
p {
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em; }
p { padding: 1em; }
-
7/29/2019 Css Shorthand
25/75
Padding using two shorthand
value (order critical)
p {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 1em;
padding-left: 2em; }
p { padding: 1em 2em; }
-
7/29/2019 Css Shorthand
26/75
Padding using three shorthand
value (order critical)
p {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 4em;
padding-left: 2em; }
p { padding: 1em 2em 4em; }
-
7/29/2019 Css Shorthand
27/75
Padding using fourshorthand
value (order critical)
p {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 4em;
padding-left: 3em; }
p { padding: 1em 2em 4em 3em; }
-
7/29/2019 Css Shorthand
28/75
A note about
borders
-
7/29/2019 Css Shorthand
29/75
The default value for a property,
when it hasnt been specified by
authors is called the initial value.
-
7/29/2019 Css Shorthand
30/75
The initial value of each property
is defined in the CSS
specification.
-
7/29/2019 Css Shorthand
31/75
The initial values for the various
border properties are:
p { border-width:medium; }
p { border-style: none; }
p { border-color: content-color; }
-
7/29/2019 Css Shorthand
32/75
3. Border-color
-
7/29/2019 Css Shorthand
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; }
-
7/29/2019 Css Shorthand
34/75
Border-color using two
shorthand value (order critical)
p {
border-top-color: #999;
border-right-color: #aaa;
border-bottom-color: #999;
border-left-color: #aaa; }
p { border-color: #999 #aaa; }
-
7/29/2019 Css Shorthand
35/75
Border-color using three
shorthand value (order critical)
p {
border-top-color: #999;
border-right-color: #aaa;
border-bottom-color: #000;
border-left-color: #aaa; }
p { border-color: #999 #aaa #000; }
-
7/29/2019 Css Shorthand
36/75
Border-color using four
shorthand value (order critical)
p {
border-top-color: #999;
border-right-color: #aaa;
border-bottom-color: #000;
border-left-color: #666; }
p {border-color: #999 #aaa #000 #666;}
-
7/29/2019 Css Shorthand
37/75
4. Border-width
-
7/29/2019 Css Shorthand
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; }
-
7/29/2019 Css Shorthand
39/75
Border-width using two
shorthand value (order critical)
p {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 1px;
border-left-width: 2px; }
p { border-width: 1px 2px; }
-
7/29/2019 Css Shorthand
40/75
Border-width using three
shorthand value (order critical)
p {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px; }
p { border-width: 1px 2px 3px; }
-
7/29/2019 Css Shorthand
41/75
Border-width using four
shorthand value (order critical)
p {
border-top-width: 1px;
border-right-width: 3px;
border-bottom-width: 4px;
border-left-width: 1px; }
p { border-width: 1px 3px 4px 1px; }
-
7/29/2019 Css Shorthand
42/75
5. Border-style
-
7/29/2019 Css Shorthand
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; }
-
7/29/2019 Css Shorthand
44/75
Border-style using two
shorthand value (order critical)
p {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: dashed; }
p { border-style:solid dashed; }
-
7/29/2019 Css Shorthand
45/75
Border-style using three
shorthand value (order critical)
p {
border-top-style: ridged;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: dashed; }
p { border-style: ridge dashed solid;}
-
7/29/2019 Css Shorthand
46/75
Border-style using four
shorthand value (order critical)
p {
border-top-style: ridged;border-right-style: dashed;
border-bottom-style: solid;
border-left-style: inset; }
p { border-style: ridge dashed solid
inset; }
-
7/29/2019 Css Shorthand
47/75
6. Border-top
-
7/29/2019 Css Shorthand
48/75
Border-top combining three
longhand properties(order is not critical)
p {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;
}
p { border-top: 1px solid #000; }
-
7/29/2019 Css Shorthand
49/75
7. Border-right
-
7/29/2019 Css Shorthand
50/75
Border-right combining three
longhand properties(order is not critical)
p {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;
}
p { border-right: 1px solid #000; }
-
7/29/2019 Css Shorthand
51/75
8. Border-bottom
-
7/29/2019 Css Shorthand
52/75
Border-bottom combining three
longhand properties(order is not critical)
p {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000;
}
p { border-bottom:1px solid #000; }
-
7/29/2019 Css Shorthand
53/75
9. Border-left
-
7/29/2019 Css Shorthand
54/75
Border-left combining three
longhand properties(order is not critical)
p {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000;
}
p { border-left:1px solid #000; }
-
7/29/2019 Css Shorthand
55/75
10. Border
-
7/29/2019 Css Shorthand
56/75
Border combining three
longhand properties(order is not critical)
p {
border-width: 1px;
border-style: solid;
border-color: #000;
}
p { border:1px solid #000; }
-
7/29/2019 Css Shorthand
57/75
11. Outline
-
7/29/2019 Css Shorthand
58/75
The initial values for the various
outline properties are:
p { outline-width:medium; }
p { outline-style: none; }
p { outline-color: invert; }
-
7/29/2019 Css Shorthand
59/75
Unlike border, there are no
outline-top, outline-right, outline-bottom or outline-left properties.
-
7/29/2019 Css Shorthand
60/75
However, authors can use
outline instead ofoutline-width,outline-style, outline-color.
-
7/29/2019 Css Shorthand
61/75
Outline combining three
longhand properties(order is not critical)
p {
outline-width: 1px;
outline-style: solid;
outline-color: #000; }
p { outline:1px solid #000; }
-
7/29/2019 Css Shorthand
62/75
Be aware that IE5, IE6 and even
IE7 do not support outline.
-
7/29/2019 Css Shorthand
63/75
12. Background
-
7/29/2019 Css Shorthand
64/75
The initial values for the various
background properties are:
p { background-color: transparent; }
p { background-image: none; }
p { background-attachment: scroll; }
p { background-repeat: repeat; }
p { background-position: 0 0; }
-
7/29/2019 Css Shorthand
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; }
-
7/29/2019 Css Shorthand
66/75
13. Font
-
7/29/2019 Css Shorthand
67/75
The initial values for the various
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]; }
-
7/29/2019 Css Shorthand
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; }
-
7/29/2019 Css Shorthand
69/75
14. List-style
-
7/29/2019 Css Shorthand
70/75
The initial values for the various
list-style properties are:
p { list-style-type: disc; }
p { list-style-image: none; }
p { list-style-position: outside; }
-
7/29/2019 Css Shorthand
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)
-
7/29/2019 Css Shorthand
72/75
A recap
/* mar in al es */
-
7/29/2019 Css Shorthand
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 */
-
7/29/2019 Css Shorthand
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
-
7/29/2019 Css Shorthand
75/75
Russ WeakleyMax Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin:linkedin.com/in/russweakley