Watched a video on CSS-Tricks about CSS short hand. I was already aware of the short-hand for the border properties but the short-hand for background and font will save me time and make my code more readable. Bare in mind that the values must be in the correct order. You can omit certain values if you want them to just assume their defualt vale but you cannot change the order. Here they are:
Background:
color | image | repeat | position | attachment
element {
background:red url(image.png) repeat top left scroll;
}
Font:
style | variant | weight | size | height | family
p {
font:bold 1em/1.2em georgia,"times new roman",serif;
}
Border:
width | style | color
element {
border: 4px solid red;
}
List-Style:
type | position | image
ul li {
list-style:square inside url(image.png);
}
Background:
color | image | repeat | position | attachment
element {
background:red url(image.png) repeat top left scroll;
}
Font:
style | variant | weight | size | height | family
p {
font:bold 1em/1.2em georgia,"times new roman",serif;
}
Border:
width | style | color
element {
border: 4px solid red;
}
List-Style:
type | position | image
ul li {
list-style:square inside url(image.png);
}
0 Responses to “CSS Short-hand”
Post a Comment