Search notes:

CSS

Rulesets, selectors, declarations, properties and property values

Declaration

A declaration consists of a property (name) and the assigned property value.
The property value follows the property name and is separated by a colon from it: 
position: absolute
Multiple declarations are separated by a semicolon (;) from each other: 
position: absolute; font-family: monospace; …

Selector

A selector selects the (HTML) elements for which a list of declarations applies.
The list of declarations is embedded in curly braces.
So called pseudo selectors (such as ::first-letter) allow to select portions of the document that don't correspond to an element.

Ruleset

A ruleset assigns a list of declarations to a selector.
The following snippet shows a ruleset.
div is the selector.
The text between { and } are the declarations: 
div {
   position   : absolute;
   font-family: monospace;
   …
}
Sometimes, a ruleset is referred to simply as a rule.

Rendering content

CSS specify how structured document (i. e. HTML elements in a DOM) should be rendered on various output devices such as screen, print etc.

Canvas

The space on which the content is rendered is referred to as canvas.
The size of the canvas is infinite in each direction.
Space must not only be thought of as euclidean (thik aural user agents).

Viewport

In case of visual canvases, the visible part of the canvas is limited by the viewport which is the window that the browser (UA) offers to look upon the canvas.
Usually, if the viewport is smaller than the size required by elements on the canvas, the viewport is decorated with scrollbars that allow to move the canvas in order to see different parts.
However, elements whose position attribute is set to fixed are fixed in respect to the viewport. So, they stay at the same place if the scroll bars are used to move the canvas.

Specification

The CSS specification is maintained by the W3C.

CSS Level 1, 2, 3, …

CSS Level 1 was the first published CSS specification (December 1996).
This Level is considered obsolete.
CSS Level 2 (published May 1998) is a revision of CSS Level 1 that addressed issues that were not covered in CSS Level 1
Both, CSS Level 1 and Level 2, fit into a single document.
Because of its many problems, the errata list of CSS Level 2 was not updated any further, instead, CSS2.1 was started working on.
For Level 3 and beyond, it was decided to publish the standard in multiple modules to make the entire process more manageable.
There is no CSS Level 3 or even CSS Level 4, rather, each module goes through Levels.

Interfaces and Mixins

Some interfaces (APIs) that CSS specifies include
Some mixins include
These interfaces and mixins are defined in CSSOM.

Misc

CSS properties
Internal vs external CSS
Line breaking and its prevention.
Selector
CSS Snippets
Dynamically change a CSS style with javascript
Creating responsive tables with CSS.

TODO

Functions

Some functions are:
  • attr()
  • calc()
  • color() (see also the @color-profile at-rule)
  • cubig-bezier()
  • drop-shadow()
  • element()
  • Color related: rgb(), rgba(), hsl() and hsla()
  • image()
  • opacity()
  • perspective()
  • rect()
  • url()
Filter related functions
  • blur()
  • brightness()
  • contract()
  • grayscale()
  • invert()
  • hue-rotate()
  • saturate()
  • sepia()
  • matrix()
  • matrix3d()
  • rotate()
  • rotate3d()
  • rotateX()
  • rotateY()
  • rotateZ()
  • scale()
  • scaleY()
  • scaleZ()
  • skew()
  • skewX()

At-rules

Some @-rules are
@charset Specifies the character encoding for the style sheet and is especially useful when using non-ASCII characters in properties like content. If used, it must be the first element in a style sheet.
@color-profile Defines a color profile which can then be referred to using the color() function.
@container Apply styles to certain containers: @container (width > 768px) { font-size: … }. Compare with @media.
@counter-style See also <li> elements and the list-style-* properties.
@document Deprecated
@font-face Specifies a custom font
@font-feature-values
@import Imports style rules from other stylesheets. Must be specified as the first at-rule after the optional @charset rule. Note that @import url("path/to.css") is equivalent to @import "path/to.css".
@keyframes Allows to control a transition sequence more precisely than using the transition-* properties.
@layer Defines a cascade layer.
@media Apply portions a style sheet based on the result of (one or more) media queries. In JavaScript, the rules that were created with @media can be accessed with the CSSMediaRule interface. @container rules are an alternative to @media rules.
@namespace Defines XML namespaces for a style sheet.
@page Modifies properties of a printed page
@property An experimental at-rule which allows to define custome CSS properties. @property is part of the CSS Houdini umbrella of APIs.
@supports Uses a feature query so that certain CSS declarations are only applied if a browser supports a given set of CSS features.
@media (prefers-color-scheme: light) { body { background-color: #f1f1f1; color: #151515; }}
@media (prefers-color-scheme: dark ) { body { background-color: #151515; color: #f1f1f1; }}

@font-face {
   font-family :'qualita rossa';
   font-style  : normal;
   font-weight : 400;
   font-stretch: 100%;

   src: url(https://fonts.server.xyz/….woff2)
        format('woff2');
   unicode-range: U+1F00-1FFF;
}

@font-face {
   font-family: "foo bar baz font";
      src: url("/res/foo-bar-baz.woff2") format("woff2"),
           url("/res/foo-bar-baz.woff" ) format("woff" )
         ;
}

@font-face {
   font-family: "fonty new 7";
   src: local("…"),
        url("fonty-new-7.otf"),
   format("opentype")
   tech(color-COLRv1)
   …
}

@mixin

@mixin is a Sass «extension».

Data types

Textual

initial The value specified as the property's initial value.
inherit The computed value of the property on the element's parent.
revert Rolls back the cascade to the value of the earlier origin.
unset Acts as inherit or initial depending on whether the property is inherited or not.
Pre-defined keywords For example: collapse (which can be applied to border-collapse)
<custom-ident>
<dashed-ident>
<string>
url()

Numeric

<integer> 42, 999 …
<number> 42, 2.5, 1.618 …
<dimension> A number with a unit (23px or 15em). See the quantity data types.
<percentage> For example 10%
<ratio> <number> / <number>
<flex> A flexible length introduced for CSS Grid Layout, written as a <number> with the fr unit attached and used for grid track sizing.

Quantities

Used for distances etc.
<length> Lengths are a <dimension> and refer to distances.
<angle> Angles are used in properties such as linear-gradient() and are a <dimension> with one of deg, grad, rad or turn units attached.
<time> Duration units are a <dimension> with an s or ms unit.
<frequency> Frequencies are a <dimension> with a Hz or kHz unit attached.
<resolution> Is a <dimension> with a unit identifier of dpi, dpcm, dppx or x.
Combinations
<length-percentage> Length or a percentage as a value.
<frequency-percentage> A frequency or a percentage as a value.
<angle-percentage> An angle or a percentage as a value.
<time-percentage> A time or a percentage as a value.

Colors

<color> Specified as a keyword or a numerical color value.
<alpha-value> Specifies the transparency of a color. May be a <number>, in which case 0 is fully transparent and 1 is fully opaque, or a <percentage>, in which case 0% is fully transparent and 100% fully opaque.
<hue> Specifies the <angle>, with a unit identifier of deg, grad, rad, turn or unitless <number> interpreted as deg, of the color wheel specific to the <absolute-color-functions> of which it is a component.

Images

<image> A URL reference to an image or a color gradient.
<color-stop-list> A list of two or more color stops with optional transition information using a color hint.
<linear-color-stop> A <color> and a <length-percentage> to indicate the color stop for this part of the gradient.
<linear-color-hint> A <length-percentage> to indicate how the color interpolates.
<ending-shape> Used for radial gradients; can have a keyword value of circle or ellipse.
<size> Determines the size of the radial gradient's ending shape. This accepts a value of a keyword or a <length> but not a percentage.

2D positioning

<position> Defines the position of an object area. Accepts a keyword value such as top or left, or a <length-percentage>.

Calculation data types

Used for math functions.
<calc-sum> A calculation which is a sequence of calculation values interspersed with addition (+) and substraction (-) operators. This data type requires both values to have units.
<calc-product> A calculation which is a sequence of calculation values interspersed with multiplication (*) and division (/) operators. When multiplying, one value must be unitless. When dividing, the second value must be unitless.
<calc-value> Defines accepted values for calculations, values such as <number>, <dimension>, <percentage>, <calc-constant> or nested <calc-sum> calculations.
<calc-constant> Defines a number of CSS keywords representing numeric constants such as e and π, that can be used in CSS math functions.

Units

Absolute lengths

Most absolute length units are useful for printing.
The only exception is px.
But even so, absolute lenght units can be expressed in terms of px and vice versa.
px Pixel
cm Centimeter. 1cm = 37.8px
mm Millimeter
Q Quarter millimeter
in Inch. 1in = 96px
pc Pica. a ⅙ of an inch.
pt Point. 1/72th of an inch

Relative lengths

vw 1% of the viewport's width.
vh 1% of the viewport's height.
vmin 1% of the viewport's smaller dimension.
vmax 1% of the viewport's larger dimension.
vb 1% of the size of the initial containing block in the direction of the root element's block axis.
vi 1% of the size of the initial containing block in the direction of the root element's inline axis.
svw, svh 1% of the small viewport's width and height, respectively.
lvw, lvh 1% of the large viewport's width and height, respectively.
dvw, dvh 1% of the dynamic viewport's width and height, respectively.
Relative length units based on a font
em In case of typographical properties like font-size: font size of the parent. In case of other properties like width: font size of the element itself.
ex x-height of the element's font.
ch The advance measure (width) of the glyph "0" of the element's font.
lh Line height of the element.
cap The nominal height of capital letters («cap height»)
ic Advance measure of the 水 glyph (U+6C34)
These units can be prefixed with an r so that they refer to the corresponding size of the root element's font (em -> rem, ex -> rex etc.)

Container query lengths

cqw, cqh Percentage of the query container's widht/height (1cqw is 1% of the query container's width)
cqi Percentage of the inline size of the query container
cqb Percentage of the block size of the query container
cqmin, cqmax Percentage of the smaller/larger value o f the query container's inline size or block size.

?

fr Fraction of the leftover space in a grid container. Used to indicate the <flex> datatype.

Starting a CSS

Is it good practice to start a CSS with something like 
* {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
}

See also

web
Using window.getComputedStyle to query the CSS values of an HTML element with JavaScript.
The HTML <style> tag.
Replaced elements
Color names
CSS is part of the Web platform.

Index