Scribd
Upload
164 views

Css Cheat Sheet

The document provides examples of CSS shorthand properties for margins, borders, backgrounds, fonts, lists, and colors. It shows how to write shorthand code for margins, borders, backgrounds, and fonts to set multiple properties in one line, such as margin: 10px 20px 0; to set top and bottom margins to 10px and left/right margins to 20px. It also lists common color names and their equivalent hex code abbreviations.

Uploaded by

Ivica Dumanovic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
164 views

Css Cheat Sheet

The document provides examples of CSS shorthand properties for margins, borders, backgrounds, fonts, lists, and colors. It shows how to write shorthand code for margins, borders, backgrounds, and fonts to set multiple properties in one line, such as margin: 10px 20px 0; to set top and bottom margins to 10px and left/right margins to 20px. It also lists common color names and their equivalent hex code abbreviations.

Uploaded by

Ivica Dumanovic
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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)
}
CSS Shorthand Cheat Sheet by Example leigeber.com
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;
(fxed 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

You might also like