COMM 750, Web Studies/Digital Media
Instructor: Ross Collins
A few common CSS properties and values
Note that many of these will not produce anything in HTML, particularly all the cute colors, of which I list only a few. The W3 Consortium offers a complete list of colors, with corresponding hexidecimal values, noting only 16 color names are actually supported by the consortium's guidelines. But the others generally work. If in doubt, css also supports hex numbers.
Fonts:
font-family
font-size
font-style
font-variant
Text:
color
letter-spacing
word-spacing
line-height
vertical-align
text-align
text-decoration
text-indent
Borders:
border-top-color
border-right-color
border-left-color
border-bottom-color
Positioning:
position
top
bottom
right
display
clear
z-index
Units of measure:
px [pixels]
em [Em-width]
pt [points]
in [inches]
mm [millimeters]
pc [picas]
Sample of colors supported by IE and many other browsers:
Beige, black, blue, blanchedAlmond, burlywood, cornsilk, crimson, deepPink, green, magenta, navy, midnightBlue, oliveDrab, plum, sienna, steelBlue, teal, thistle, wheat, yellow.
Basic exercise
Copy the rule below, paste into the <head> portion of an HTML document you've set up in a text editor.
<style type="text/css">
p.samplerule
{
font-family: 'gil sans' , arial; font-size: 20px; color: midnightblue; font-variant: small-caps;
}
</style>
Copy this quote for the <body> of the HTML doc:
Life can only be understood Backward, but must be lived Forward.
--Soren Kierkegaard
Now set up the rest of your HTML document. Apply the rule by writing this tag: <p class="samplerule"> Be sure to close the tag pair with a </p> at the end of the quote. Add a <br> tag after "forward." to put the author's name on a new line. Close all other tags, save with htm file extension, open in browser.
Notes: