General Styling


Styling Text

text-decoration: overline;            
                        : line-through;
                        :underline;
                        :blink;

text-transform:uppercase;
                       :lowercase;
                       :capitalize;

p {text-indent:40px;}

p {letter-spacing:3px;
     word-spacing:10px;
     }

p {line-height:70%;}
p.sa {line-height: 2em;}

div {direction:rtl;}

p{white-space:nowrap;}

vertical-align:text-top;
                    :text-bottom;
                    :top;
                    :middle;
                    :bottom;

Styling Fonts

p {font-family:"Times New Roman",Times,serif;}

font-style:normal;
               :italic;
               :oblique;

font-variant:normal;
                  :small-caps;

font-weight:normal;
                  :lighter;
                  :bold;
                  :900;

font:italic bold 12px/30px Georgia,serif;

Styling Lists

list-style-type:disc;
                     :circle;
                     :square;
                     :none;
                     :decimal;
                     :decimal-leading-zero;
                     :lower-roman;
                     :upper-roman;
                     :lower-alpha;
                     :upper-alpha;
                     :lower-greek;
                     :lower-latin;
                     :upper-latin;

list-style-image:url('pfeil.gif');

Outline

outline-style:dotted;
                   :dashed;
                   :solid;
                   :double;
                   :groove;
                   :ridge;
                   :inset;
                   :outset;

p
{
border:1px solid gray;
outline:blue dotted thick;
}

Positioning

Set the shape of an element

img
{
position:absolute;
clip:rect(0px,80px,150px,10px);
}

overflow: auto;
              :scroll;
              :hidden;

img
{
position:absolute;
bottom:200px;
}

Mouse over the words to change the cursor.

<span style="cursor:auto">auto</span><br />
<span style="cursor:crosshair">crosshair</span><br />
<span style="cursor:default">default</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:help">help</span><br />
<span style="cursor:move">move</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:pointer">pointer</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:wait">wait</span><br />

Floating

img.gallery
{
float:left;
width:130px;
height:80px;
margin:10px;
}