Classless CSS

Classless CSS allows you to make a nice looking page with only basic semantic HTML! It's called classless because it isn't dependent on a special HTML structure. The CSS can also just be used as a template for other grander endeavors.

How to use

You can download the CSS from Github, or just copy it out of the source code.

For the styling to work properly, at minimum you need to enclose your content in <main> tags. That's basically it! It's also good practice to use <section> tags to mark sections off properly, but that's not necessary for everything to work. You can also put a <footer> in before you close your main tag for a footer.

This entire HTML page can also be used as a code template if you're not sure!

Modifying colors

All colors are defined via variables at the top of the CSS. If you'd like your default colors to be dark, change dark to light in the media query and change your colors accordingly.

Heading 1

Heading 2

Heading 3

Heading 4

This is a code block! If your screen is too narrow, it will scroll.

This is strong, this is normal, and this is emphasized! This is a link.

"The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> cite element."

MDN, "The Block Quotation element"

• Unordered list item 1
• Unordered list item 2
• Unordered list item 3
  • Nested list

1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3
   1. Nested list