Sample CSS Page

Basic CSS Summary

Return to XHTML CSS...

Text font family:

body { font-family: arial, helvetica; }

font-family: serif;
font-family: san-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: "times new roman", times;
font-family: arial, helvetica;
font-family: impact;
font-family: verdana;
font-family: courier, "courier new";
font-family: "Comic Sans MS";

Text font sizes:

body { font-size: medium; }

body { font-size: medium; color: #003366; }

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

Text font weights:

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

Text decoration:

a: link { color: #336666; text-decoration: none; }

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

Text alignment:

.centered { text-align: center; }

text-align: left;

text-align: right;

text-align: center;

text-align: justified

Other Text Options:

color: #CC9966;

.innertable { border: groove thin #333333; }

em { color: #996699; }

background-color: #CC9966;

border: groove thick #66CC66;

border: dotted thin

border: dashed medium

border: solid thick

border: double thin

border: ridge medium

border: inset thick

border: outset thin

Images

Images will often display a border around them. You can turn the border off with the following CSS:

img { border-style: none; } or img { border: 0; }

notice how the paragraphs contains indented text: .indent { margin: 20px; }

cat

You can also "float" images to the right or left of a paragraph by inserting the image inside it's own paragraph, then attach the CSS "float" to the paragraph containing the image. You can't attach the float inside the image coding!

Lists

Unordered List Options:

ul { list-style-type: disc; }

disc
circle
square
none

Ordered List Options:

decimal
lower-roman
upper-roman
lower-alpha
upper-alpha

Links

a: link { color: #0033cc; text-decoration: underline; }

a: visited { color: #663399; text-decoration: underline; }

a: hover { color: #006600; text-decoration: none; }

a: active { color: #ff0000; text-decoration: none; }

Special Classes

Special Classes are often used when you wish a word, a line of text, or a paragraph to have something different about it - such as a smaller size or different color:

.navbar { background-color: #ffcc33; }

.navbar a: link { color: #0033cc; text-decoration: underline; }

.navbar a: visited { color: #663399; text-decoration: underline; }

.navbar a: hover { color: #006600; text-decoration: none; }

.navbar a: active { color: #ff0000; text-decoration: none; }

Table Options

table: {width: 100%; border: thin outset #9C0000; }

td,th { vertical-align: top; }