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