Can you write a nice-looking website without adding classes or IDs to your HTML? That's exactly what classless CSS promises, though in practice you'll find you'll likely need to add some customization to get it just the way you want.

What is Classless CSS

Classless CSS is a design philosophy that adds properties and property values to type selectors only. A type selector is an HTML tag, so something like h1, p, form, div, etc.

Since every HTML element has a predefined style, a plain HTML doc will look good once the classless CSS stylesheet is linked.

How to Get Started

There are several classless CSS stylesheets available for use, and these are often times linked to your HTML document via a Content Delivery Network. Basically, there's a stylesheet stored on a server that you can link your HTML to. Below are a few options, and their websites are demos for what the stylesheet will do to plain HTML:

Water.css
New CSS
AWSM CSS
Style CSS
Writ CSS

There are many others out there, which can be found by searching for classless CSS stylesheets.

Create Your Own Style

Another option is to build your own classless stylesheet for reuse in your future projects. We all have our own style, and it's often easier and more satisfying to work with something you've crafted.

One way to go about this, is that you can download an existing classless stylesheet and tweak it to your liking.

Scott Tolinski of Syntax.fm podcast fame also teaches a course on building your own classless CSS stylesheet from scratch. His Level Up Tutorials course, Modern CSS Design Systems, covers this topic in much more detail.

Have you ever made a project using classless CSS? If so, leave a comment so other readers can hear about your experience!