| |
CSS Cheat sheet
| SYNTAX |
| Syntax |
| selector {property: value;} |
| External Style Sheet |
| <link rel="stylesheet" type="text/css" href="style.css" /> |
| Internal Style |
<style type="text/css">
selector {property: value;}
</style> |
| Inline Style |
| <tag style="property: value"> |
|
|
| GENERAL |
| Class |
String preceded by a period |
| ID |
String preceded by a hash mark |
| div |
Formats structure or block of text |
| span |
Inline formatting |
| color |
Foreground color |
| cursor |
Appearance of the cursor |
| display |
block; inline; list-item; none
|
| overflow |
How content overflowing its box is handled
visible, hidden, scroll, auto
|
| visibility |
visible, hidden
|
| FONT |
| font-style |
Italic, normal
|
| font-variant |
normal, small-caps
|
| font-weight |
bold, normal, lighter, bolder, integer (100-900)
|
| font-size |
Size of the font |
| font-family |
Specific font(s) to be used |
| TEXT |
| letter-spacing |
Space between letters |
| line-height |
Vertical distance between baselines |
| text-align |
Horizontal alignment |
| text-decoration |
blink, line-through, none, overline, underline
|
| text-indent |
First line indentation |
| text-transform |
capitalize, lowercase, uppercase
|
| vertical-align |
Vertical alignment |
| word-spacing |
Spacing between words |
| BOX MODEL |
 |
height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top;
padding-right; padding-bottom; padding-left; |
| BORDER |
| border-width |
Width of the border |
| border-style |
dashed; dotted; double; groove; inset; outset; ridge; solid; none
|
| border-color |
Color of the border |
| border-position |
border-left: 1px solid #082059; |
| POSITION |
| clear |
Any floating elements around the element?
both, left, right, none
|
| float |
Floats to a specified side
left, right, none
|
| left |
The left position of an element
auto, length values (pt, in, cm, px)
|
| top |
The top position of an element
auto, length values (pt, in, cm, px)
|
| position |
static, relative, absolute
|
| z-index |
Element above or below overlapping elements?
auto, integer (higher numbers on top)
|
| BACKGROUND |
| background-color |
Background color |
| background-image |
Background image |
| background-repeat |
repeat, no-repeat, repeat-x, repeat-y
|
| background-attachment |
Background image scroll with the element?
scroll, fixed
|
| background-position |
(x y), top, center, bottom, left, right
|
| LIST |
| list-style-type |
Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
|
| list-style-position |
Position of the bullet or number in a list
inside; outside
|
| list-style-image |
Image to be used as the bullet in a list |
|
| SHORTHAND |
| * The properties for each selector are in the order they should appear when using shorthand
notation. Thanks go to Leslie Frank for the original sheet |
| background |
| border |
| border-bottom |
| border-left |
| border-right |
| border-top |
| font |
| list-style |
| margin |
| padding |
|
| Pseudo Selectors |
| :hover |
| :active |
| :focus |
| :link |
| :visited |
| :first-line |
| :first-letter |
| Media Types |
| all |
| braille |
| embossed |
| handheld |
| print |
| projection |
| screen |
| speech |
| tty |
| Units |
| Length % |
| em |
| pt |
| px |
| Keywords bolder |
| lighter |
| larger |
|
|
|
Best Website Creation and Management Software Ever! Make your own website easily |
|
|
|
