Skip to content
← Writing

You don't need HTML

Where's the source code? Mostly in the stylesheet.

· 2 min read

Contrary to what you might think, CSS can be surprisingly powerful. Today's challenge is to write a web page using only CSS, or at least as little HTML as possible.

Check out the demo.

Writing the HTML file

An HTML file is usually composed of a head (the container for metadata) and a body (the content of the page).

<!DOCTYPE html>
<html>
  <head>
    <title>My HTML page</title>
  </head>
  <body>
    <!-- Content -->
  </body>
</html>
Basic HTML template

In the HTML5 standard, the html, head, and body tags can be omitted. The browser adds these elements to the DOM when it loads the page.

If we go further, we could write a single line of code in our HTML template: the link to the CSS. It will be automatically added to the head on load.

<link rel="stylesheet" href="styles.css" />

Designing the page

Now, we need to fill the page. CSS offers a property called content to write inside an element. Since the body node is added to the DOM implicitly, we can style it even if it doesn't appear in the source code.

To use the content property, we need ::before or ::after. They create a pseudo-element that becomes the first child of the matched element. We can't write text in the element itself, only in its pseudo-elements.

body::before {
  content: 'My text';
}

To insert a new line in the content, we need to use the \a escape sequence and set the white-space property.

body::before {
  content: "You \a don't need \a HTML";
  white-space: pre; /* or pre-wrap */
}

We have our first content on the page, without any HTML. We can now add more with the ::after pseudo-element.

body::after {
  content: 'Written with CSS';
}

It's now up to you to design the page your way!

The result

I tried to design an article heading. If you want to impress your mates, tell them to look at the source code! Check out the demo.