new.css takes advantage of semantic HTML elements. Here are some guidelines on how these should be used for the best results.

Table of Contents


Use the <header> tag to create a large header for your page. Only use this at the very top of your <body>!


For a link button, wrap the button in an <a> tag. For example-

<a href="">
  <button>Click me!</button>


Use <code> for short inline code.

Use <pre> for code blocks.

These two shouldn't be nested, but if they are, the child element will clear it's own style and match the parent.

Use <kbd> for keyboard input. For example, ALT + F4


The <details> element can make a toggle-able dropdown without any JavaScript. Here's an example-

Click me!

Lorem ipsum dolor sit amet.

Here's the code-

  <summary>Click me!</summary>
  <p>Lorem ipsum dolor sit amet.</p>


Wrap all body text in <p> tags, unless it's the sole child of another element. Here are examples-

  Hello, world!
  <p>Hello, world!</p>
  <button>Click me!</button>
  <li>Hello, world!</li>
    <p>Line 1</p>
    <img src="">