File Under: Cheat Sheets, CSS

CSS Properties


Name of
Property
Rule syntax

Possible values
font-family <selector> {font-family:<value>} <family-name> (specify) or <generic-family> [serif, sans-serif, cursive, fantasy, monospace]


font-style <selector> {font-style:<value>} normal, italic

font-weight <selector> {font-weight:<value>} normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900


font-size <selector> {font-size:<value>} <absolute-size>, <relative-size>, <length>, <percentage>


font $
<selector> {font:<value>} , , ,

Color and Background
Name of
Property
Rule syntax Possible values

color <selector> {color:<value>}

<color>


background-color <selector> {background-color:<value>}

<color>


background-image <selector> {background-image:url(<value>)} URL (relative or absolute path)

background $
<selector>{background:<value>} <background-color> (i.e., <color>)

Text properties
Name of
Property
Rule syntax Possible values

Text-decoration <selector>{text-decoration:<value>} underline, line-through

text-transform <selector>{text-transform:<value>} capitalize, uppercase, lowercase, none

text-align <selector>{text-align:<value>} left, right, center, justify

text-indent <selector>{text-indent:<value>} <length>, <percentage>
Box properties

Name of
Property
Rule syntax Possible values
margin $

<selector>{margin:<value>} <length>, <percentage>, auto(sequence:t r b l)

margin-top

<selector>{margin-top:<value>} <length>, <percentage>, auto

Margin-right

<selector>{margin-right:<value>} <length>, <percentage>, auto

margin-bottom

<selector>{margin-bottom:<value>} <length>, <percentage>, auto

margin-left <selector>{margin-left:<value>} <length>, <percentage>, auto

padding $
<selector>{padding:<value>} <length>, <percentage>, (sequence:t r b l)

padding-top
<selector>{padding-top:<value>} <length>, <percentage>


padding-right
<selector>{padding-right:<value>} <length>, <percentage>


padding-bottom
<selector>{padding-bottom:<value>} <length>, <percentage>


padding-left
<selector>{padding-left:<value>} <length>, <percentage>


border-color
<selector>{border-color:<value>} <color>


border-style
<selector>{border-style:<value>} solid, double, groove, ridge, inset, outset


border $
<selector>{border:<value>} <border-width>, <border-style>, <color>

Block-level and Replaced Elements
width <selector>{width:<value>} <length>, <percentage>, auto


height <selector>{height:<value>} <length>, auto

float <selector>{float:<value>} left, right

clear <selector>{clear:<value>} none, left, right
Position (CSS – P)
Name of
Property
Rule syntax Possible values
position <selector>{position:<value>} absolute, relative

top

<selector>{top:<value>} <length>, <percentage>, auto

left

<selector>{left:<value>} <length>, <percentage>, auto

visibility

<selector>{visibility:<value>} hidden, visible, inherit

z-index <selector>{z-index:<value>}

<number>, auto

overflow <selector>{overflow:<value>} visible, hidden, auto


$ = Shorthand Property