Notebook

Appearance

CSS ​

CSS is a stylesheet language. It is basically the cosmetic layer of a web page (i.e. HTML).

Variables ​

CSS
:root {
  --main-color: blue;
}

body {
  color: var(--main-color);
}

@property can define variables with more precisions

Colors ​

Key terms ​

<named-color> Examples: red, green, blue

<hex-color> Examples: #FF0000, #008000, #0000FF

  • Some hex codes can be shorten: #FF000 → #F00

rgb() Examples: rgb(255,0,0), rgb(0,255,0), rgb(0,0,100%)

  • Values by Red-Green-Blue canals

hsl() Examples: hsl(0, 100%, 50%), hsl(120, 100%, 25%), hsl(240, 100%, 50%)

  • Values define respectively the hue, saturation and lightness
  • Use hsl(120, 100%, 25%, 0.6) to apply opacity (alpha canal). Also works with % value
  • deg and turn can be used for hue value, according to the color wheel

currentColor Example: color: red; border: 1px solid currentColor;

  • This special keyword can get the value defined in color

Other specifics terms

Read more

Relative colors ​

The relative color syntax allows a color to be defined relative to another color

css
#left-square  { background-color: red; }
#right-square { background-color: rgb(from red 200 g b); }
This is an example of a result using relative colors in CSS. There is 2 red squares. The first one is red. The second one is red with a darker tone, illustrating how it has been changed relatively to the first one.
  • Here, red, which value is rgb(255, 0, 0), has been defined as rgb(200, 0, 0). The second red square has a darker tone relative to the first one.
  • It's possible to use other color properties in the same fashion: color(), hsl(), etc.

Light-dark themes ​

You can usecolor-scheme and light-dark() to easily define light-dark color themes.

css
/* Use at property level */
:root {
  color-scheme: light dark;
  --color-background: light-dark(white, black);
}

/* Use at media query level */
@media (prefers-color-scheme: light) {
  body {
    color: black;
  }
}

INFO

You can switch between themes with @matchMedia

javascript
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { /* … */ }

// Watch for change
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

Read more: @matchMedia

Scroll ​

The scroll-snap properties allows to align ("snap") the scroll on certain elements within HTML containers.

css
.container {
    scroll-snap-type: y mandatory;
    scroll-padding: 50px;
    scroll-margin: 50px;
}

.container .section {
    scroll-snap-align: start;
}

Resources ​