CSS Shorthand Cheat Sheet
Salam & hello to all my dearest reader, today I would like to share a Cascading Style Sheet notes that might be useful for those who looking for it. It consist of margins and paddings, fonts, border, background, list and many more. Check it out
Margin & Padding
#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or %)
}
#div {
margin:0 5px 10px 15px;
(top right bottom left)
}
#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}
#div {
margin:10px 20px 0;
(top right/left bottom)
}
#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#div {
margin:0 auto;
(top/bottom left/right)
}
#div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
#div {
margin:50px;
(top/right/bottom/left)
}
Border
#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/elements parent color property)
}
#div {
border:5px dotted blue;
}
#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}
#div {
border-right:2px solid #666;
}
#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}
#div {
border-width:3px 2px;
}
Background
#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default = repeat)
background-attachment: scroll;
(fixed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)
}
#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}
Font
#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = browse based)
font-size: 12px;
(xx-small, medium, x-large, set value, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
font-style: italic;
(normal, italic or oblique) (default = normal)
font-variant: normal;
(normal or small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num or %) (default = normal)
}
#div {
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}
List
#div {
list-style-image: url(images/bullet.gif);
(url or none) (default = none)
list-style-position: inside;
(inside or outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}
#div {
list-style:square inside url(images/bullet.gif);
}
Color
Aqua: #00ffff to #0ff
Black: #000000 to #000
Blue: #0000ff to #00f
Dark Grey: #666666 to #666
Fuchsia:#ff00ff to #f0f
Light Grey: #cccccc to #ccc
Lime: #00ff00 to#0f0
Orange: #ff6600 to #f60
Red: #ff0000 to #f00
White: #ffffff to #fff
Yellow: #ffff00 to #ff0
Credit to leigeber.com
[...] *for Shorthand on CSS, Syam has something that could make you greater in CSS [...]