Web Start Letter - Website Tips and Info by Email Your Email:
We will never sell or give away your email address.

Internet Basics
   About the Internet
   About Web Browsers
   Why Domain Names

Getting Started
   HTML vs XHTML
   Making Webpage Files
   Naming Webpage Files

HTML Basics
   About HTML Tags
   Basic HTML Page
   DTDs and Doctype Tags
   Spaces and New Lines
   Special Characters
   Bold, Italics, More
   Writing Headlines
   Adding Links
   Making Lists
   Comments in HTML

Images and Colors
   How to Add Images
   Sources of Images
   Image File Formats
   Optimizing Images
   Color in HTML & CSS
   "Web-safe" Color Chart

More Advanced HTML
   Making Tables
   Formatting with Tables
   Making Forms
   Using Imagemaps
   Using Frames
   Meta Tags

Cascading Style Sheets
   Intro to CSS
   Ways to include CSS
   Some Useful CSS
   CSS Hover for Links

More
   Promoting Your Site
   How-To's Homepage
   Links

Cascading Style Sheets (CSS) Styles

Styles are written as a list of specifications in the format:

property:value; property2:value2;

The : between the property and value and the ; at the end are important.

Many properties can be set, including font styles, sizes, colors, background and border colors, margins, indents, and padding.

Webreview.com has charts listing which browsers let you set which properties and values using CSS.

Some Useful Properties

font-size

font-size can be specified several ways.

  • larger & smaller will make your font larger or smaller than the users default.
    (eg: font-size:larger; , font-size:smaller;)

  • px will set the size of a font in pixels. Fonts specified in pixels will look about the same size on PC's and Mac's.
    (eg:font-size:9px;)

  • pt is a font measurement from printing. It will look smaller on a Mac than a PC. On a Mac the px and the pt size appear to be the same. On a PC the pt size can be much larger.
    (eg: font-size:9pt; )

  • Percentage sizes can also be used
    (eg: font-size:130%; )

font-family

I need to write a whole other section explaining serif and sans-serif fonts, and how the picking of fonts from a list goes in order. For now, if you are familiar with the face attribute of the font tag, this is the CSS equivalent. The difference is that in specifying fonts you don't put quotes around the whold thing, but you do put quotes around the names of a ny fonts that have more than one word names.
(eg: font-family:"comic sans ms","lucida console",fantasy; )

color

color on its own like this means the text (font) color. Set it using the RGB hex numbers.
(eg: color:#ff0066;)

font-weight

bold or normal are the usual choices. You would use font-weight:normal; to override an otherwise bold style or tag, perhaps for an H1.
(eg: font-weight:bold;)

text-decoration

underline will underline text. none will keep a link from being underlined.
(eg: Link w/no underline and text-decoration:underline )

text-align

text-align behaves like align= in a paragraph tag does. It moves the alignment of the text afected by the style. This style only works on tags like div and p, ones that contain something. It is meaningless in an "inline" tag like span.

(eg:
text-align:right
)
text-indent

text-indent indents the first line of a paragraph the specified number of pixels. (eg: this whole definition has style="text-indent:30;" applied to it.

padding

padding adds the specified number of pixels to each side of the contents of the tag. If you only want padding on a certain side, or if you want different amounts of padding on each side, you can specify different amounts for padding-left, padding-top, padding-right, and padding-bottom.

(eg:
padding-top:20px;
padding-left:100px;
background-color

background-color obviously sets background color! Specify the color in the usual way.
(eg: background-color:#ffcccc;)

width

width in pixels (px) or % can only apply to container tags like div, p, table, not to inline tags like span. Note that if there is no blanks for the browser to use to wrap the text, a longer line may force the width to be larger than specified.
(eg:

<div style="width:30px;">
)