# core CSS

posted on June 30, 2026 by Lee Cattarin

- software

What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few browser defaults for a more pleasant browsing experience without needing much if any visual testing.

Want to just see the final stylesheet? Skip to the end of the page.

## CSS resets

Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended Josh W. Comeau's CSS Reset, which looks largely very solid to me. However, if using that particular reset, I would not reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually.

## color

Complex color palettes are a no-go. But browser defaults are also pretty bad - stark black and white are really hard on sighted users' eyes. Dulling the black and white down to nearby grays helps a lot. And of course, we'll support light and dark modes.

    :root {
      color-scheme: light dark;

      --color-light: #ddd;
      --color-dark: #222;

      --color-bg: light-dark(var(--color-light), var(--color-dark));
      --color-text: light-dark(var(--color-dark), var(--color-light));
    }

    body {
      color: var(--color-text);
      background-color: var(--color-bg);
    }

### accents

To skip reading about accent colors, head right to focus indication.

If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. XKCD has a color sheet based on a wide survey that is potentially useful here. Validate that the color contrast is enough with a tool like WebAIM's Contrast Checker. You might color your headers and links.

If you're coloring links, it's worth considering browser defaults. Blue is unvisited, purple is visited, and red is inactive. Choosing a red or purple link color might confuse users. Blues are pretty safe. A green might be fun.

Being the person that I am, I'm picking a teal and a pink. XKCD labels these "dark teal" (contrast ratio of 7.11 against our gray-white) and "powder pink" (contrast ratio of 9.49 against our gray-black) respectively.

    :root {
      --color-teal: #014d4e;
      --color-pink: #ffb2d0;

      --color-accent: light-dark(var(--color-teal), var(--color-pink));
    }

    h1, h2, h3, h4, h5, h6,
    a {
      color: var(--color-accent);
    }

## focus indication

Focus indication is a visual change that occurs when something interactive on the screen (like a link) receives keyboard focus. Without it, sighted keyboard-only users can't tell where they are on the page. Conventionally, it's an outline. Read more about accessible focus indication.

I would recommend a smidge of padding (spacing inside the border or outline of an element) around your links to allow for more space between the letters and focus outline in order to help with legibility.

If you recolor your links as mentioned in the previous section, recolor your focus indication for cohesiveness! Additionally, if you overwrite the browser default focus outline in this way or any other, you might want to add a very small border radius to your links. I find that perfectly square corners are a bit of a harsh look, but I'll admit this one is kind of personal preference.

    a {
      padding: .1rem;
      border-radius: .05rem;
    }

    a:focus-visible {
      outline: solid var(--color-accent);
    }

## font

All-serif everything (a common browser default) is, uh, kinda ugly and overwhelming. Little tails on every letter are visual clutter, at least to my eyes. It feels outdated, like an old-timey newspaper. Picking serif for headers and sans-serif for body (or vice versa) can be a nice alternative. Plus, the contrast will help on lower-level headings... if you ever drill down to `h5`s or `h6`s anyway.

    body {
      font-family: sans-serif;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: serif;
    }

## margins

Margins create visual space around an element, and this whitespace helps significantly with focus. We're super super not going to reset the margins for everything. That puts us in design hell and becomes a very visually-oriented problem. Instead, we're just changing two things: the width of the body and where it sits on the page. Readers, particularly dyslexic readers, can more easily move to the next line when they are not trying to track back across the full width of the screen.

This margin rule defines a small amount of top/bottom space first (`1rem`), and then tells the page to make the left and right margins equal with `auto` - centering the body in the middle of the page. I'm also going to set a `max-width` to handle those mystical ultra-wide screens (never used one), and a couple of breakpoints for tablets and mobile.

    body {
      width: 65%;
      max-width: 1800px;
      margin: 1rem auto;
    }

    @media (max-width: 1050px) {
      body {
        width: 85%;
      }
    }

    @media (max-width: 650px) {
      body {
        width: 92%;
      }
    }

## links

One quick note about accessible links: they should be identifiable by a method other than color. Basically, don't turn off your underlines! Additionally, I would recommend against using underlines for emphasis elsewhere - use `<em>` or `<strong>` instead.

## images

As mentioned up top, this overlaps with the linked CSS Reset writeup.

By default, an image will be full size. If it's a large image, that can be even larger than the viewport. We'll give them a `max-width` and center them in case they are narrower than the body. `display: block` allows that centering to actually work.

    img, picture, video, canvas, svg {
    	display: block;
    	max-width: 100%;
    	margin: 0 auto;
    }

## headers, footers, navs

Let's talk the components that every page likely has - a header, a footer, and navs. I'm going to use a very simple design for our header - a skip link, an (optional) site title (the title could also be one of the nav links), and then an unordered list of links enclosed in a `nav` element. Like the following:

    <header>
      <a id="skip" href="#main">Skip to content</a>

      <h2><a href="/">This is my cool website</a></h2>

      <nav aria-label="main menu navigation">
      <ul>
        <li><a href="/header-nav-1/">Header nav item 1</a></li>
        <li><a href="/header-nav-2/">Header nav item 2</a></li>
        <li><a href="/header-nav-3/">Header nav item 3</a></li>
      </ul>
      </nav>
    </header>

and our footer will be similar:

    <footer>
      <nav aria-label="footer navigation">
        <ul>
          <li><a href="/footer-nav-1/">Footer nav item 1</a></li>
          <li><a href="/footer-nav-2/">Footer nav item 2</a></li>
        </ul>
      </nav>
    </footer>

### skip link

Let's handle the skip link first. Your skip link can be hard to style without visual feedback. Commonly, they start hidden and only appear when receiving keyboard focus. It's entirely reasonable, in my opinion, to leave it visible. I actually like this as a design choice, as it highlights the idea and hopefully purpose of a skip link to sighted readers. However, if you want to hide it, there's a lot (a lot) of ways to do so. Using `position: absolute`, `left`, and `top`, we can place the skip link outside of the page, then move it in when it receives focus. We'll also stick a background on there to prevent the text from overlaying our site title and becoming illegible.

    #skip {
      background-color: var(--color-bg);
      position: absolute;
      left: -999px;
      top: -999px;
    }

    #skip:focus-visible {
      left: 10%;
      top: 5%;
    }

### site title

I won't do much here, but I am going to remove the underline (which is the default for links). It's commonly understood that the site title (or sometimes just the word "home") links to the home page, and the underline is unnecessary visual clutter.

    header h2 {
      text-decoration: none;
    }

### flexbox navs

We're going to dip our toes into flexbox for this one - it allows us to make content fall neatly into rows or columns. It's pretty powerful, and can get pretty weird, but we'll keep it bare-bones.

By default, the unordered lists in the navs will display with each list item on a new line with a bullet point in front of the list item. Let's take up less space by putting them all on one line. I'm going to center the items, and I'm going to allow them to wrap onto a new line. I'm also taking the bullet points off of the list items and allowing for a bit of space between each item.

    nav ul {
      display: flex;
      justify-content: center;
      flex-flow: row wrap;
      list-style: none;
      gap: 1rem;
    }

### aria-current

Screen reader users get `aria-current` information, and it can be helpful to present it to sighted users as well. There are of course many ways to do this with color, but we'll avoid that. Let's add carets before and after the current page link to indicate this. We'll scope them only to the header and footer just in case we run across a weird case.

    header a[aria-current="page"]::before,
    footer a[aria-current="page"]::before {
      content: "> " / "";
    }

    header a[aria-current="page"]::after,
    footer a[aria-current="page"]::after {
      content: " <" / "";
    }

The content after the forward slash is what is conveyed to screen reader users. The carets are not useful from a screen reader perspective, so this excerpts them.

### separating header and footer from main

The header and footer can visually run into the main text area if there's not extra space or a border. We'll keep it simple with borders. If you're not using an accent color, use your text color instead.

    header {
      border-bottom: solid var(--color-accent);
    }

    footer {
      border-top: solid var(--color-accent);
    }

## print media

There's a couple straightforward additions we can make to handle printing the site cleanly and making best use of the physical paper space. Remove the header and footer, reset the width and colors to limit ink usage, and print link URLs after the link.

    @media print {
      header,
      footer,
      nav {
        display: none;
      }

      body {
        background-color: #fff;
        width: 95vw;
      }

      body,
      h1, h2, h3, h4, h5,
      a {
        color: #000;
      }

      a::after {
        content: " (" attr(href) ")";
      }
    }

## feedback

Did I make a mistake? Is there more I could add? Reach out!

## result

Here's our outcome.

    :root {
      color-scheme: light dark;

      --color-light: #ddd;
      --color-dark: #222;
      --color-teal: #014d4e;
      --color-pink: #ffb2d0;

      --color-bg: light-dark(var(--color-light), var(--color-dark));
      --color-text: light-dark(var(--color-dark), var(--color-light));
      --color-accent: light-dark(var(--color-teal), var(--color-pink));
    }

    body {
      color: var(--color-text);
      background-color: var(--color-bg);
      font-family: sans-serif;
      width: 65%;
      max-width: 1800px;
      margin: 1rem auto;
    }

    @media (max-width: 1100px) {
      body {
        width: 85%;
      }
    }

    @media (max-width: 650px) {
      body {
        width: 92%;
      }
    }

    /* Basic elements */
    h1, h2, h3, h4, h5, h6 {
      font-family: serif;
    }

    h1, h2, h3, h4, h5, h6,
    a {
      color: var(--color-accent);
    }

    a {
      padding: .1rem;
      border-radius: .05rem;
    }

    a:focus-visible {
      outline: solid var(--color-accent);
    }

    img, picture, video, canvas, svg {
      display: block;
      max-width: 100%;
      margin: 0 auto;
    }

    /* Header, footer, nav */
    header {
      border-bottom: solid var(--color-accent);
    }

    #skip {
      background-color: var(--color-bg);
      position: absolute;
      left: -999px;
      top: -999px;
    }

    #skip:focus-visible {
      left: 10%;
      top: 5%;
    }

    header a[aria-current="page"]::before,
    footer a[aria-current="page"]::before {
      content: "> " / "";
    }

    header a[aria-current="page"]::after,
    footer a[aria-current="page"]::after {
      content: " <" / "";
    }

    header h2 a {
      text-decoration: none;
    }

    nav ul {
      display: flex;
      justify-content: center;
      flex-flow: row wrap;
      list-style: none;
      gap: 1rem;
    }

    footer {
      border-top: solid var(--color-accent);
    }

    /* Print media */
    @media print {
      header,
      footer,
      nav {
        display: none;
      }

      body {
        background-color: #fff;
        width: 95vw;
      }

      body,
      h1, h2, h3, h4, h5,
      a {
        color: #000;
      }

      a::after {
        content: " (" attr(href) ")";
      }
    }

## related posts

1. ## intro to wireframing

   - software

2. ## backend accessibility

   - software

3. ## comparing text editors

   - software