WARC Style Guide

The Following Describes the Styling for the WARC. Styles in the WARC conform to the Cal Poly Web Template, plus a few styles added for clarity.

Page Heading (h1)

These are to be used as page titles, with only one per page. Use Title case with these headings.

Section Heading (h2)

These are to be used fairly often. They separate any sections within a page that is all one part of the "Page Heading." Use Title case with these headings.

Usually these are only used on "index.html" pages of each section of the WARC. For example, check out the Building home page to see how they are used. They link to other pages in the site, while acting as headers. The hover state color is #000099. Use Title case with these headings.

Section Headings

Sub-Section Heading (h3)

If there are sub-sections within "Section Headings," then apply this rule. Use Title case with these headings.

Sub-Heading (h4)

H4's are used very sparingly. These are to designate sections within "Sub-Sections."

Brief emphasized text is a <span> tag with class="emph". Color is #0033CC
Brief emphasized text is a <span> tag with class="emphRed". Color is #CC3300
This style is used for brief lines of emphasized text. Blue or red coloring may be used depending on connotation desired.

required: elements are set to class="required". Bold, color: #CC0000, uppercase. This is for elements within the WARC that are deemed "REQUIRED."

Extended Emphasized Text- Used for emphasis of lengthier blocks of text. Can also be used as style for introductory text under the Page Heading. No coloration is used, but the point size is larger than that of normal text. See the Special Projects Page for an example of how Extended Emphasized Text is used. Use class="ext".

Unordered List

  • Unordered lists
  • are good for listing things
  • that are in no particular order
  • and will be displayed with bullets

Ordered List

  1. Ordered lists
  2. are good for listing things
  3. that that have a definite sequence
  4. and will be displayed with numbers

Note: This is a note text for the users to take note. It's just bold, with no other styling applied.

Blockquotes are just paragraphs with the <blockquote> tag applied. These are to be used only for pieces of text that are quoted, not for indented text. To indent text, set the paragraph to class="indent".

Small lines of text have class="small" applied to to it. This is used for designating contact info or credits.

.contentBox is to designate a higher-contrasted area of text to separate out it's importance in the document. Set to <div class="greybox></div>. See the Link Maintenance page for an example.

Codesnippet is where inline code appears within an area of text. Apply the <code> tag to the selected text.

Code text represents a chunk of code that needs to be displayed on its own and not mid-sentence. This text should have the <div class="contentBox_no_outline"></div> applied to it, while marking up the text itself with a <code> tag. This will put a gray, bordered box around the code text to make it more recognizable. Here is how it should look:

e.g. <Title>Web Authoring...</Title>

Related Content