Style Guide

The visual style guide helps understand CSS classes and image styles available to you in the WYSIWYG body content entry field to achieve a desired look for certain elements. Ignore the lorem ipsum (placeholder Latin text used as example).

Please...

...don't add inline styles of your own using the CSS "style" attribute. Inlines styles are removed by the editor. You may however use the Styles dropdown in the WYSIWYG editor (which confusingly applies Classes, not styles.)
...don't create spacing with extra line breaks. You probably don't need soft breaks (shift-return), definitely not multiple soft breaks, and you only need to hit return once after a paragraph. The site is styled to create appropriate spacing in most cases without your help.
...don't use tables to create layout. In some cases tables can cause Section 508 issues. In many cases they will break tablet and/or phone layouts if not properly responsive. In rare circumstances, if you can meet Section 508 requirements and desire a layout table, you may use the Styles dropdown to apply the "layout-1" class to a table to turn it into a layout table. Be aware that once you change a table to layout it will appear invisible to you, so you may need to enter some dummy content to some of the cells before adding the class.
...don't add javascript or any <script> or <object> tags. They will not be saved.

Buttons

Blue Button

Green Button

An Unordered (Bulleted) List Is Used When The Order of Items Is Unimportant

Pellentesque in lectus a nisl ornare aliquet non at ligula
Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
Aenean pretium purus vel enim dignissim convallis
Vivamus tempor auctor sapien
Purus vel enim dignissim
Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.

An Ordered (Numbered) List Is Used Only When The Order Is Important, Such As In a Recipe

Pellentesque in lectus a nisl ornare aliquet non at ligula
Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
Note that a list can have nested lists however most WYSIWYG editors become easily confused by nested lists so you may experience issues. You can always either "disable rich-text", use the "HTML editor" button, or "Source" button to directly edit the HTML is necessary.
1. To create a nested list, choose some list items you wish to become nested then click the "increase indent" button.
  1. another nested list
  2. use the Styles dropdown in the WYSIWYG editor bar to apply a list type to an <ol> tag (ordered list)
  3. ordered list types: decimal, alpha, roman, upper, lower
2. Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
3. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
Vivamus tempor auctor sapien
Purus vel enim dignissim
Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.

A class "counter-1" exists for a more complex automatic numbered list however it has limited usefulness:

Pellentesque in lectus a nisl ornare aliquet non at ligula
Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
Note that a list can have nested lists however most WYSIWYG editors become easily confused by nested lists so you may experience issues. You can always "disable rich-text" or use the "HTML editor" button to directly edit the HTML is necessary.
1. To create a nested list, choose some list items you wish to become nested then click the "increase indent" button.
  1. another nested list
  2. use the Styles dropdown in the WYSIWYG editor bar to apply a list type to an <ol> tag (ordered list)
  3. ordered list types: decimal, alpha, roman, upper, lower
2. Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
3. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
Vivamus tempor auctor sapien
Purus vel enim dignissim
Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.

Ordered list numbering can be painful. We still don't have easy, full control over the numbering. If you run into a situation where none of the offered classes/styles help you achieve the list you desire, you may have to type your numbers/letters manually. If you need to do this use class "no-counter-1" on the ordered list (<ol> tag) and it will strip all numbers. Then you may add your own:

1.1 Pellentesque in lectus a nisl ornare aliquet non at ligula
1.2 Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
1.3 Note that a list can have nested lists however most WYSIWYG editors become easily confused by nested lists so you may experience issues. You can always "disable rich-text" or use the "HTML editor" button to directly edit the HTML is necessary.
1. 1.3.1 To create a nested list, choose some list items you wish to become nested then click the "increase indent" button.
  1. 1.3.1.1 another nested list
  2. 1.3.1.2 use the Styles dropdown in the WYSIWYG editor bar to apply a list type to an <ol> tag (ordered list)
  3. 1.3.1.3 ordered list types: decimal, alpha, roman, upper, lower
2. 1.3.2 Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
3. 1.3.3 Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.
1.4 Vivamus tempor auctor sapien
1.5 Purus vel enim dignissim
1.6 Duis dictum tempor auctor sapien, sed hendrerit eros congue id. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper.

Paragraphs below have important information about Headings (H2, H3, H4, H5, H6)

The use of proper HTML heading tags is important for Section 508 and other coding standards. Heading tags (H2-H6) imply structure in an HTML document (web page), something that is easy to forget for some users yet imperative for others.

One of the most common Section 508 failures is the use of inappropriate Heading tags. Too often users choose a tag because it "looks good" to them. In HTML, Heading tags serve a specific purpose: to imply hierarchy within the content.

The <h1> tag is arguably the most important, imparting to assistive tech users and search engines that this heading text is the most pertinent on the page. It should succinctly describe the topic of the entire page. You do not need to add an <h1> because this Content Management System's theme has been setup to use this tag as the page title.

Remaining Heading tags should be used to imply structure. Think of it almost like a list (except you don't use the list tags as we do below for illustrative purposes):

Foods (H1)
- Fruit (H2)
  - Apple (H3)
    - Lodi (H4)
    - Granny Smith (H4)
    - Macintosh (H4)
  - Peach (H3)
  - Banana (H3)
- Vegetable (H2)
  - Lettuce (H3)
  - Squash (H3)
  - Cucumber (H3)
- Meat (H2)
  - Beef (H3)
  - Fish (H3)
  - Fowl (H3)

Extending the list concept above into text, and assuming our page is titled "Foods," one might end up with page content like this:

Fruit (an H2 heading)

Phasellus maximus libero sed fermentum porta. Proin quis odio lectus. Praesent ultrices ante ac lacus convallis, vitae euismod enim dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ut purus tincidunt felis consectetur maximus.

Apple (an H3 heading)

Mauris interdum dui a fermentum aliquam. Curabitur lorem elit, mattis eget tempus vel, commodo a ante. Vestibulum tristique leo id ante tempus, in fringilla enim laoreet.

Lodi (an H4 heading)

Granny Smith (an H4 heading)

Mauris interdum dui a fermentum aliquam. Curabitur lorem elit, mattis eget tempus vel, commodo a ante. Vestibulum tristique leo id ante tempus, in fringilla enim laoreet.

Macintosh (an H4 heading)

Peach (an H3 heading)

Mauris interdum dui a fermentum aliquam. Curabitur lorem elit, mattis eget tempus vel, commodo a ante. Vestibulum tristique leo id ante tempus, in fringilla enim laoreet.

Banana (an H3 heading)

Vegetable (an H2 heading)

Tables

The <table> tag was developed specifically for tabular HTML content, meaning data tables where rows and columns are needed to provide context to a piece of data.

This is an Example of a Data Table Caption
Name	Job	City, State
John Smith	Third Assistant Engineer (Day/Watch)	Purple, Idaho
Alexandra Felicity Anderson	Medical Officer	San Jose, California
Barnaby Johnson	Inspector	Constitution, Massachusetts
Antonio Rubio	Deputy Director Under Secretary of Stuff	Frederick, Maryland
Sally Pennington	Small Business Owner	Richmond, Virginia

Not long after bandwidth began growing, folks began trying to improve web page aesthetics. HTML itself initially didn't provide robust page layout options. The <table> tag was quickly usurped by coders.

Tables can provide some control over the placement of objects on a web page, however they (particularly nested tables) can cause the "flow" of HTML to get a bit out of synch with what one sees on-screen. This leads some to believe that using tables is a WCAG violation. While not true strictly speaking, the cases when it is and is not a violation are so nebulous that it's pretty tough to explain to folks who have other priorities and simply want to get content into their website.

Perhaps a more impactful issue is that WYSIWYG editors (and users) tend to define pixel-specific widths when using tables, which could make the web site non-responsive for mobile devices. So, use tables for data and either define no widths or use percentages.

Tables Are Feisty

When left to their own devices, tables choose the width of each column based on the text within a column compared to text in other columns of the same table. This means multiple tables on a page won't always "line up correctly" as they might if you crammed all the data into one big table. Of course, you didn't use one big table because that would break 508, right? :)

Vegetables Colours
Vegetable	Color
Beet	Red
Cucumber	Green

State Capitals
State	Capital
Utah	Salt Lake City
Oklahoma	Oklahoma City

The example above is where folks might be tempted to set all the cells of a column to a certain pixel width so "it looks nice" — so the vegetable table columns line up with the state capital columns. There's a couple problems with adding pixel widths:

you've now added a bunch of superfluous code which can be tough to update down the road
your table is no longer responsive, meaning tablets and phones may not be able to render it properly

Instead, use a class from the WYSIWYG dropdown on a table to make it behave more uniformly across multiple tables. The "table_col1_50pct" class will make the first column 50% of the full table width; the "table_col1_33pct" does 33%, etc. While it doesn't offer total control, it will improve the aesthetics plus it'll keep the table responsive because it uses percentages. Look at the same tables below.

Vegetable	Color
Beet	Red
Cucumber	Green

State	Capital
Utah	Salt Lake City
Oklahoma	Oklahoma City

Layout Table

This web site provides a "layout-1" class for tables to help you use them for layout should you have no other recourse, however it is probably best that you do not use them. Applying this style to a table causes margin, padding, borders and colors to disappear from all table cells effectively making the table invisible.

row 1, column 1

row 1, column 2

row 1, column 3

row 2, column 1

row 2, column 2

row 2, column 3

row 3, column 1

row 3, column 2

row 3, column 3

HR tags (horizontal rules)

Horizontal rules (<hr>) by default are thin grey lines with a margin on top and bottom. Alternative rules are detailed below.

Basic HR below (grey)

Aenean pretium purus vel enim dignissim convallis. Proin id dictum massa. Duis tristique, metus eget efficitur varius, arcu neque euismod odio, quis mattis lorem nisi eget urna. Cras eu cursus lectus, eget vehicula mauris. Pellentesque a elit non sem consequat elementum. Maecenas arcu purus, varius sit amet nibh in, ultrices blandit est.

HR class "rule1" below (blue)

Duis dictum sed massa at pellentesque. Vivamus tempor auctor sapien, sed hendrerit eros congue id. Sed rutrum neque mollis erat sagittis, ut interdum enim ullamcorper. Donec aliquam dolor ac diam sollicitudin sodales.

Sed tempus enim id sem dictum, in ornare eros commodo. Pellentesque in lectus a nisl ornare aliquet non at ligula. Morbi congue lectus ac suscipit accumsan. Donec vel leo a felis porta lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam pretium hendrerit elit ac euismod. Sed elit lacus, sollicitudin a arcu vitae, tempus rhoncus orci.