# CSS 3

### CSS 3

This is a cheat sheet for CSS goodness, listing selector syntax, properties, units and other useful bits of information.

### Getting Started <a href="#getting-started" id="getting-started"></a>

#### Introduction <a href="#introduction" id="introduction"></a>

CSS is rich in capabilities and is more than simply laying out pages.

**External stylesheet**

```
<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css">
```

**Internal stylesheet**

```
<style>
body {
    background-color: linen;
}
</style>
```

**Inline styles**

```
<h2 style="text-align: center;">Centered text</h2>

<p style="color: blue; font-size: 18px;">Blue, 18-point text</p>
```

#### Add class <a href="#add-class" id="add-class"></a>

```
<div class="classname"></div>
<div class="class1 ... classn"></div>
```

Support multiple classes on one element.

#### !important <a href="#important" id="important"></a>

```
.post-title {
    color: blue !important;
}
```

Overrides all previous styling rules.

#### Selector <a href="#selector" id="selector"></a>

```
h1 { } 
#job-title { }
div.hero { }
div > p { }
```

See: [Selectors](#css-selectors)

#### Text color <a href="#text-color" id="text-color"></a>

```
color: #2a2aff;
color: green;
color: rgb(34, 12, 64, 0.6);
color: hsla(30 100% 50% / 0.6);
```

See: [Colors](#css-colors)

#### Background <a href="#background" id="background"></a>

```
background-color: blue;
background-image: url("nyan-cat.gif");
background-image: url("../image.png");
```

See: [Backgrounds](#css-backgrounds)

#### Font <a href="#font" id="font"></a>

```
.page-title {
    font-weight: bold;
    font-size: 30px;
    font-family: "Courier New";
}
```

See: [Fonts](#css-fonts)

Position

```
.box {
    position: relative;
    top: 20px;
    left: 20px;
}
```

See also: [Position](https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/)

#### Animation <a href="#animation" id="animation"></a>

```

animation: 300ms linear 0s infinite;

animation: bounce 300ms linear infinite;

```

See: [Animation](#css-animation)

```

/* This is a single line comment */

/* This is a 
   multi-line comment */
```

#### Flex layout <a href="#flex-layout" id="flex-layout"></a>

```
div {
    display: flex;
    justify-content: center;
}
div {
    display: flex;
    justify-content: flex-start;
}
```

See: [Flexbox](#css-flexbox) | [Flex Tricks](#css-flexbox-tricks)

#### Grid layout <a href="#grid-layout" id="grid-layout"></a>

```
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}
```

See: [Grid Layout](#css-grid-layout)

#### Variable & Counter <a href="#variable-counter" id="variable-counter"></a>

```
counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;

:root {
  --bg-color: brown;
}
element {
  background-color: var(--bg-color);
}
```

See: [Dynamic content](#css-dynamic-content)

### CSS Selectors <a href="#css-selectors" id="css-selectors"></a>

#### Examples <a href="#examples" id="examples"></a>

**Groups Selector**

```
h1, h2 {
    color: red;
}
```

**Chaining Selector**

```
h3.section-heading {
    color: blue;
}
```

**Attribute Selector**

```
div[attribute="SomeValue"] {
    background-color: red;
}
```

**First Child Selector**

```
p:first-child {
    font-weight: bold;
}
```

**No Children Selector**

```
.box:empty {
  background: lime;
  height: 80px;
  width: 80px;
}
```

#### Basic <a href="#basic" id="basic"></a>

|              |                             |
| ------------ | --------------------------- |
| `*`          | All elements                |
| `div`        | All div tags                |
| `.classname` | All elements with class     |
| `#idname`    | Element with ID             |
| `div,p`      | All divs and paragraphs     |
| `#idname *`  | All elements inside #idname |

See also: [Type](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) / [Class](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) / [ID](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) / [Universal](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) selectors

#### Combinators <a href="#combinators" id="combinators"></a>

| Selector        | Description                                         |
| --------------- | --------------------------------------------------- |
| `div.classname` | Div with certain classname                          |
| `div#idname`    | Div with certain ID                                 |
| `div p`         | Paragraphs inside divs                              |
| `div > p`       | <p>All p tags<br><em>one level deep in div</em></p> |
| `div + p`       | P tags immediately after div                        |
| `div ~ p`       | P tags preceded by div                              |

See also: [Adjacent](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) / [Sibling](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) / [Child](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) selectors

#### Attribute selectors <a href="#attribute-selectors" id="attribute-selectors"></a>

|                      |                         |
| -------------------- | ----------------------- |
| `a[target]`          | With a target attribute |
| `a[target="_blank"]` | Open in new tab         |
| `a[href^="/index"]`  | Starts with /index      |
| `[class\|="chair"]`  | Starts with chair       |
| `[class*="chair"]`   | containing chair        |
| `[title~="chair"]`   | Contains the word chair |
| `a[href$=".doc"]`    | Ends with .doc          |
| `[type="button"]`    | Specified type          |

See also: [Attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)

#### User action pseudo classes <a href="#user-action-pseudo-classes" id="user-action-pseudo-classes"></a>

|             |                         |
| ----------- | ----------------------- |
| `a:link`    | Link in normal state    |
| `a:active`  | Link in clicked state   |
| `a:hover`   | Link with mouse over it |
| `a:visited` | Visited link            |

Pseudo classes

|                   |                                                                                         |
| ----------------- | --------------------------------------------------------------------------------------- |
| `p::after`        | Add content after p                                                                     |
| `p::before`       | Add content before p                                                                    |
| `p::first-letter` | First letter in p                                                                       |
| `p::first-line`   | First line in p                                                                         |
| `::selection`     | Selected by user                                                                        |
| `::placeholder`   | [Placeholder](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder) attribute |
| `:root`           | Documents root element                                                                  |
| `:target`         | Highlight active anchor                                                                 |
| `div:empty`       | Element with no children                                                                |
| `p:lang(en)`      | P with en language attribute                                                            |
| `:not(span)`      | Element that's not a span                                                               |

#### Input pseudo classes <a href="#input-pseudo-classes" id="input-pseudo-classes"></a>

|                       |                                                                                             |
| --------------------- | ------------------------------------------------------------------------------------------- |
| `input:checked`       | Checked inputs                                                                              |
| `input:disabled`      | Disabled inputs                                                                             |
| `input:enabled`       | Enabled inputs                                                                              |
| `input:focus`         | Input has focus                                                                             |
| `input:in-range`      | Value in range                                                                              |
| `input:out-of-range`  | Input value out of range                                                                    |
| `input:valid`         | Input with valid value                                                                      |
| `input:invalid`       | Input with invalid value                                                                    |
| `input:optional`      | No required attribute                                                                       |
| `input:required`      | Input with required attribute                                                               |
| `input:read-only`     | With readonly attribute                                                                     |
| `input:read-write`    | No readonly attribute                                                                       |
| `input:indeterminate` | With [indeterminate](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate) state |

#### Structural pseudo classes <a href="#structural-pseudo-classes" id="structural-pseudo-classes"></a>

|                         |                            |
| ----------------------- | -------------------------- |
| `p:first-child`         | First child                |
| `p:last-child`          | Last child                 |
| `p:first-of-type`       | First of some type         |
| `p:last-of-type`        | Last of some type          |
| `p:nth-child(2)`        | Second child of its parent |
| `p:nth-child(3n42)`     | Nth-child (an + b) formula |
| `p:nth-last-child(2)`   | Second child from behind   |
| `p:nth-of-type(2)`      | Second p of its parent     |
| `p:nth-last-of-type(2)` | ...from behind             |
| `p:only-of-type`        | Unique of its parent       |
| `p:only-child`          | Only child of its parent   |

### CSS Fonts <a href="#css-fonts" id="css-fonts"></a>

#### Properties <a href="#properties" id="properties"></a>

| Property           | Description                             |
| ------------------ | --------------------------------------- |
| `font-family:`     | \<font>                                 |
| `font-size:`       | \<size>                                 |
| `letter-spacing:`  | \<size>                                 |
| `line-height:`     | \<number>                               |
| `font-weight:`     | \<number> / bold / normal               |
| `font-style:`      | italic / normal                         |
| `text-decoration:` | underline / none                        |
| `text-align:`      | <p>left / right<br>center / justify</p> |
| `text-transform:`  | capitalize / uppercase / lowercase      |

See also: [Font](https://developer.mozilla.org/en-US/docs/Web/CSS/font)

#### Shorthand <a href="#shorthand" id="shorthand"></a>

|         | style    | weight | size (required) |     | line-height | family            |
| ------- | -------- | ------ | --------------- | --- | ----------- | ----------------- |
| `font:` | `italic` | `400`  | `14px`          | `/` | `1.5`       | `sans-serif`      |
|         | style    | weight | size (required) |     | line-height | family (required) |

#### Example <a href="#example" id="example"></a>

```
font-family: Arial, sans-serif;
font-size: 12pt;
letter-spacing: 0.02em;
```

#### Case <a href="#case" id="case"></a>

```

/* Hello */
text-transform: capitalize;

/* HELLO */
text-transform: uppercase;

/* hello */
text-transform: lowercase;
```

#### @font-face <a href="#font-face" id="font-face"></a>

```
@font-face {
    font-family: 'Glegoo';
    src: url('../Glegoo.woff');
}
```

### CSS Colors <a href="#css-colors" id="css-colors"></a>

#### Named color <a href="#named-color" id="named-color"></a>

```
color: red;
color: orange;
color: tan;
color: rebeccapurple;
```

#### Hexadecimal color <a href="#hexadecimal-color" id="hexadecimal-color"></a>

```
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
```

#### rgb() Colors <a href="#rgb-colors" id="rgb-colors"></a>

```
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);
```

#### HSL Colors <a href="#hsl-colors" id="hsl-colors"></a>

```
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
```

#### Other <a href="#other" id="other"></a>

```
color: inherit;
color: initial;
color: unset;
color: transparent;

color: currentcolor; /* keyword */
```

### CSS Backgrounds <a href="#css-backgrounds" id="css-backgrounds"></a>

#### Properties <a href="#properties-2" id="properties-2"></a>

| Property                 | Description                                                                             |
| ------------------------ | --------------------------------------------------------------------------------------- |
| `background:`            | *(Shorthand)*                                                                           |
| `background-color:`      | See: [Colors](https://nvb99.gitbook.io/me/cheat-sheet/web-development/broken-reference) |
| `background-image:`      | url(...)                                                                                |
| `background-position:`   | <p>left/center/right<br>top/center/bottom</p>                                           |
| `background-size:`       | cover X Y                                                                               |
| `background-clip:`       | <p>border-box<br>padding-box<br>content-box</p>                                         |
| `background-repeat:`     | <p>no-repeat<br>repeat-x<br>repeat-y</p>                                                |
| `background-attachment:` | scroll/fixed/local                                                                      |

#### Shorthand <a href="#shorthand-2" id="shorthand-2"></a>

|               | color  | image        | positionX | positionY |     | size           | repeat      | attachment |
| ------------- | ------ | ------------ | --------- | --------- | --- | -------------- | ----------- | ---------- |
| `background:` | `#ff0` | `url(a.jpg)` | `left`    | `top`     | `/` | `100px` `auto` | `no-repeat` | `fixed;`   |
| `background:` | `#abc` | `url(b.png)` | `center`  | `center`  | `/` | `cover`        | `repeat-x`  | `local;`   |
|               | color  | image        | posX      | posY      |     | size           | repeat      | attach..   |

#### Examples <a href="#examples-2" id="examples-2"></a>

```
background: url(img_man.jpg) no-repeat center;

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(13,232,230,1) 35%, rgba(0,212,255,1) 100%);
```

### CSS The Box Model <a href="#css-the-box-model" id="css-the-box-model"></a>

#### Maximums/Minimums <a href="#maximums-minimums" id="maximums-minimums"></a>

#### Margin / Padding <a href="#margin-padding" id="margin-padding"></a>

```
.block-one {
    margin: 20px;
    padding: 10px;
}
```

See also: [Margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) / [Padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)

#### Box-sizing <a href="#box-sizing" id="box-sizing"></a>

```
.container {
    box-sizing: border-box;
}
```

See also: [Box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/Box-sizing)

#### Visibility <a href="#visibility" id="visibility"></a>

```
.invisible-elements {
    visibility: hidden;
}
```

See also: [Visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)

#### Auto keyword <a href="#auto-keyword" id="auto-keyword"></a>

```
div {
    margin: auto;
}
```

See also: [Margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)

#### Overflow <a href="#overflow" id="overflow"></a>

```
.small-block {
    overflow: scroll;
}
```

See also: [Overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)

### CSS Animation <a href="#css-animation" id="css-animation"></a>

#### Shorthand <a href="#shorthand-3" id="shorthand-3"></a>

|              | name     | duration | timing-function | delay   | count      | direction           | fill-mode | play-state |
| ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- | --------- | ---------- |
| `animation:` | `bounce` | `300ms`  | `linear`        | `100ms` | `infinite` | `alternate-reverse` | `both`    | `reverse`  |
|              | name     | duration | timing-function | delay   | count      | direction           | fill-mode | play-state |

#### Properties <a href="#properties-3" id="properties-3"></a>

| Property                     | Value                                                  |
| ---------------------------- | ------------------------------------------------------ |
| `animation:`                 | *(shorthand)*                                          |
| `animation-name:`            | \<name>                                                |
| `animation-duration:`        | \<time>ms                                              |
| `animation-timing-function:` | ease / linear / ease-in / ease-out / ease-in-out       |
| `animation-delay:`           | \<time>ms                                              |
| `animation-iteration-count:` | infinite / \<number>                                   |
| `animation-direction:`       | normal / reverse / alternate / alternate-reverse       |
| `animation-fill-mode:`       | none / forwards / backwards / both / initial / inherit |
| `animation-play-state:`      | normal / reverse / alternate / alternate-reverse       |

See also: [Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)

#### Example <a href="#example-2" id="example-2"></a>

```
/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

animation: 4s linear 0s infinite alternate move_eye;
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;
```

#### Javascript Event <a href="#javascript-event" id="javascript-event"></a>

```
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')
```

### CSS Flexbox <a href="#css-flexbox" id="css-flexbox"></a>

#### Simple example <a href="#simple-example" id="simple-example"></a>

```
.container {
  display: flex;
}
```

```
.container > div {
  flex: 1 1 auto;
}
```

#### Container <a href="#container" id="container"></a>

.container {

```
  display: flex;
  display: inline-flex;
```

```
  flex-direction: row;            /* ltr - default */
  flex-direction: row-reverse;    /* rtl */
  flex-direction: column;         /* top-bottom */
  flex-direction: column-reverse; /* bottom-top */
```

```
  flex-wrap: nowrap; /* one-line */
  flex-wrap: wrap;   /* multi-line */
```

```
  align-items: flex-start; /* vertical-align to top */
  align-items: flex-end;   /* vertical-align to bottom */
  align-items: center;     /* vertical-align to center */
  align-items: stretch;    /* same height on all (default) */
```

```
  justify-content: flex-start;    /* [xxx        ] */
  justify-content: center;        /* [    xxx    ] */
  justify-content: flex-end;      /* [        xxx] */
  justify-content: space-between; /* [x    x    x] */
  justify-content: space-around;  /* [ x   x   x ] */
  justify-content: space-evenly;  /* [  x  x  x  ] */
```

}

#### Child <a href="#child" id="child"></a>

.container > div {

```
  /* This: */
  flex: 1 0 auto;

  /* Is equivalent to this: */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
```

```
  order: 1;
```

```
  align-self: flex-start;  /* left */
  margin-left: auto;       /* right */
```

}

### CSS Flexbox Tricks <a href="#css-flexbox-tricks" id="css-flexbox-tricks"></a>

#### Vertical center <a href="#vertical-center" id="vertical-center"></a>

```
.container {
  display: flex;
}

.container > div {
  width: 100px;
  height: 100px;
  margin: auto;
}
```

#### Vertical center (2) <a href="#vertical-center-2" id="vertical-center-2"></a>

```
.container {
  display: flex;

  /* vertical */
  align-items: center; 

  /* horizontal */
  justify-content: center;
}
```

#### Reordering <a href="#reordering" id="reordering"></a>

```
.container > .top {
 order: 1;
}

.container > .bottom {
 order: 2;
}
```

#### Mobile layout <a href="#mobile-layout" id="mobile-layout"></a>

```
.container {
  display: flex;
  flex-direction: column;
}

.container > .top {
  flex: 0 0 100px;
}

.container > .content {
  flex: 1 0 auto;
}
```

A fixed-height top bar and a dynamic-height content area.

#### Table-like <a href="#table-like" id="table-like"></a>

```

.container {
  display: flex;
}


/* the 'px' values here are just suggested percentages */
.container > .checkbox { flex: 1 0 20px; }
.container > .subject  { flex: 1 0 400px; }
.container > .date     { flex: 1 0 120px; }
```

This creates columns that have different widths, but size accordingly according to the circumstances.

#### Vertical <a href="#vertical" id="vertical"></a>

```
.container {
  align-items: center;
}
```

Vertically-center all items.

#### Left and right <a href="#left-and-right" id="left-and-right"></a>

```
.menu > .left  { align-self: flex-start; }
.menu > .right { align-self: flex-end; }
```

### CSS Grid Layout <a href="#css-grid-layout" id="css-grid-layout"></a>

#### Grid Template Columns <a href="#grid-template-columns" id="grid-template-columns"></a>

```
#grid-container {
    display: grid;
    width: 100px;
    grid-template-columns: 20px 20% 60%;
}
```

#### fr Relative Unit <a href="#fr-relative-unit" id="fr-relative-unit"></a>

```
.grid {
    display: grid;
    width: 100px;
    grid-template-columns: 1fr 60px 1fr;
}

```

#### Grid Gap <a href="#grid-gap" id="grid-gap"></a>

```
/*The distance between rows is 20px*/
/*The distance between columns is 10px*/
#grid-container {
    display: grid;
    grid-gap: 20px 10px;
}
```

#### CSS Block Level Grid <a href="#css-block-level-grid" id="css-block-level-grid"></a>

```
#grid-container {
    display: block;
}
```

#### CSS grid-row <a href="#css-grid-row" id="css-grid-row"></a>

CSS syntax:

* grid-row: grid-row-start / grid-row-end;

**Example**

```
.item {
    grid-row: 1 / span 2;
}
```

#### CSS Inline Level Grid <a href="#css-inline-level-grid" id="css-inline-level-grid"></a>

```
#grid-container {
    display: inline-grid;
}
```

#### minmax() Function <a href="#minmax-function" id="minmax-function"></a>

```
.grid {
    display: grid;
    grid-template-columns: 100px minmax(100px, 500px) 100px; 
}

```

#### grid-row-start & grid-row-end <a href="#grid-row-start-grid-row-end" id="grid-row-start-grid-row-end"></a>

CSS syntax:

* grid-row-start: auto|row-line;<br>
* grid-row-end: auto|row-line|span n;

**Example**

```
grid-row-start: 2;
grid-row-end: span 2;
```

#### CSS grid-row-gap <a href="#css-grid-row-gap" id="css-grid-row-gap"></a>

```
grid-row-gap: length;
```

Any legal length value, like px or %. 0 is the default value

#### CSS grid-area <a href="#css-grid-area" id="css-grid-area"></a>

```
.item1 {
    grid-area: 2 / 1 / span 2 / span 3;
}
```

#### Justify Items <a href="#justify-items" id="justify-items"></a>

```
#container {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
}
```

#### CSS grid-template-areas <a href="#css-grid-template-areas" id="css-grid-template-areas"></a>

```
.item {
    grid-area: nav;
}
.grid-container {
    display: grid;
    grid-template-areas:
    'nav nav . .'
    'nav nav . .';
}
```

#### Justify Self <a href="#justify-self" id="justify-self"></a>

```
#grid-container {
    display: grid;
    justify-items: start;
}

.grid-items {
    justify-self: end;
}
```

The grid items are positioned to the right (end) of the row.

#### Align Items <a href="#align-items" id="align-items"></a>

```
#container {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
}
```

### CSS Dynamic Content <a href="#css-dynamic-content" id="css-dynamic-content"></a>

#### Variable <a href="#variable" id="variable"></a>

Define CSS Variable

```
:root {
  --first-color: #16f;
  --second-color: #ff7;
}
```

Variable Usage

```
#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

See also: [CSS Variable](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)

#### Counter <a href="#counter" id="counter"></a>

```
/* Set "my-counter" to 0 */
counter-set: my-counter;
```

```
/* Increment "my-counter" by 1 */
counter-increment: my-counter;
```

```
/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;
```

```
/* Reset "my-counter" to 0 */
counter-reset: my-counter;
```

See also: [Counter set](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set)

#### Using counters <a href="#using-counters" id="using-counters"></a>

```
body { counter-reset: section; }

h3::before {
  counter-increment: section; 
  content: "Section." counter(section);
}
```

```
ol {
  counter-reset: section;   
  list-marker-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " "; 
}
```

### Css 3 tricks <a href="#css-3-tricks" id="css-3-tricks"></a>

#### Scrollbar smooth <a href="#scrollbar-smooth" id="scrollbar-smooth"></a>

```
html {
    scroll-behavior: smooth;
}
```

### Also see <a href="#also-see" id="also-see"></a>

* [CSS selectors cheatsheet](https://frontend30.com/css-selectors-cheatsheet/) *(frontend30.com)*
* [MDN: Using CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
* [Ultimate flexbox cheatsheet](http://www.sketchingwithcss.com/samplechapter/cheatsheet.html)
* [GRID: A simple visual cheatsheet](http://grid.malven.co/)
* [CSS Tricks: A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
* [Browser support](https://caniuse.com/#feat=css-grid)