Classy Elements

Brought to you by...

HTML "class"

Classy web designers use classes.


Classes in HTML can be used for:

  • Styling elements
  • Selecting elements with JavaScript

Valid Class Names:

  • Begin with a letter (a-z or A-Z)
  • Include letters, numbers, underscores ("_"), and hyphens ("-"). But stick with letters and hyphens.
  • ARE case sensitive

Also, elements can have more than one class. Simply separate them with spaces:

<div class="hero content">

As always, use carefully

  • Use "semantic" names. This means name classes by what they are rather than what they do.
  • Recommend using class instead of ID for styling.
  • Test carefully in multiple browsers.
  • Don't overuse. Add a class to a parent and let the natural HTML tags inside take on styles from the parent.

Stay Classy, Friends

Remember, inline styles are NOT classy.