CSS Crash Course

Editing Styles...

The fonts and some colors are controlled by an external cascading style sheet. You should see it named as "styles.css" in your folder list. By editing styles.css, you can easily change font sizes, colors, and more across your entire web site!

Double-click on styles.css. In FP2000 or FP2002, this may open NotePad or your default text editor. In FP2003, the style sheet will open within FrontPage.

You will see some code like this:

body { background: #D6D5B2 }

.menubg { background: #4F355D }
.menu { color: #D6D5B2; font: bold 11px Verdana, Arial, Helvetica }
.menu A:link, .menu A:visited { color: #d6d5b2; text-decoration: none }

...

h4 { color: #A47C11; font: bold 80% Verdana, Arial, Helvetica }
h5 { color: #CA6A30; font: bold 75% Verdana, Arial, Helvetica }
h6 { color: #831B60; font: bold 70% Verdana, Arial, Helvetica }

p, ul, ol, .copyright { color: #555555; font: 68% Verdana, Arial, Helvetica }

A:link { color: #6D1B83 }
A:visited { color: #4d0860 }
A:active, A:hover { color: #ff9e0d }

.small { font: 10px Verdana, Arial, Helvetica } 

"Elements" are items that don't have periods before them, such as h1 (Heading 1), p (paragraph), and ul (unordered or bulleted list). "Classes" are items that have periods before them, such as ".menu." Classes allow you to have more flexibility with different text styles.

If you want to change a color or font, first locate it on the page in FrontPage. Switch to HTML view and find the tag or class associated with it -- <h1>, <p>,  or code that looks like <p class="menu">. This is how you know which style to change.

Changing colors...

Colors are defined by six-digit hexadecimal codes that begin with a pound sign -- such as #c15f00. To change the color of an element, you will need to figure out the six-digit code for the color. We have a link at our web site, www.jgtemplates.com/learn to a good color tool if you don't know how to figure it out.

Then, simply change the color code in the style that you want to modify, and save the styles.css file. It's that easy!

Changing fonts...

Before picking what fonts you want, you should be aware that you must pick fonts that are common to most people's systems - in other words, fonts like Arial, Verdana, and Times New Roman. If you choose a "fancy" or "cool" font, you need to be aware that people who don't have that font on their system will just see a default font (usually Times New Roman).

You'll notice that for some of the elements and classes, the fonts have been defined in similar matter to:

font: bold 80% Arial, Verdana, Helvetica

The list of font families -- "Arial, Verdana, Helvetica" -- are listed in preferred order. If the end-user doesn't have Arial, the browser will look for Verdana. If they don't have Verdana, the browser will look for Helvetica. You may replace this list of fonts with your own desired fonts, keeping in mind that you must spell the font the same way the computer system does.

Resources...

To learn more about cascading style sheets, you might try one of these web sites:

• www.webmonkey.com
• www.w3schools.com/css
• www.webreference.com