www.link-academy.

com

CSS CHEAT SHEET

Shorthand

background
border
border-bottom
border-left
border-right
border-top
font
list-style
margin
padding

Comments

/* Comment */

Pseudo Selectors

:hover
:active
:focus
:link
:visited

SYNTAX

BOX MODEL

Syntax
selector {property: value;}
External
<link rel="stylesheet" type="text/css" href="style.css" />
Internal
<style type="text/css">
selector {property: value;}
</style>
Inline Style
<tag style="property: value">

margin

GENERAL
Class
ID
div
span
color
cursor
display

String preceded by a period /.

String preceded by a hash mark / #
Formats structure or block of text
Inline formatting
Foreground color
Appearance of the cursor
block; inline; list-item; none

overflow

How content overflowing its box is handled

visible, hidden, scroll, auto
visible, hidden

visibility

FONT
Media Types
all
braille
embossed
handheld
print
projection
screen
speech
tty
tv

Units
%
em
pt
px

font-style
font-variant
font-weight
font-size
font-family

Italic, normal
normal, small-caps
bold, normal, lighter, bolder, brojana vrednost (100-900)
Size of the font
Specific font(s) to be used

TEXT
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
vertical-align
word-spacing

Space between letters

Vertical distance between baselines
Horizontal alignment
blink, line-through, none, overline, underline
First line indentation
capitalize, lowercase, uppercase
Vertical alignment
Spacing between words

height; width;

border
padding
75 x 25 px

margin-top; margin-right;
margin-bottom; margin-left;
padding-top; padding-right;
padding-bottom; padding-left;

BORDER
border-width
border-style
border-color

Width of the border

dashed; dotted; double; groove; inset; outset; ridge; solid; none
Color of the border

POSITION
clear
float
left
top
position
z-index

Any floating elements around the element | both, left, right, none
Floats to a specified side | left, right, none
The left position of an element | auto, length values (pt, in, cm, px)
The top position of an element | auto, vrednost (pt, in, cm, px)
static, relative, absolute
Element above or below overlapping elements
auto, integer (higher numbers on top)

BACKGROUND
background-color
background-image
background-repeat
background-attachment

Background color
Background image
repeat, no-repeat, repeat-x, repeat-y
Background image scroll with the element?

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