CSS properties

[Build your website with HTML5 and

CSS3]

You can use this appendix as a checklist when developing your website.

This appendix is not complete and it is voluntary (only the most used are listed). An exhaustive
reference of CSS elements is provided on the Mozilla Developer Network site.

Text formatting properties

Property Values Description
(examples)

font-family font1, font2, font name

font3, serif,
sans-serif,

minivan, etc.

@font-face Font name and custom font

source

font size 1.3em, Text size

16px,
120%,
etc.

font weight bold, Bold

regular.

font-style italic, Italics

oblique,
normal.

[Build your website with HTML5 and CSS3 - HTML tags glossary]
 text-decoration underline, Underline, line above,
overline, line- strikethrough or flashing
through, blink,

none.

font-variant small-caps, Small capitals

normal.

text-transform capitalize, Capitals

lowercase,
uppercase.

make - Font super-property that combines:

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

text-align left, Horizontal alignment

center,
right,
justify.

vertical-align baseline, Vertical alignment (table cells or

middle, sub, super, inline-block elements only)
top, bottom

line-height 18px, Line height

120%,
normal,
etc.

text-indent 25px Indentation

white space pre, hyphenation

nowrap,
normal.

word wrap break-word, Forced hyphenation

normal.

[Build your website with HTML5 and CSS3 - HTML tags glossary]
 text-shadow 5px 5px 2px blue text shadow

(horizontal,
vertical, fade, color)

Color and background properties

Property Values Description
(examples)

color name, Text color

RGB (red, green, blue),
RGBA
(red, green, blue,
transparency),
#CF1A20

background-color Same as color Background color

background image url('image.png') Background image

background-attachme nt fixed, Fixed bottom

scroll.

background-repeat repeat-x, Background repeat

repeat-y, no-
repeat, repeat.

background-position (xy), Bottom position

top,
center,
bottom,
left,
right.

background -
Background super-property that
combines:
background-image,
background-repeat,
background-attachment,
background-position

[Build your website with HTML5 and CSS3 - HTML tags glossary]
 opacity 0.5 Transparency

Box properties
Property Values Description
(examples)

width 150px, Width

80%,
etc.

height 150px, Height

80%,
etc.

min width 150px, Minimum width

80%,
etc.

max-width 150px, Maximum width

80%,
etc.

min height 150px, Minimum height

80%,
etc.

max height 150px, Maximum height

80%,
etc.

margin top 23px top margin

margin left 23px left margin

margin right 23px Right margin

margin bottom 23px bottom margin

[Build your website with HTML5 and CSS3 - HTML tags glossary]
margin 23px 5px 23px 5px Margin super-property that
(top, combines:
right, bottom, left) margin-top,
margin-right,
margin-bottom,
margin-left.

padding-left 23px Inner margin left

padding right 23px Inner margin on the right

padding-bottom 23px Inner margin at the bottom

padding top 23px Inner margin at the top

padding 23px 5px 23px 5px Margin super-property that

(top, combines:
right, bottom, left) padding-top,
padding-right,
padding-bottom,
padding-left.

border-width 3px border thickness

border color name, border color

RGB (red, green,
blue), or
RGBA (red, green,
blue, transparency),
#CF1A20

border style solid, dotted, dashed, border type

double,
groove,
ridge, inset, outset.

[Build your website with HTML5 and CSS3 - HTML tags glossary]
border 3px solid black Border super-property that
combines: border-
width, border-color,
border-style.

Also available in border-top,

border-right,
border-bottom,
border-left versions.

border-radius 5px rounded border

box shadow 6px 6px 0px black box shadow

(horizontal, vertical,
fade, color)

Positioning and display properties

Property Values Description
(examples)

display block, Element type (block, inline,

inline, inline-block, none…)
inline-block, table,
table-cell,

none.

visibility visible, Visibility

hidden.

clip Showing part of the element

rect(0px,60px,30px,0px) rect(top,right,bottom,left)

[Build your website with HTML5 and CSS3 - HTML tags glossary]
 overflow auto, Behavior in case of overrun
scroll,
visible,
hidden.

float left, Floating

right,
none.

clear left, Stopping a float

right,
both,
none.

position relative, Positioning

absolute, static

top 20px Position relative to the top

bottom 20px Position relative to the bottom

left 20px Position relative to the left

right 20px Position relative to the right

z-index 10 Display order in case of overlap.

The largest value is displayed

above the others.

List properties
Property Values Description
(examples)

list-style-type disc, List type

circle,
square,
decimal,
lower-roman, upper-
roman,

[Build your website with HTML5 and CSS3 - HTML tags glossary]
 lower-alpha, upper-
alpha,
none.

list-style-position inside, Recessed position

outside.

list-style-image URL ('chip.png') Custom chip

list-style - List super-property that

combines: list-
style-type, list-style-
position, list-style-image.

Table properties
Property Values Description
(examples)

border-collapse collapse, Edge blending

separate.

empty-cells hide, Showing empty cells

show.

caption side bottom, Table title position

top.

Other properties
Property Values Description
(examples)

cursor crosshair, mouse cursor

default, help, move,
pointer, progress, text,
wait, e-resize, ne-resize,
auto, etc.

[Build your website with HTML5 and CSS3 - HTML tags glossary]