css only

Having developed my very first website in 1996, I think it’s finally time for a change. For at least 23 years I have been using HTML, CSS, and JavaScript to build my websites, one of them has got to go. Of all 3, it feels like HTML is always stuck in the past. CSS and JavaScript have always been developing at a much faster pace. Perhaps it is time to let CSS take over HTML?

In CSS We Trust

CSS has the clever ability to inject content into elements using the “::before” and “::after” pseudo-elements. They allow us to inject content into an element’s rendered view, and that’s our loophole. Let’s look at the following code:

body::before {
  content: "Hello, World!";
}

This bit of CSS will add “Hello, World!” at the beginning of the body tag’s content. Suddenly, our stylesheet is suddenly dictating the page’s contents.

Going Down the Rabbit Hole

Let’s take this idea one step further. What if we structure our HTML with a series of nested divs, each with a unique ID or class. Then, we can use CSS to fill those divs with our content.

HTML:

<div id="title"></div>
<div id="intro"></div>
<div id="main-content"></div>
<div id="footer"></div>

CSS:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 20px;
}

#title::before {
  content: "Welcome to my CSS powered website!";
  font-size: 2em;
  color: #0066CC;
}

#intro::before {
  content: "CSS rules the world!";
  font-size: 1.5em;
  color: #009966;
}

#main-content::before {
  content: "Minimal HTML has been used, but we didn't enjoy using it.";
  font-size: 1.2em;
  color: #666666;
}

#footer::before {
  content: "Thanks for checking us out!";
  font-size: 1em;
  color: #999999;
}

Preview: <img src=“ //media.kidsil.net /{{ page.date | date: “%Y” }}/{{ page.date | date: “%m” }}/mostly-css.png” />

Voila! You now have a webpage, technically, entirely powered by CSS. Note the italics on ’technically’, as we still have some HTML we haven’t gotten rid of just yet.

Pure CSS!

Let’s take this one step further and see if we can use CSS with only the obligatory tag:

<html>
  <body></body>
</html>

html {
  padding: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

html::before {
  content: "Welcome to my CSS powered website!";
  font-size: 2em;
  color: #0066CC;
}

body::before {
  content: "CSS rules the world!\A";
  white-space: pre;
  font-size: 1.5em;
  color: #009966;
}

body::after {
  content: "Minimal HTML has been used, but we didn't enjoy using it.";
  font-size: 1.2em;
  color: #666666;
}

html::after {
  content: "Thanks for checking us out!";
  font-size: 1em;
  color: #999999;
}

Preview: <img src=“ //media.kidsil.net /{{ page.date | date: “%Y” }}/{{ page.date | date: “%m” }}/only-css.png” />

Goodbye HTML!

We can now say goodbye and good riddance to HTML! From now on, all a front-end web developer would need to know is CSS and JavaScript in a perfect balance of style and logic.

For those who have followed this far and haven’t realized it yet - the content above is meant to be humorous. With a bit of luck it made some of my readers chuckle.

Let’s keep CSS to what it does best: Styling websites and making them look awesome. HTML will always be a fundamental building block for the web.