JS-in-CSS

Intro

calc-size(intrinsic, size)

CSS is awesome

Stylesheet editor

Editing CSS

CSS custom properties: variables

Reload page when done.
CSS custom properties

if(): conditional statements

CSS if() function

HTML for :target deck

This deck also has no JS
<article id="slideID">
  <header>
    <h1>Page title</h1>
  </header>
  <figure>
    Contents of page (often an <object>)
  </figure>
</article>
<a href="#slideID">
  <span>Accessible name for current slide</span>
</a>
HTML for deck

CSS for :target slides

CSS of deck explained

CSS for :target buttons

CSS of deck buttons explained

The actual <style>

Slide deck's actual CSS

The counter

Slide deck's counter Outro Resources