margin: top right bottom left;
border: 1px dashed red;
Some important css functions
||A complete guide to calc().
|clamp(min, val, max)
||Clamps a value between a max and a min. E.g. clamp(10px, 5vw, 2px) == 5vw as long as 5vw is between min and max.
|max(a, b, …)
||Mathematical maximum of a set of values.
|min(a, b, …)
||Mathematical minimum of a set of values.
||Gets the value of a predefied css variable called –name.
||Trigonometrical functions sin, cos, tan, asin, acos, atan, atan2 are not yet available in Feb 2022.
||Not yet available in Feb 2022.
||A complete guide to css functions.
These are the most important selectors. There are many more, though.
||elements with class=”intro”
||elements with both na and me set within its class attribute
||input elements that are descendants of an element with
||elements of class
.me inside elements of class
||the element with id=”firstname”
|div > p
where the parent is a
|p ~ ul
elem that is preceded by a
||all elems with a
||all elems with
elems whose href attribute value begins with “https”
elems whose href attribute value contains the substring “w3s”
CSS Length Units
|| Not pixels on screen, but an angular measurement. Defined as 1px = 0.0213 degrees or 1.278 minutes of arc. So one pixel should seem the same size on all devices.
||Not a real centimeter, but defined as 1cm = 37.8px or 1px ≈ 0.265mm. On desktop screens really ≈ 1cm.
||1mm = 3.78px. On desktop screens, this is really ≈ 1mm.
||1in = 96px by definition, on desktop screens ≈ 2.54cm.
||Originally from typography, the width of a M. In css 1em = font-size, independent of font-family. Em-sizes multiply, so if an element with font-size 1.1em is within an element with font-size 1.2em within yet another element with font-size 1.3em, the resulting size is 1.1×1.2×1.3 == 1.761rem (root em).
||Like em, but always relative to the root element. No multiplying. Much better than em.
||1pt = 1/72in ≈ 0.353mm
||1pc = 12pt = 4.24mm ≈ the size of well readable script.
||Height of character x of current font. Depends on font-family and font-size.
||Similar to ex: width of char 0 (zero) of the current font.
||100vh = full height of viewport.
||100vw = full width of viewport.
|| Based on the length of the same property of the parent element. E.g. if an element renders at 450px width, a child element with a width set to 50% will render at 225px
||Mainly for grids. Similar to % but takes into account gaps. Instead of using 50% 25% 25% you can use 2fr 1fr 1fr in the grid-template-columns tag.
- The position relatvive propertiy only moves the item, but not its bounding box.
- The css grid does not work in IE like everywhere else. Here some workaround.