This page demonstrates CSS styles for paragraph formatting made available through the standard SJU stylesheets. Anybody using the official SJU templates will have access to the following styles.

Note: If you unsure how to apply these styles, or styles in general, please refer to "How-To Apply CSS Styles using Dreamweaver."

In Dreamweaver, the "editable region" called "main content" (highlighted in the image below) is where the bulk of your webpage's content will go. SJU stylesheets contain many pre-defined styles which you may employ in this area of your webpage.

Figure: Primary "content" area highlighted in yellow.

Within the "content" area, most users will find they want to divide up their text into sections. Usually, each section will have title and section content.

Paragraph formatting options

The most common need with paragraph formatting is to define paragraphs such that their relationship to one another is visually clear. One good way to do this is to divide paragraphs up between those paragraphs (or single lines) that are titles and those that are the corresponding information.

A couple of simple styles exist for defining paragraphs.

Section titles may be assigned with the <h2> and <h3> tags, as well as the subtitle classes. This will visually distinguish them from your content, which can be defined with subtext class, or simply <p>...</p> tags.

Seeing what these various styles look like is the best way to understand how you can apply them. Here is an example of those styles:

In addition to the above styles (which can be used on any page), some styles specific to department homepages are also recommended

Each department will have one homepage, the page which all visitors most likely enter your website. It is this page in which you are most likely to provide welcoming information and general navigation to all that your department website offers. For this reason, two styles were created to address these common elements: depthptoc (department homepage table of contents) and depthpsect (department homepage main section). As you can see in the example below, depthptoc acts as a container for the table of contents detailing the department website. depthpsect acts to denote the main sections of the table of contents (versus the details).

For additional samples of these, and more, please see the text styles demo page.