CSS Properties and Values

CSS Properties and Values

Text Property / Value / Example
font-family / family-name
generic-family / Arial, Tahoma
serif, sans-serif
font-size / pt (point), px (pixel), % (percent) / 12pt
20px
100%
font-style / normal, italic, oblique
font-weight / normal, bold, bolder, lighter, (number), xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller / 100-900
font / Any of the above values / {font: tahoma 12pt }
text-align / left, right, center, justify
text-decoration / none, underline, overline, line-through, blink
text-shadow / none, color, length, inherit
text-indent / px, % / 5px
word-spacing / normal, em / 1em, 2em, and so on.
Background Property / Value / Example
background-color / (color), transparent / #ffffff
background-image / none, (location) / sqpurple.gif
background-position / %, (length), top, center, bottom, left, center, right
background-repeat / repeat, repeat-x, repeat-y, no-repeat
background / Any of the above values / {background: URL(back.gif) repeat fixed}
color / color / #ffffff
List Property / Value / Example
list-style / (color), transparent / #ffffff
list-style-image / none, (location) / sqpurple.gif
list-style-position / %, px, top, center, bottom, left, center, right
Layout Property / Value / Example
margin-bottom / px, %, auto / 5px
margin-left / px, %, auto / 5px
margin-right / px, %, auto / 5px
margin-top / px, %, auto / 5px
margin
padding-right / Any of the above margin values
px, %, em / {margin: 5px 2px 5px 3px}
padding-bottom / px, %, em
padding-left / px, %, em
padding-top / px, %, em
padding / Any of the above padding values / {padding: 5em 6em 3em 6em}
border-bottom-width / medium, thin, thick, px / 500px
border-bottom / Any of the border-top-bottom, border-color and border-style values / {border-bottom: thin inset blue}
border-color / hexidecimal / #ffffff
border-left-width / medium, thin, thick, px / 500px
border-left / Any of the border-top-left, border-color and border-style values. / {border-left: thick inset green}
border-right-width / medium, thin, thick, px / 500px
border-right / Any of the border-right-width, border-color and border-style values. / {border-right: thin inset blue}
border-style / none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-top-width / medium, thin, thick, px / 500px
border-top / Any of the border-top-width, border-color and border-style values. / {border-top: thin inset red}
border / Any of the border values / {border: medium blue}
height / auto, px, % / 100%
width / auto, px, % / 100%

Some fun CSS (may not be compatible with all browsers)

Custom cursor (Note: you should have a .cur or .ani image file to use)

{ cursor: url(mycursor.cur) }

• Replace “mycursor.cur” with your file name (must be .cur or .ani file)
• Downloadable .ani here:

Dotted underline

A:hover { COLOR: #518293; border-bottom:1px dotted #FFFFFF;}

Change the browser’s scrollbar (experiment with color combinations)

{scrollbar-face-color: #000000; scrollbar-shadow-color: #BED8BF; scrollbar-highlight-color: #BED8BF; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000; scrollbar-arrow-color: #BED8BF}

List content modified from