Work in progress

# Beyond the Basics

## Critical Concepts

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

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

### 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}\ast 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

``````
opacity: 0;
visibility: hidden;
}

opacity: 1;
visibility: visible;
}
```
```