Style Guide

 

Cascading Style Sheets and Text Formatting

In This Section

Heading styles Text styles Background styles Palette

Cascading Style Sheets (CSS) are a way to apply consistent formatting across an entire site. We define the site styles in a stylesheet, and then link to the stylesheet from the site template. Every page using the site template can then use the stylesheet styles for formatting.

We use a modified version of the CSS from the Bootstrap framework. You can look at the Bootstrap documentation for information on styles you can use in your pages. Below, we've included examples of some of the most common styles, and show how they look in our modified stylesheets.

Heading styles

Level 1 heading

<h1>Level 1 heading</h1>

Level 2 heading

<h2>Level 2 heading</h2>

Level 3 heading

<h3>Level 3 heading</h3>

Level 4 heading

<h4>Level 4 heading</h4>
Level 1 heading style in span
above normal text
<span class="headersLevel1">Level 1 heading style in span</span>
<br>above normal text
Level 2 heading style in span
above normal text
<span class="headersLevel2">Level 2 heading style in paragraph</span>
<br>above normal text
Level 3 heading style in span
above normal text
<span class="headersLevel3">Level 3 heading style in span</span>
<br>above normal text
Level 4 heading style in span
above normal text
<span class="headersLevel4">Level 4 heading style in span</span>
<br>above normal text

Text styles

Normal text, in <p> tags.

<p>Normal text, in <p> tags.</p>

Note: class for notes, not to be used just to get different colors of body text

<p class="note">Note: class for <strong>notes</strong>, not to be 
used just to get different colors of body text</p>

normal link; this is the way links will appear in body text

<p><a href="#">normal link</a>; this is the way links will appear in body text</p>

Blockquote. Used for a quote, not for indenting. Use the "indent" and "smallindent" classes to indent content.

<blockquote>
  <p>Blockquote. Used for a quote, not for indenting. Use the "indent" 
  and "smallindent" classes to indent content.</p>
</blockquote>

Indented text, 40 pixel indent

<p class="indent">Indented text, 40 pixel indent</p>

Indented text, 20 pixel indent

<p class="smallindent">Indented text, 20 pixel indent</p>

Background styles

Blue background; doesn't change text color
<div class="background1">Blue background; doesn't change text color</div>
Gray background; doesn't change text color
<div class="background2">Gray background; doesn't change text color</div>
Blue box with gray border; doesn't change text color; use on div with desired box width
<div class="quotebox" style="width: 250px;">Blue box with gray border; doesn't change text color; use on div with desired box width</div>
Light blue box with blue border; doesn't change text color; use on div with desired box width
<div class="well" style="width: 66%;">Light blue box with blue border; doesn't change text color; use on div with desired box width</div>

Palette

There are three colors from the site palette that have associated classes to switch the color of several elements. All you have to do is apply the class to a <div> that holds the elements you want to change, as in the examples below.

Remember that using color alone to communicate information isn't accessible. You can only use these color changes for decorative purposes.

Level 3 heading

Level 4 heading

Panel title

List group item 1 List group item 2

Sign up for email updates from PROGRESS.

<div class="primary-palette">
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="list-group">
<a class="list-group-item" href="#">List group item 1</a>
<a class="list-group-item" href="#">List group item 2</a>
</div>
</div>
<form action="https://public.govdelivery.com/accounts/USED/subscribers/qualify">
<p> Sign up for email updates from <em>PROGRESS</em>.</p>
<div class="input-group">
<input id="topic_id" name="topic_id" type="hidden" value="USED_163" /> 
<input class="form-control" placeholder="Email Address" id="email-subscribe" name="email" type="email"> 
<span class="input-group-btn">
<button class="btn btn-default" type="submit" name="commit" value="Submit">Subscribe</button>
</span>
</div>
</form>  
</div>

Level 3 heading

Level 4 heading

Panel title

List group item 1 List group item 2

Sign up for email updates from PROGRESS.

<div class="secondary-palette">
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="list-group">
<a class="list-group-item" href="#">List group item 1</a>
<a class="list-group-item" href="#">List group item 2</a>
</div>
</div>
<form action="https://public.govdelivery.com/accounts/USED/subscribers/qualify">
<p> Sign up for email updates from <em>PROGRESS</em>.</p>
<div class="input-group">
<input id="topic_id" name="topic_id" type="hidden" value="USED_163" /> 
<input class="form-control" placeholder="Email Address" id="email-subscribe" name="email" type="email"> 
<span class="input-group-btn">
<button class="btn btn-default" type="submit" name="commit" value="Submit">Subscribe</button>
</span>
</div>
</form>  
</div>

Level 3 heading

Level 4 heading

Panel title

List group item 1 List group item 2

Sign up for email updates from PROGRESS.

<div class="tertiary-palette">
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="list-group">
<a class="list-group-item" href="#">List group item 1</a>
<a class="list-group-item" href="#">List group item 2</a>
</div>
</div>
<form action="https://public.govdelivery.com/accounts/USED/subscribers/qualify">
<p> Sign up for email updates from <em>PROGRESS</em>.</p>
<div class="input-group">
<input id="topic_id" name="topic_id" type="hidden" value="USED_163" /> 
<input class="form-control" placeholder="Email Address" id="email-subscribe" name="email" type="email"> 
<span class="input-group-btn">
<button class="btn btn-default" type="submit" name="commit" value="Submit">Subscribe</button>
</span>
</div>
</form>  
</div>

Additional Text and Background Colors

There are additional colors from the palette that can be used as a background class for a paragraph or other block of text, or as a text color on paragraphs or shorter pieces of text.

White text on a blue background.

<p class="bg-primary">White text on a blue background.</p>

White text on a green background.

<p class="bg-secondary">White text on a green background.</p>

White text on an orange background.

<p class="bg-tertiary">White text on an orange background.</p>

A small piece of colored text, on a full paragraph.

<p class="text-secondary">A small piece of colored text, on a full paragraph.</p>

A small piece of colored text, on a <span>.

<p>A small piece of <span class="text-tertiary">colored text</span>, on a <span>.</p>

A small piece of colored text, on a paragraph, with one section marked <strong>.

<p class="text-accent"><strong>A small piece of colored text</strong> on a paragraph, with one section marked <strong>.</p>

Last Modified: 2/1/2017