Back | Chicago-Kent Home | Web Support Page

WEB SUPPORT- Web Site Style Guide

What is HTML?
HTML (HyperText Markup Language) is the computer code used to create Web pages. Using Dreamweaver, you can easily create attractive Web pages without learning all the intricasies of HTML...the software codes for you.

What are styles?
Styles are standard formats that allow you to make your Web pages look a certain way.

What is a stylesheet?
A stylesheet is simply a file that contains all of the style information for your Web pages. Stylesheets simplify the formatting process and make formatting consistent across your Web pages. Rather than change the font color from red to black in each Web page, for example, stylesheets allow the change to be made only once (in the stylesheet file). As a result, all Web pages that use the same stylesheet are updated automatically with the new style.

What is the default font used by most Chicago-Kent styles?
The default font is defined as a series of display fonts. Your browser will display text on pages that reference the Chicago-Kent stylesheet using the first available (reading the series from left to right) font that is installed on your computer. Verdana is Chicago-Kent's primary font face.

Styles Based on Standard HTML Definitions: Paragraph and Heading Styles

The table below lists general Web page styles defined by the main Chicago-Kent stylesheet. When you want text to appear a certain way, for example a "Heading 3" look, you assign the H3 style in the Format field of Dreamweaver's Property Inspector to that selected text. (To view the Property Inspector if it's not visible, click on Dreamweaver's Window menu and select Properties.) Your browser will do the work for you, rendering the text in the appropriate font type, size, color, and spacing.

Style Name Display Description HTML Syntax
Paragraph

Your Text

Paragraph text in black <P>Your Text</P>
Heading 1

Your Text

Largest heading in red <h1>Your Text</h1>
Heading 2

Your Text

Largest heading in black <h2>Your Text</h2>
Heading 3

Your Text

Medium heading in red <h3>Your Text</h3>
Heading 4

Your Text

Medium heading in black <h4>Your Text</h4>
Heading 5
Your Text
Smallest heading in red <h5>Your Text</h5>
Heading 6
Your Text
Smallest heading in black <h6>Your Text</h6>


Styles Based on Non-standard HTML Definitions: Classes

What are classes?
They're merely special styles which allow you to take formatting even further.

The table below lists non-standard html styles defined by the Chicago-Kent stylesheet. They produce similar results to the standard styles -- altered font, color, size, and spacing -- but are accomplished in a different way and used for specialized purposes. To apply these styles in Dreamweaver, select the text you want to format and double-click the appropriate style name from the Library Palette (if it's not visible, click Window > Library > Assets). Please note: if you instead write the HTML code yourself (in the "code" window -- click View > Code), the syntax (column 4) required to achieve these styles is slightly different than the standard HTML style syntax above.

Style Name Display Description HTML Syntax
small Your Text Small text <span class="small">Your Text</span>
small2 Your Text Small, alternate font <span class="small2">Your Text</span>
topic Your Text Bold red text with no spacing above/below <span class="topic">Your Text</span>
facname Your Text Bold red large text; used in faculty biography pages <span class="facname">Your Text</span>
factitle Your Text Bold text; used in faculty biography pages <span class="factitle">Your Text</span>
pgtitle Your Text Bold text <span class="pgtitle">Your Text</span>
pubtitle Your Text small caps; used for publication titles <span class="pubtitle">Your Text</span>
rtnavtitle Your Text Small bold white text <span class="rtnavtitle">Your Text</span>
menutitle Your Text Small bold text <span class="menutitle">Your Text</span>
white Your Text White text <span class="white">Your Text</span>
smallwhite Your Text Small white text <span class="smallwhite">Your Text</span>
smallwhitebold Your Text Small bold white text <span class="smallwhitebold">Your Text</span>
red Your Text Red text <span class="red">Your Text</span>
smallred Your Text Bold red text <span class="smallred">Your Text</span>

Back | Chicago-Kent Home | Web Support Page