CSS

External Style
 <link rel="stylesheet" type="text/css" href="style.css" />
Internal Style
 <style type="text/css">selector {property: value;}</style>
Inline Style
 <tag style="property: value">

SELECTORS

* All elements
div All <div> elements
div span <span> within a <div>
div, span <div> and <span>
.class All of this class
div.class All <div> of this class
#id Element with this id
a[attr] <a> with attribute
a[attr=’XYZ] <a> with attribute of XYZ

PSEUDO SELECTORS

:hover
:active
:focus
:link
:visited
:first-line
:first-letter

BACKGROUND

background-color Colour value
background-image: url(img.jpg);
background-repeat repeat, no-repeat, repeat-x, repeat-y
background-attachment scroll, fixed
background-position (x y), top, center, bottom, left, right

THE BOX

BORDER

border-width Width value
border-style dashed, dotted, double, groove,  inset, outset, ridge, solid, none
border-color Colour value

POSITION

clear left, right, both, none
float left, right, none
left auto, length values (pt, in, cm, px)
top auto, length values (pt, in, cm, px)
clip: rect(10px, 5px, 10px, 5px);
visibility visible, hidden, collapse
position static, relative, absolute
z-index Set arrangement
vertical-align baseline, sub, super, top, text-top, middle, bottom, text-bottom, value, %

TEXT

letter-spacing Space between letters
line-height Distance between baselines
text-align left, right, center, justify
text-decoration line-through, none, overline, underline
text-indent Indents the first line of text 
text-transform capitalize, lowercase, uppercase
vertical-align Vertical alignment
word-spacing Spacing between words

FONTS

font-style Italic, normal, oblique
font-variant normal, small-caps
font-weight normal, bold, bolder, lighter
font-size xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, px, %
font-family Specific font(s)
font-stretch normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded

LIST

list-style-type disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
list-style-position inside; outside
list-style-image: url(img.gif);

cursor

url(img.gif);
auto;
crosshair;
default;
pointer;
move;
e-resize;
ne-resize;
nw-resize;
n-resize;
se-resize;
sw-resize;
s-resize;
w-resize;
text;
wait;
help;

OTHER

comments /*comment*/
units %, em, pt, px

CSS EXAMPLE

Leave a Reply