# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nvb99.gitbook.io/me/cheat-sheet/web-development/css-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.