Skip to content. Skip to navigation

CareerTech Standard Template Website

Style Examples

This style is <p class="discreet">. Consider this type style a "note" or quick "comment/description." It would be useful for a short phrase or perhaps image description.

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.

Thsi 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 see 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.

H2 Header Style: Use this style for the Main Heading of the page

  1. 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
  2. Ordered list can be used as simple Lists or Numbered Lists
    • Another bullet point
  3. Extra UI Features
    • Another bullet point
    • Another bullet point

NOTE: CareerTech Website: how about some ITALICS <em> </em> type styling for a "Note:" or quick little reminders. Hey, you do not have to use this style, but isn't it nice to know its name!

Browser List

Specifies which browsers are capable of a specific level.

Item 1 of Non numbered ordered list

  • Another bullet point
  • Another bullet point
  • Another bullet point
  • Another bullet point

Item 2

  • Another bullet point
  • Another bullet point
  • Another bullet point
  • Another bullet point
  • Another bullet point

Item 3

  • 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.

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

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. get_adobe_reader.gif