You don't need HTML

Let's code a webpage using only CSS.

January 31, 2016 • 2 min read

As opposed to what might sometimes be believed, CSS turns out to be powerful. Today’s challenge is to write a web page only using CSS (or, at least, the less HTML possible).

Check 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 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 in an element. As 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 will need to use ::before or ::after. They create a pseudo-element which is the first child of the element matched. We can’t write text in the element itself, but 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 to specify 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 in the page, without any HTML. We can now add a second content 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 the heading of an article. If you want to impress your mates, tell them to look at the source code! Check the demo.