Work in progress

Beyond the Basics

Critical Concepts

Finishing this tutorial, you should understand four critical concepts in CSS:

  1. Cascade
  2. Inheritance
  3. Specificity
  4. Box Model

If you understand these four major concepts, then you will be able to understand most CSS.


Using the root element selector, you can define global variables in your CSS:

:root { --primary-color: rgb(125, 125, 125); --secondary-color: rgb(175, 175, 175); }


        .spectrum {
          background-color: rgb(calc(var(--intensity) * 51), 0, 0);
          text-align: center;
          width: 20%;
        .flex {
          display: flex;

Results in creating a band of colors:


Responsive Design

Media Queries

Clamping Width

img { width: clamp(300px, 50%, 800px); min preferred max }

Thinking about clamping width to meet design standards, such as the infamous 45-75 character width for single column text.

        p {
          width: clamp(45ch, 50%, 75ch);

Fluid Typography

You can read a library of articles online about different approaches to fluid typography. This approach is intended to let you use your new found powers with clamp() to very rapidly make an HTML document have fluid typography, without explaining or getting deeply into the underlying math.

Imagine a formula for font-size:

font-size: clamp([min]rem, [v]vw + [r]rem, [max]rem);

Where the variables are represented by:

y = v 100 x + r

This formula was sourced from Modern Fluid Typrography Using CSS Clamp by Adrian Bece. You can also use Adrian's Modern fluid typrography editor.

Here are two different examples using clamp() to try:

font-size: clamp(100%, 1rem + 2vw, 24px);
font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);

Try each of these out and see how you can replace media queries to make your typography fluid.

Aspect Ratio

Specifying the aspect ratio of a piece of media (image, video): img { width: 100%; aspect-ratio: 4/3; }


If you find yourself writing a list of footnotes manually in your HTML, you may be forced to re-write all the numbers whenever you insert a new footnote in the middle. Consider using CSS counters to generate these numbered footnotes instead!

  :root {
    counter-reset: footnotes;

  sup {
    counter-increment: footnotes;
  sup::after {
    content: counter(footnotes);

The counter() CSS function returns a string representing the current value of the named counter.

The counter-increment CSS property increases or decreases the value of a CSS counter by a given value.

The counter-reset CSS property resets a CSS counter to a given value.


  1. Counter
  2. Counter Increment
  3. Counter Reset

Focus Within

  .example-menu {
    opacity: 0;
    visibility: hidden;

  button:focus-within .example-menu {
    opacity: 1;
    visibility: visible;


The new :has() function

For now, read more about this with Jen Simmons excellent introductory article. This section will be expanded upon in the future.


Sass is a style sheet preprocessor, which means it expands CSS syntax and then interprets your Sass files and preprocesses them into fully expressed CSS, which a browser can use. This adds a build step to your CSS.

Sass - Syntactically awesome style sheets


PostCSS is a tool that automatically adds different browser vendor prefixes to your CSS using JavaScript.

PostCSS - add vendor prefixes to CSS rules using values from

Back Consult the Reference