Style Guide (h1)
h1 header with class="center"
h1 header with class="right"
h2 header looks like this
h2 header with class="center"
h2 header with class="right"
h3 header looks like this, centered by default
h3 header with class="left"
h3 header with class="right"
h4 header looks like this
h4 header with class="center"
h4 header with class="right"
h5 header looks like this
h5 header with class="center"
h5 header with class="right"
h6 header looks like this
h6 header with class="center"
h6 header with class="right"
This is the formatting for a regular paragraph. Inside of it, you may use b tags for bold text, i tags for italic text, u tags for underlined text, em tags for emphasized text, or or any other combination thereof.
This is a paragraph with class="center" which will make the paragraph (or really anything else you add that class to, for that matter) center-aligned.
Similarly, if you add class="right" to a paragraph, or again -anything else- that paragraph or item should appear with its text or other content right-aligned.
- This is the first item in an ordered list
- Second item
- Third item
- This is the first item in an un-ordered list
- Second item
- Third item
The following is a definition list, or dl tag, with dt and dd sub-tags:
- Definition List Term #1
- This is the Definition, or Description, of the first List term in a Definition List.
- Definition List Term #2
- This is the Definition, or Description, of the second List term in a Definition List.
A table complete with thead, tbody and tfoot tags will look like this:
| Item | Length | Weight | Cost |
|---|---|---|---|
| Total | $2,600 | ||
| Full-Length Sofa | 90" | 85 lbs. | $1,100 |
| Apartment Sofa | 72" | 77 lbs. | $900 |
| Coffee Table | 48" | 37 lbs. | $600 |
All four of the elements below are divs with a class of "quad" inside a containing div, which does not have a class, but may be given one for any purpose. It is important that any "quad" divs be inside of a container div with no other elements in order to keep the margins of the first and fourth elements correct.
This is a p tag inside of a div with class="third outline" which will put a dark blue box around a container that is 1/3rd the width of the screen. Third will then become 1/2 the screen size at smaller, mobile resolutions. Please note that third does not have horizontal padding, and is designed for content to go edge-to-edge, making the border not really very useful.
this is a p tag with class="center" inside a div with class="third shade". It should have a grey background instead of white/transparent.
As you can probably surmise, this is a p tag with a class of "right" inside a div with class="third shade outline" combining three classes for width, background and border.
This is a p tag inside of a div with class="quad outline" which will put a dark blue box around a container that is 1/4th the width of the screen. Quad will then become 1/2 the screen size at smaller, mobile resolutions.
this is a p tag with class="center" inside a div with class="quad shade". It should have a grey background instead of white/transparent.
You guessed it: this is a p tag with a class of "center" inside a div with class="quad shade outline" combining three classes for width, background and border.
Finally, this a p with class="right" inside a div with class="quad shade outline shadow" which will add a dropshadow in addition to the other three classes.
This is a p tag inside of a div with class="quin" which will generate a container that is 1/5th the width of the screen. Quin will then become 1/2 the screen size at smaller, mobile resolutions.
This is a p tag inside of a div with class="quin outline" which will put a dark blue box around a container that is 1/5th the width of the screen. Quin will then become 1/2 the screen size at smaller, mobile resolutions.
this is a p tag with class="center" inside a div with class="quin shade". It should have a grey background instead of white/transparent.
Obviously at this point, we have a p tag with a class of "center" inside a div with class="quin shade outline" combining three classes for width, background and border.
Finally, this a p with class="right" inside a div with class="quin shade outline shadow" which will add a dropshadow in addition to the other three classes.