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.

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:

1
2
3
4
5

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

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

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

    

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

Back Consult the Reference