A Visual Guide of various CSS 2 Properties & Values
| property (value) | syntax | visual result (display) |
|---|---|---|
| color (named) | <p style="color:red;">Colored text (font color, named color)</p> | Colored text (font color, named color) |
| background-color | <p style="background-color:yellow;">Colored text (background color, named color)</p> | Colored text (background color, named color) |
| color (hex) | <p style="color:#00FF00;">Colored text (font color, hex value)</p> | Colored text (font color, hex value) |
| color (short_hex) | <p style="color:#ccc;">Colored text (font color, short hex value)</p> | Colored text (font color, short hex value) |
| text-align (left) | <p style="text-align:left;">Left text align</p> | Left text align |
| text-align (center) | <p style="text-align:center;">Centered text align</p> | Centered text align |
| text-align (right) | <p style="text-align:right;">Right text align</p> | Right text align |
| text-align (justify) | <p style="text-align:justify;">Justified text align : this one must be longer to understand the meaning of this value on the display.</p> | Justified text align : this one must be longer to understand the meaning of this value on the display. |
| text-indent (px) | <p style="text-indent:20px;">Text indent (px)</p> | Text indent (px) |
| text-indent (em) | <p style="text-indent:3em;">Text indent (em)</p> | Text indent (em) |
| text-indent (cm) | <p style="text-indent:2cm;">Text indent (cm)</p> | Text indent (cm) |
| text-decoration (none) | <a style="text-decoration:none;" href="index.html">Text decoration (none)</a> | Text decoration (none) |
| font-weight (bold) | <p style="font-weight:bold;">Font weight (bold)</p> | Font weight (bold) |
| font-style (italic) | <p style="font-style:italic;">Font style (italic)</p> | Font style (italic) |
| background-image | <p style="background-image:url(./images.d/favicon_ter.png);">Background-image</p> | Background-image |
| font-family (cursive) | <p style="font-family:cursive;">Font family (cursive)</p> | Font family (cursive) |
| font-size (pt) | <p style="font-size:20pt;">Font size (pt)</p> | Font size (pt) |
| border | <p style="border:2px solid red;">Border (border-width, border-style, border-color)</p> | Border (border-width, border-style, border-color) |
| padding | <p style="padding:10px;">Padding (top, right, bottom, left)</p> | Padding (top, right, bottom, left) |
| margin | <p style="margin:0px 10px 20px 30px;">Margin (top, right, bottom, left) or margin-top, margin-right, margin-bottom, margin-left</p> | Margin (top, right, bottom, left) or margin-top, margin-right, margin-bottom, margin-left |