<p>Notice<br /> The Page Has Not Loaded Properly.<br /> While Holding The Cmd Key Down,<br /> Tap The R Key 5 To 7 Times.</p>

CSS Properties And Values

Wazcal Is Here
HTML Help Gnubee
(Home Of The Mallrats)
CSS Notes

This is not a complete list. This is a sampling of CSS properties and values known to work with Webtv 2.8.2.

Here is the W3C CSS 2 list of properties and values:
W3C CSS 2 Properties

Background

background color:
selector { background-color: value }
background image:
selector { background-image: url(/url.jpg) }
Shorthand:
selector { background: url(/url.jpg) #123456 }

Background Repeat

selector { background-repeat: value }

Values are:
no-repeat (the background doesn't tile)
repeat-x (the background tiles horizontally)
repeat-y (the background tiles vertically)
repeat (the background tiles normally)

no-repeat
A malcontent from the very beginning. Melkor is a classic example of one who held great power and possessed no character. Although years in the making, his violent end was inevitable.


repeat-x
A malcontent from the very beginning. Melkor is a classic example of one who held great power and possessed no character. Although years in the making, his violent end was inevitable.


repeat-y
A malcontent from the very beginning. Melkor is a classic example of one who held great power and possessed no character. Although years in the making, his violent end was inevitable.

Font Family

selector { font-family: value }
selector { font-family: value, value, value }

Values are:
sans-serif (helvetica)
monospace (also courier)

A web browser will use the first value that it supports in the order that the values are listed. You can include as many values as you want. Put a comma between each value. Use a generic font-family value as the last value just in case.

If a font-family name consists of more than one word, such as comic sans, put quotes around the font name in your CSS code.

Embed, link and import example:
selector { font-family: "comic sans" }
For inline use single quotes:
<tag style="font-family: 'comic sans'">Text</tag>

A few other various values:
serif is possibly times
sans-serif is possibly arial or helvetica
cursive is possibly comic sans
fantasy is possibly ransom
monospace is possibly courier

Font Size

selector { font-size: value }

Point Font Size:
font size 1 = 1pt
font size 2 = 17pt
font size 3 = 19pt
font size 4 = 19pt
font size 5 = 23pt
font size 6 = 27pt
font size 7 = 33pt

Pixel Font Size
font size 1 = 1px
font size 2 = 14px
font size 3 = 16px
font size 4 = 16px
font size 5 = 19px
font size 6 = 23px
font size 7 = 28px

Font Style

selector { font-style: value }

Values are:
italic
oblique
normal

Font Weight

selector { font-weight: value }

Values are:
bold
normal

Lists

selector { list-style-type: value }

Values are:
There is a difference between circle and disc. How they display depends on the color and font-size used. Also notice that the circle aligns top and the disc aligns middle. Here are examples using light blue and font-size 27pt:

Apply any left, center or right alignment to the list itself and the list item (the content of the <li> and </li>) will follow.

When using lists for any element that has CSS rules applied to it, the list will conform to the list rules and the list item will conform to it's own rules. For example, a link:

It appears that any margin-left in the body will be removed when lists are used. Enclosing the lists between <div> and </div> or putting them in a table are possible solutions.

Margin Left

selector { margin-left: value }

margin-left: 30px
After 6 World Championships and over 70 Grand Prix wins, it's obvious that Michael Schumacher is not only the best of his time, he is the best of all time.

Text Align

selector {text-align: value }

Values are:
left
right
center

Text Color

selector { color: value }

Values are:
name
hex

Text Decoration

selector { text-decoration: value }

Values are:
underline - (makes the text underlined)
line-through - (puts a line through the text)
none - (no text decoration)

Text Indent

selector {text-indent: value }

text-indent: 30px
After 6 World Championships and over 70 Grand Prix wins, it's obvious that Michael Schumacher is not only the best of his time, he is the best of all time.

Text Shadow

selector { text-shadow: color right/leftoffset bottom/topoffset shadow }

{ text-shadow: #b0c4de 7px 7px 1px }

This Is Text Shadow

{ text-shadow: -5px -5px }

This Is Text Shadow

{ text-shadow: #b0c4de 5px 30px 1px }

This Is Too Much Text Shadow

Hey, get off my spot on the World Wide Web !

Text Transform

selector { text-transform: value }

Values are:
uppercase - (makes every character upper case/capitalized)
lowercase - (makes every character lower case)
capitalize - (makes the first character of every word capitalized)
none - (over rides/removes any inherited text-transform value and the text will display normally)