A Web-Page with No CSS
It's okay, don't reload the page; it's not broken! It's supposed to look like this.
Why would anyone make a page with no styles?
More to the point, why would someone claiming to be an expert in CSS make a page with no CSS? There are several reasons.
- Speed is a feature.
- I was inspired by some discussion on the topic (HTML is All You Need to Make a Website). An HTML-only page is fast, accessible, responsive and brutalist, which much of my site is.
- Because I claim to be a CSS expert. To be good with CSS requires being good with HTML, in the same way as being a good painter-decorator requires understanding the underlying materials. A lot of CSS I've seen can be compared to making a window by changing the properties of a wall to transparent, instead of just using glass.
- To demonstrate that just because you can, it doesn't mean you should. There is a time and a place for everything.
- To demonstrate what can be done with HTML alone. The only added CSS on this page is via the 'Toggle font' button, which I considered removing... hmmm. The dark-mode is done with HTML, a trick I picked up from Do you know color-scheme?
- Because it's future-proof. Sir Tim Berners-Lee's original web-site is still available online and it still works*. More than that, it's fully responsive. It must be the best example of future-proof design ever!
* Sure, in the case of that site, browsers need to maintain backwards compatibility because some of the tags are now obsolete. But that will happen less and less in the future. That doesn't disprove my point, it only proves there's no such thing as 100% future-proof. But we're getting closer.
No added CSS - Default styles
Of course, it's not really possible to make a site with only HTML and absolutely no CSS because browsers implement default styles. We could use CSS to reset everything, but then we would have used CSS. But that's mainly the point - the fact that HTML elements have default styles that match their semantics. Consequently, if you want to truly master CSS it's important to know the nature of the elements you're using. That will save you using CSS-resets such as *{margin:0;padding:0;box-sizing:border-box;}. Whoever does that is working against the raw materials rather than with them. All the styles on this page - italic, bold, font-size, underline, monospace - are achieved by using the correct HTML element.
Further reading
If you find this topic interesting, you might also like this comparison of Tailwind and semantic CSS or you might like my demo page listing every HTML element.
Page last updated: .