new.css

Elements

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

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="https://example.com">
  <button>Click me!</button>
</a>

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-

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

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

<blockquote>
  Hello, world!
</blockquote>

<blockquote>
  <p>Hello, world!</p>
  <button>Click me!</button>
</blockquote>

<ul>
  <li>Hello, world!</li>
  <li>
    <p>Line 1</p>
    <img src="https://example.com/image.png">
  </li>
</ul>