margin: top right bottom left;
border: 1px dashed red;
CSS Functions
Some important css functions
|
Description |
| calc(….) |
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. |
var(--name) |
Gets the value of a predefied css variable called --name. |
| Trigonometry |
Trigonometrical functions sin, cos, tan, asin, acos, atan, atan2 are not yet available in Feb 2022. |
| sqrt, pow |
Not yet available in Feb 2022. |
| All |
A complete guide to css functions. |
CSS Selectors
These are the most important selectors. There are many more, though.
| Example |
Example description |
| .intro |
elements with class=”intro” |
| .na.me |
elements with both na and me set within its class attribute |
| .name input |
input elements that are descendants of an element with name class |
| .na .me |
elements of class .me inside elements of class .na |
| #firstname |
the element with id=”firstname” |
| * |
all elements |
| p |
all <p> elems |
| div.intro |
Selects all <div> elems with class="intro" |
| div, p |
all <div> elems and all <p> elems |
| div p |
all <p> elems inside <div> elems |
| div > p |
all <p> where the parent is a <div> |
| p ~ ul |
every <ul> elem that is preceded by a <p> elem |
| [target] |
all elems with a target attribute |
| [target=_blank] |
all elems with target="_blank" |
| input[type=”checkbox”] |
all input elems with type="checkbox" |
| a[href^=”https”] |
<a> elems whose href attribute value begins with “https” |
| a[href*=”w3s”] |
<a> elems whose href attribute value contains the substring “w3s” |
CSS Length Units
| Unit |
Name |
Description |
| px |
pixel |
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. |
| cm |
centimeter |
Not a real centimeter, but defined as 1cm = 37.8px or 1px ≈ 0.265mm. On desktop screens really ≈ 1cm. |
| mm |
millimeter |
1mm = 3.78px. On desktop screens, this is really ≈ 1mm. |
| in |
inch |
1in = 96px by definition, on desktop screens ≈ 2.54cm. |
| em |
em |
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). |
| rem |
root em |
Like em, but always relative to the root element. No multiplying. Much better than em. |
| pt |
point |
1pt = 1/72in ≈ 0.353mm |
| pc |
pica |
1pc = 12pt = 4.24mm ≈ the size of well readable script. |
| ex |
ex |
Height of character x of current font. Depends on font-family and font-size. |
| ch |
ch |
Similar to ex: width of char 0 (zero) of the current font. |
| vh |
viewport height |
100vh = full height of viewport. |
| vw |
viewport width |
100vw = full width of viewport. |
| % |
percent |
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 |
| fr |
fraction |
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. |
CSS Positioning
| Name |
Description |
| static |
The default. Normal positioning, not affected by the top, bottom, left, and right properties. |
| relative |
Relative to its normal position. Only moves the item, *but not its bounding box.* |
| absolute |
Positions relative to an elements nearest *positioned* ancestor. However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. |
| fixed |
Relative to the viewport, which means it always stays in the same place even if the page is scrolled. |
| sticky |
It is positioned relative until a given offset position is met in the viewport – then it “sticks” in place (like position:fixed). |
More details on positioning by w3schools.
CSS Gotchas
- The position relative property only moves the item, but not its bounding box.
-
- The css grid does not work in IE like everywhere else. Here some workaround.
