Common CSS Properties Cheat Sheet

Text

Property Description Values Examples Notes
color sets color of text Hex values or color names p { color: #0699b4;}
p { color: blue;}
text-align aligns text left
right
center
justify		 p { text-align: right;}
text-indent indents text px, pt, cm, em, % p { text-indent: 2em;} You can use it to indent the first line of text in a paragraph.
text-decoration add decoration to text none
underline, etc.		 a { text-decoration: none;}
text-transformation controls letters none
capitalize
uppercase
lowercase		 h2 { text-transformation: uppercase;}
line-height sets distance between lines % or px p { line-height: 18px;}
p { line-height: 150%;}
letter-spacing sets the distance between characters normal (default - no extra space between characters)
px value (length can be negative)		 h1 {letter-spacing: 1px;}

Font

Property Description Values Examples Notes
font-family sets the font family of the text font or font family name p { font-family: “Times New Roman”, Times, serif;} If the browser does not support the first font, it tries the next font. End with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available
font-size sets the size of the text values in px or em h2 { font-size: 18px;}
h2 { font-size: 1.1em;}		 "em" is a relative value (decimal values are ok to use) 

  • 1: same size as the current/parent element's font size
  • 2: double the size of the current/parent element's font size
  • 0.5: half the size of the current/parent element's font size
font-style sets the text style normal
italic
oblique		 h2 { font-style: italic;}
font-weight sets the weight of a font normal
bold
bolder
lighter, etc.		 a { font-weight: bold;}

Box, Background, and Borders

Property Description Values Examples
background-color sets the color of an element's background hex color values or color names body { background-color: #ffffff;}
background-image sets an image as a background image url body { background-image: url ('images/red-dots.jpg');}
background-repeat specifies if/how a background image should be repeated repeat
repeat-x
repeat-y
no-repeat		 body { background-repeat: repeat-x;}
body { background: url ('images/red-dots.jpg') no-repeat;}
background-position sets the starting position of a background image left top
right bottom
center top
center center, etc.		 body { background-position: left top;}
body { background: url ('images/red-dots.jpg') no-repeat left top;}
border
border-top, border-bottom
border-left, border-right		 specifies the type of border (could also be set to ‘none’)
  • color
    • hex value or name
  • style
    • solid
    • dashed
    • dotted
    • double (2 borders)
    • etc.
  • left, right, top, bottom
 img {border-color: #cccccc;}
img {border-style: solid;}
h2 { border-bottom: 1px;}
h2 { border-bottom: 1px solid #cccccc;}

img {border: none;}

div {border:2px solid; border-radius:25px;}
(use border-radius for rounded borders)
margin
margin-top, margin-bottom
margin-left, margin-right		 clears an area around an element (outside of the border) px value
  • p {margin: 10px;}
    • top, right, bottom & left margins are 10px
  • p {margin: 10px 5px;}
    • top & bottom margins are 10px and left & right margins are 5px
  • p {margin: 10px 15px 20px;}
    • top margin is 10px, left & right margins are 15px and bottom margin is 20px
  • p {margin: 10px 0 15px 2px;}
    • top margin is 10px, right margin is 0px, bottom margin is 15px & left margin is 2px
  • p {margin-top: 15px;}
    • also margin-left, margin-right, margin-bottom
padding
padding-top, padding-bottom
padding-left, padding-right		 clears an area around an element (inside of the border) px value follows same order as margins, see above

  • p {padding: 10px;}
  • p {padding: 10px 5px;}
  • p {padding: 10px 15px 20px;}
  • p {padding: 10px 0 15px 20px;}
  • p {padding-top: 10px;}
width / height sets the width / height auto (default - browser calculates the width)
px, cm, %, etc. 		p{width: 100px; height: 100px}
min-width / min-height sets the minimum width /height of an element. Prevents the width / height from becoming smaller than min-width/max-height. px, cm, %, etc. p{min-width:1000px; min-height:100px;}
max-width /max-height sets the maximum width/height of an element. Prevents the width/height from becoming larger than max-width/max-height. none (default)
px, cm, %, etc.		 p{max-width:100px; max-height:50;}
float specifies whether an box should float right
left
center
none		 img {float: left;}
clear no floating allowed to the specific side of an element right
left
both		 #wrap {clear: both;}

Lists

Property Description Values Examples
list-style-type specifies the bullet style circle
square
upper roman
disc, etc.		 ul { list-style-type: square;}

For more CSS Properties: Go to: http://www.w3schools.com/cssref/default.asp
Many of the above were taken from: http://tech.journalism.cuny.edu/documentation/css-cheat-sheet/