Cheat sheet CSS

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

Box model

image model box

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

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)

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

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

plus :

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
  • :first-line
  • :first-letter

Units

  • Length %
  • em
  • pt
  • px
  • Keywords bolder
  • lighter
  • large