# Start

Source: https://iriscss.com/documentation/overview/start/

Link one stylesheet and write plain HTML.

## Starter template

Once Iris CSS is [installed](https://iriscss.com/documentation/overview/installation/index.html.md), this is all a page needs.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="css/iris.min.css">
    <title>Hello Iris!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello Iris!</h1>
    </main>
  </body>
</html>
```

## Key ideas

- **Classless first**: Forms, buttons, tables, cards, modals and navigation are styled from plain HTML.
- **Optional classes with no prefix**: Short modifiers like `.primary`, `.outlined` or `.large` work on most elements.
- **HTML and ARIA attributes**: `aria-busy="true"` shows a spinner, `aria-invalid="true"` marks a field with an error, `data-tooltip` adds a tooltip.
- **Light and dark mode**: Every color is a `light-dark()` pair. Iris follows the system setting, and `data-theme="light"` or `data-theme="dark"` forces a scheme on the page or on any element.
- **Your CSS wins**: Every Iris rule sits in a cascade layer, so your own styles override Iris without specificity tricks or `!important`.
- **Customize with variables**: Every value comes from a `--i-` custom property. Override it on `:root` to change it everywhere, or on one element to change it locally.

## Try it

Everything below is plain HTML with no classes.

```html
<article>
  <h3>Subscribe</h3>
  <form>
    <label>Name <input type="text" placeholder="Ada Lovelace"></label>
    <label><input type="checkbox" role="switch" checked> Weekly digest</label>
    <button type="submit">Subscribe</button>
  </form>
</article>
```

## Next steps

- [Classless HTML](https://iriscss.com/documentation/overview/classless-html/index.html.md) shows what plain markup looks like.
- [Colors](https://iriscss.com/documentation/modifiers/colors/index.html.md) and [sizes](https://iriscss.com/documentation/modifiers/sizes/index.html.md) cover the classes you will use most.
- [CSS variables](https://iriscss.com/documentation/customize/css-variables/index.html.md) and [themes](https://iriscss.com/documentation/customize/themes/index.html.md) explain how to make it your own.