Work in progress

Beyond the Basics

Critical Concepts

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

Cascade
Inheritance
Specificity
Box Model

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

Variables

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);
      }

Calculations

      
        .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 = \frac{v}{100} * x + r

x — current viewport width value (px).
y — resulting fluid font size for a current viewport width value x (px).
v — viewport width value that affects fluid value change rate (vw).
r — relative size equal to browser font size. Default value is 16px.

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;
      }

Counters

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.

Footnotes

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

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

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 caniuse.com