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

oklch() Examples: oklch(0.7 0.1 84)

  • Define lightness, chroma, hue (improved version of lch())
  • Lightness is perceived: it's consistent if chroma and hue change
  • Better to create themes and palette

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

Blend modes ​

Use mix-blend-mode to create superposition images effects.

Examples

  • difference value can be used to dynamically change text's color when it appears on same-color background.

Typography ​

font-variant-numeric can be used to display changing text while keeping horizontal consistency and alignment. Typically used with none monotype fonts to keep the same width between digits. ""

Read more in this article

Animations ​

Transitions ​

Sometime, element don't proprely animate when there's transition, especially when switching from discrete values (e.g. display: none → block). Two useful properties can be used as workaround:

  • transition-behavior: when set to allow-discrete, coordinates when to switch value according to other none-discrete properties
  • @starting-style: determine what the style of the element should be when animation start
css
/* Example with a pop-up using the dialog element */
dialog {
  transition:
    opacity 0.3s,
    display 0.3s allow-discrete;
}

dialog:open {
  opacity: 1;
  @starting-style { opacity: 0; }
}

Live démo

NOTE

Unfortunately, as 25/08/2026, it works only for entering/opening animation with <dialog>

Shapes ​

shape-outside: adjacent inline content (e.g. text) will wrap around the shape (usually none-square shape, like a round object or transparent image). A margin can be defined with shape-margin.

corner-shape: specify the shape of the corners. Typically useful for incurved corners.

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 ​