Scribd
Upload
98 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 CSS code for setting multiple related properties at once, such as margin, border, background, and font, in a more concise way compared to specifying each property individually. Examples are given for common values of properties like border style, background repeat, font style and weight, list style type, and color hex codes.

Uploaded by

Suparno Cah Sragen
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
98 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 CSS code for setting multiple related properties at once, such as margin, border, background, and font, in a more concise way compared to specifying each property individually. Examples are given for common values of properties like border style, background repeat, font style and weight, list style type, and color hex codes.

Uploaded by

Suparno Cah Sragen
Copyright
© Attribution Non-Commercial (BY-NC)
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;
(hxed 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