A Visual Guide of various CSS 2 Properties & Values

property (value)syntaxvisual 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


Valid XHTML 1.0 Strict

CSS Valide !

Thu, 23 Nov 2017 18:09:38 +0100