> For the complete documentation index, see [llms.txt](https://dailyjournal.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dailyjournal.gitbook.io/notes/languages/html-css-js/css.md).

# CSS

Cascading Style Sheets

{% embed url="<https://web.dev/learn/css/>" %}

{% embed url="<https://necolas.github.io/normalize.css/>" %}

* [**Reset CSS**](https://meyerweb.com/eric/tools/css/reset/): CSS resets aim to remove all built-in browser styling. For example, all elements' margins, paddings, and font sizes are reset to be the same.&#x20;
* [**Normalize CSS**](https://github.com/necolas/normalize.css/): Normalize CSS aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies.

## CSS preprocessors

A **CSS preprocessor** is a program that lets you generate CSS from the preprocessor's own unique syntax.

There are many CSS preprocessors to choose from, however, most CSS preprocessors will add some features that don't exist in pure CSS, such as **mixin**, **nesting selector**, **inheritance selector**, and so on. These features make the CSS structure more readable and easier to maintain.

A few of most popular CSS preprocessors:

| [Sass](https://sass-lang.com/) | [LESS](https://lesscss.org/) | [Stylus](https://stylus-lang.com/) | [PostCSS](https://postcss.org/) |
| :----------------------------: | :--------------------------: | :--------------------------------: | :-----------------------------: |

#### Resources

{% embed url="<http://www.flexboxdefense.com/>" %}

{% embed url="<https://flexboxfroggy.com/>" %}

{% embed url="<https://knightsoftheflexboxtable.com/>" %}

{% embed url="<https://codingfantasy.com/games/flexboxadventure/play>" %}

{% embed url="<https://mastery.games/flexboxzombies/>" %}

{% embed url="<https://cssgridgarden.com/>" %}

{% embed url="<https://codingfantasy.com/games/css-grid-attack/play>" %}

{% embed url="<https://flukeout.github.io/>" %}

{% embed url="<https://www.guess-css.app/>" %}

{% embed url="<https://css-speedrun.netlify.app/>" %}

{% embed url="<https://cssbattle.dev/>" %}

{% embed url="<https://100dayscss.com/>" %}

{% embed url="<https://css-challenges.com/>" %}

{% embed url="<https://stateofcss.com/en-us/>" %}