Utility elements and classes

Current <nav> item

Add the aria-current state to the a element to highlight it as the active navigation item.

<nav>
  <ul>
    <li><a aria-current="page" href="#">Nav item</a></li>
  </ul>
</nav>

If you prefer, you can also use aria-current="true". The .current class is also available on the a element, but aria-current is better in terms of accessibility.

Button

Add the button class to the a element to make it look like a button instead of a link.

<a class="button" href="#">Click me</a>

Notice

Add the notice class to the p element to create a notice box, similar to the one on the Simple.css homepage.

<p class="notice">Important information</p>

Horizontal scroller

Wrap elements with a figure element to prevent tables and other fixed-width elements from overflowing their parent container.

<figure>

<table>
...
</table>

</figure>