Style Examples

This type style is the official CareerTech Document Description. Basically it is bolded and at the top of the page. If desire to use this you can summarize the content on the page, allowing someone to breifly soak in the page's usefulness, helping them know whether they should read on or if they should keep on searching.

This is an example of the standard paragraph type style. This will be used for most all content type. You can see below this another sample paragraph. Pretty amazing stuff, eh?

Remember to break up your content into small digestible "chunks" of content. This will make the audience more prone to keep reading and not get lost in a sea of words. Any content on the web should be treated with the same respect as content in books and print publications. In general, this means all the same formatting rules and style consistency should apply. Can you imagine how difficult and annoying it would be if you picked up a book to read and every page had a different layout, font, color, and size? It way the content in the book was presented would distract from you getting all the "story" out of the book. We want to avoid this on our CareerTech webpages and online media.

Header 1

<h1>Header 1 </h1>

Header 1 Document First Heading

<h1 class="documentFirstHeading">Header 1 Document First Heading</h1>

Header 2

<h2>Header 2</h2>

Header 3

<h3>Header 3</h3>

Header 4

<h4>Header 4</h4>

Header 5

<h5>Header 5</h5>

Header 6

<h6>Header 6</h6>

Header 7

<h7>Header 7</h7>

Header 8

<h8>Header 8</h8>

Header 9

<h9>Header 9</h9>

Gray Header Classes (dark gray, gray, light gray)

Dark Gray Header Class

Add this class to ANY Header Size and it makes it dark gray:

<h4 class="headerdarkgray">Dark Gray Header Class </h4>

Note: Do not start using this for your main headers or category/section headers as it is meant as an occassional use or to make something less prominent after you have exhausted the use of the regular header tag methods.

Gray Header Class

Add this class to ANY Header Size and it makes it dark gray:

<h4 class="headergray">Gray Header Class</h4>

Light Gray Header Class

Add this class to ANY Header Size and it makes it dark gray:

<h4 class="headerlightgray">Light Gray Header Class</h4>

Font & Document Styles

Italics Font: Use Italics tags for extra emphasis on items such as a "Note:" or quick little reminders. Hey, you do not have to use this style, but isn't it nice to know its tag name!

<em>Italics Font</em>

Strong Font : Use this tag for extra emphasis on items.

<strong>Strong Font</strong>

Document Description: The summary text for the document or page, and usually follows the "H1 DocumentFirstHeading" at the top of the page. This is an example of a div using the class="documentDescription"

<div class="documentDescription">
 <p>Document Description: The summary text for the document or page, 
and usually follows the &quot;H1 DocumentFirstHeading&quot; 
This is an example of a div using the class="documentDescription"</p>
 </div>

Discreet Class: You can use the class="discreet" with paragraphs <p>, divs <div>, and other tags to make the font small and subtle. You can consider this class style for a "note" or quick comment/description. It would be useful for a short phrase or perhaps image description.

<p class="discreet">
   Discreet Class: This style is &lt;p class=&quot;discreet&quot;&gt;. Consider this type style a &quot;note&quot; or quick &quot;comment/description.&quot; It would be useful for a short phrase or perhaps image description.
   </p>

Document By Line: The Document Byline can be used at the bottom of a document to show the Author's Name, Last Updated Date, or other similar information. This is an example of a div using the class="documentByLine"

<div class="documentByLine">Document By Line: 
This is an example of a div using the class="documentByLine"</div>

Current Item: This div uses the class="currentItem" to create the red box around it. This can be used in special cases if needed.

Card: This div usesthe class="card" style.

This is normal text following directly after the div with a class of "card".

Notice how this text wraps around the element on the right side of it. The information in the card is centered within the gray box.

Even Class:

This is a div using the class="even" and you will notice that the background is very light gray. This can be used on lists or table rows to help distinguish between several items.

Odd Class:

This is a div using the class="odd" and you will notice that the background is very light gray. This can be used on lists or table rows to help distinguish between several items.

Even Example

Odd Example

Even Example

Odd Example

Even Example

Odd Example

Even Example

Horizontal Rule: The Above line was created by using the <hr />

<hr />

Link Classes

Link Classes allow you to add extra styling to a particular link just by adding a "class" to the "a" tag. Many of these link classes will help your users know what kind of link they will be clicking on. This is very useful for downloads of different media, links to external sites that will take the guest away from your site completely, and many other special link types. For the sake of simplicity, all the following links are only for looks, you will have to properly link them to the proper media, etc.

Small Link Icon Class

Normal Document Link with no class assigned : Normal Link

Action Link : Action Link

<a href="style_examples.html/" class="link-action">Action Link</a>

Add Link : Add Link

Add Alternate Link : Add Alternate Link

Anchor Link : Anchor Link

Book Link : Book Link

Call To Link : Call To Link

Code Link : Code Link

Comment Link : Comment Link

External Link : External Link

Event Link : Event Link

Edit Link : Edit Link

Feed Link : Feed Link

FTP Link : FTP Link

HTTPS Link : HTTPS Link

IRC Link : IRC Link

Mail To Link : Mail To Link

Microsoft Access Doc : Microsoft Access Doc

Microsoft Excel Doc : Microsoft Excel Doc

Microsoft Outlook Doc : Microsoft Outlook Doc

Microsoft Powerpoint Doc : Microsoft Powerpoint Doc

Microsoft Access Doc : Microsoft Word Doc

OpenOffice Base Doc Lg : OpenOffice Base Doc

OpenOffice Calc Doc Lg : OpenOffice Calc Doc

OpenOffice Draw Doc Lg : OpenOffice Draw Doc

OpenOffice Impress Doc Lg : OpenOffice Impress Doc

OpenOffice Math Doc Lg : OpenOffice Math Doc

OpenOffice Writer Doc Lg : OpenOffice Writer Doc

News Link : News Link

PDF Link : PDF Link

Plain Link : Plain Link

Parent Link : Parent Link

User Link : User Link

Web Calendar Link : Web Calendar Link

Zip Link : Zip Link

Large Link Icon Class

Microsoft Access Doc Lg : Microsoft Access Doc

Microsoft Excel Doc Lg : Microsoft Excel Doc

Microsoft Outlook Doc Lg : Microsoft Outlook Doc

Microsoft Powerpoint Doc Lg : Microsoft Powerpoint Doc

Microsoft Word Doc Lg : Microsoft Word Doc

OpenOffice Base Doc Lg : OpenOffice Base Doc

OpenOffice Calc Doc Lg : OpenOffice Calc Doc

OpenOffice Draw Doc Lg : OpenOffice Draw Doc

OpenOffice Impress Doc Lg : OpenOffice Impress Doc

OpenOffice Math Doc Lg : OpenOffice Math Doc

OpenOffice Writer Doc Lg : OpenOffice Writer Doc

Ordered Lists (Numbered)

How about an Ordered List with numbers and bullets
- Bullet points in the list using <ul> <li> </li> </ul>
- Another bullet point:
  - How about a bullet point under another bullet point using <ul> <li> </li> </ul> again. Make something bold in case it is just a little more important
  - Another bullet point
Ordered list can be used as simple Lists or Numbered Lists
- Another bullet point
Extra UI Features
- Another bullet point
- Another bullet point

<ol>

  <li> <strong>How about an Ordered List 
with numbers and bullets</strong>

<ul>

<li>Bullet points in the list 
using &lt;ul&gt; &lt;li&gt; &lt;/li&gt; &lt;/ul&gt;</li>

<li>Another bullet point:

<ul>

<li>How about a bullet point under another 
bullet point using &lt;ul&gt; &lt;li&gt; &lt;/li&gt; &lt;/ul&gt; again. 
<strong>Make something bold </strong> 
in case it is just a little more important</li>

<li>Another bullet point</li>
</ul>

</li>
</ul>

</li>

<li> <strong>Ordered list can be used as simple 
Lists or Numbered Lists</strong>

<ul>

<li>Another bullet point</li>

</ul>

</li>

<li> <strong>Extra UI Features</strong>

<ul>

<li>Another bullet point</li>

<li>Another bullet point</li>

</ul>

</li>

</ol>

Ordered List (Non-numbered)

Non-numbered Ordered List

Another bullet point
Another bullet point
Another bullet point
Another bullet point

Generic non-ordered list example

Another bullet point
Another bullet point
Another bullet point
Another bullet point
Another bullet point

Accessible Table Examples

This is an example of a simple accessible table using "scope=" to identify the content of the columns and rows with their headers. Remember a table will only be as accessible as it is well thought out. Make sure you spend time to streamline and simplify your tables at all times.

	Morning	Afternoon	Morning	Afternoon
	Winter		Summer
Sally	9-11	12-6	7-11	12-3
John	10-11	12-6	9-11	12-5

CareerTech Anchor Links

For navigating to different sections in the page content use the name attribute. A name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

The line below defines a named anchor:

Useful Tips

<a name="tips">Useful Tips</a>

You should notice that a named anchor is not displayed in a special way. To hide the named anchor, simply put no text between the anchor tags like this:

<a name="tips"></a>

To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:

Useful Tips Section

<a href="style_examples.html#tips">Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "style_examples.html" will look like this:

Useful Tips Section

<a href="#tips">Useful Tips Section</a>

You can review this Styles Examples Page for how to create a "Sub Menu" under the Main Section Link of the Navigation using the anchor tag to link to the different sections of this page.

Notice that the "Back to top" link is placed at the bottom of each content section. Now notice how I placed the named anchor link right above each of these so that if you jump to that section you can immediately jump back to the top of the page in case you do not want to scroll through that section. Be conscious of how your guests will need to navigate through your site, and always provide easy ways to get navigate back and forward. This is one of the main reasons for utilizing a consistent left navigation area. Minimizing navigation areas will really help your guests find what they need.

PDF Document Handling

Below are examples of a simple PDF Description and how to make link. Below the example is a blank <h2> </h2> tag creating a line and then a link to the plugin for viewing PDF Documents. This practice is required to make the media more accessible.

NOTE: If you do not do this as a standard practice then the guest may not be able to "view" the content intended for them.

Example PDF Description and Link Example

A short description about this PDF: Name of PDF

Download the CareerTech Site-map Template: CareerTech Site-map

Having problems opening the document? You may need to install Adobe Acrobat Reader.

Back to top

This concludes this styles examples page. More styles will be presented and updated as time permits. Do not let this stop you from digging in to the CSS and using the many other styles already available for you to enjoy. Remember not to change colors without official approval.

Updated: 2006.08.30