Typography
Shown below are a few of the styles and headings which are formatted
in the CSS in this template. Enjoy using them to dress up your website!
Heading 1
Heading 2
Heading 2 Alternate
Heading 3
Heading 4
Heading 5
Heading 6
You can customize your heading tags by adding colors, centering and underlining. All you have to do is add a class to the coding.
Below are some examples.
Heading 1
<h1 class="textcolorMedium center"> This heading has a class of "textcolorMedium" and "center".
Heading 2
<h2 class="textcolordAccent"> This heading has a class of "textcolorAccent"
.
There are many variations you can put together to make your style show!
Here are a few more examples:
Heading 3
<h3 class="textcolorAccent underline-dotted"> Classes: "textcolorAccent" and "underline-dotted"
Heading 3
<h3 class="textcolorMedium center underline-dashed"> Classes: "textcolorMedium" "center" underline-dashed
Heading 4
<h4 class="textcolorDark"> This heading has only one class of "textcolorDark"
Paragraph Classes
text align left <p class="left">
text-align center <p class="center">
text-align right <p class="right">
text tiny 65% <p class="tiny">
text small 85% p class="small">
text medium 90% <p class="medium">
text large 120% <p class="large">
text xlarge 180% <p class="xlarge">
wide letter-spacing <p class="wide">
lead text <p class="lead">
Author <p class="author">
Author Date <p class="authorDate">
Underlining Words, Phrases or Paragraphs
Just highlight the text and add the css.
Dashed
You can underline words
<p>You can <span class="underline-dashed">underline</span> words</p>
You can underline parts of a sentence or just one sentence.
<p>You can <span class="underline-dashed">underline parts of a sentence</span> or just one sentence.</p>
You can underline paragraphs
<p class="underline-dashed">You can underline paragraphs</p>
Dotted
You can underline words
<p>You can <span class="underline-dotted">underline</span> words</p>
You can underline parts of a sentence or just one sentence.
<p>You can <span class="underline-dotted">underline parts of a sentence</span> or just one sentence.</p>
You can underline paragraphs
<p class="underline-paragraphs">You can underline paragraphs</p>
Solid
You can underline words
<p>You can <span class="underline-solid">underline</span> words</p>
You can underline parts of a sentence or just one sentence.
<p>You can <span class="underline-solid">underline parts of a sentence</span> or just one sentence.</p>
You can underline paragraphs
<p class="underline-solid">You can underline paragraphs</p>
Block Quotes
You can choose to have a blockquote that goes all the way across the page.
Just add <blockquote>Your text</blockquote> to your page.
You can add a block quote easily. You can make this blockquote float to the right by adding "rightside" as a class. You can make it float to the left by adding "leftside"
as a class.
Vel sodales sit amet, auctor vitae dui. Nulla facilisi. Proin suscipit velit
et enim scelerisque at consequat sem imperdiet. Vivamus mauris nisi,
malesuada eget bibendum vel, suscipit in est. Praesent semper tempor quam,
et eleifend dolor cursus a.
The coding for floating left or right looks like this.
<blockquote class="rightside" > OR
<blockquote class="leftside" >
This blockquote goes all the way across the side of the section it is included in.
It is not floated.
Icons for "Home," "Call," "Email," and "Hours"
1Add your text
2 Place your curser at the beginning of the text and add the style by
choosing: home, call, email, hours or comment
Home - It looks like this in code view: <p class="home">Home</p>
Call - It looks like this in code view: <p class="call">
Email - It looks like this in code view: <p class="email">
3 Once you apply the style, the small icon will automatically show up! Easy stuff!
Drop Caps
The Drop Cap can be done by applying the dropcap class
to the paragraph.
<p class="dropcap">First Letter of your paragraph</p>
Buttons
You can make a button by applying the btn-main class.
<span class="btn">name of your button</span>
Big Number
1 You can also use the Big Number style to make the circled number.
<span class="bignumber">1 </span>
All you do is type in the number or letter, highlight it, and
then add the class: bignumber.
Big Letters
A Big Letter! You can easily create
this look by typing in your letter(s), highlighting it, and then adding
the class: bigletter. You can do it!
<span class="bigletters">can </span>
Highlighting
You can also words by applying the highlight class.
<span class="highlight">Words </span>
List Items
You can have list items appear like this:
This is the default unordered list:
Or you can apply the list1 class to the ul 'unordered list' and get this (you won't see it until you preview
online):
Another option is a numbered list by appling leadingzero to the ol 'ordered list' (you won't see it until you
preview online):
- list
- list
- list
Quick Links
Contact Us
- Your Business Name
- 1-800-123-4567
- Hours of Operation
Mon-Friday 8-5
Closed Weekends
Tell Us About It!
If you have questions or comments, we'd love to hear them.