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]
