CSS site style testing

Use the links below to re-style this entire web site to see how you can change the looks of a website with CSS while leaving the content in tact.


Purple Style
gzuslivz
Rolling Navigation Menu
Ugly with Motion

Semantics

Semantics is using language structured in a meaningful way. It's having content in a hierarchy. It's not using h1's to make something big, it's using h1 as a primary heading (or title). Then things in that section fall under that heading or title.

Think of semantics as an outline of what you're trying to convey. Group things appropriately and consistently.

An h1 always comes before an h2

You can have multiple h2's under an h1

Usually you have content after an h#

You can have multiple h2's under an h1

More content after another h#
This second article has internal styling using a class. Classes can be used multiple times on a page.
This third article has internal styling using the same class.
This fourth article has internal styling using an ID. IDs should only be used once on a page.
This second article has inline styling

Do you see how the h#'s work?

This is a good page to see the general setup of a web page with where general tags belong, like the body, head, header, footer, sections, and articles. It also show examples of external stlyling, internal styling, and inline styling.

Lists

Order your lists with a purpose. If there is no specific reason to put one thing before another, then order your lists alphabetically. If you're showing steps for something you'll probably want to use an ordered list via HTML like this:

Steps to do Something

  1. step 1
  2. step 2
  3. step 3

If you're listing things that aren't 1, 2, 3, etc., then use an unordered list via HTML like this (still use some order though like listing things alphabetically):

Instruments that I Play