CSS Cheat Sheet

Posted on by 
margin: top right bottom left;
border: 1px dashed red;

CSS Flexbox

A Flexbox is a div with display: flex. The following properties exist to influence the layout.
Marked by ** are the default values:

  • flex-direction (*row*, column, row-reverse, column-reverse)
  • flex-wrap (*nowrap*, wrap, wrap-reverse)
  • flex-flow = combi of flex-direction and flex-wrap, e.g. flex-flow: row wrap
  • justify-content (center, *flex-start*, flex-end, space-around, space-between, space-evenly)
  • align-items (center, flex-start, flex-end, *stretch* = *normal*, baseline, )
  • align-content (center, *stretch*, flex-start, flex-end, space-around, space-between, space-evenly)

Details and lots of examples about Flexbox can be found here..

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.