Language cheatsheet

CSS 3 Cheatsheet

Layout with flexbox and grid, responsive design, custom properties, animations and modern selectors.

Selectors and the box model

Include padding in element widths — Make width mean the full box. A common global reset.
Common selectors — Select by element, class, id, child, descendant and attribute.
Style states — Style hover, keyboard focus and the first and last items.
Add generated content — Insert content before an element with no extra HTML.
Select a parent by its children — Style a card that contains an image.
Define and use variables — Define a value once and reuse it. Change it in one place or per theme.
Nest rules — Write child rules inside the parent, as in a preprocessor. Supported natively in current browsers.
Control rule priority with layers — Order groups of styles so later layers win, regardless of specificity.

Center something — Center a child horizontally and vertically.
Lay out items in a row with spacing — Place children side by side with a gap between them.
Push items to the edges — Put the first item at the start and the last at the end.
Wrap onto new lines — Let items flow to the next line when there is no room.
Make one item fill the space — Let an item take all remaining space.
Stack items vertically — Switch the main axis to vertical.
Keep the footer at the bottom — Make the page at least as tall as the screen, with the main area filling the space.

Make equal columns — Three equal-width columns with a gap.
Make a responsive grid without media queries — Fit as many columns of at least 250px as the width allows.
Name layout areas — Describe the page layout with named areas.
Span multiple columns — Make an item cover two columns.
Center with grid — The shortest way to center a single child.

Change styles by screen width — Apply styles when the screen is at least 768px wide. Writing mobile styles first and adding queries for larger screens keeps CSS simple.
Scale a size fluidly — Keep a font size between a minimum and maximum, growing with the viewport.
Respond to the container's size — Style a component according to the space it has, not the screen.
Support dark mode — Follow the user's operating system setting.
Respect reduced motion — Turn off animations for people who ask for less movement.
Make images scale — Never overflow the container, and keep the proportions.
Keep a shape — Hold a 16:9 ratio, for example for a video container.

Stick an element while scrolling — Keep a header at the top while its container scrolls.
Cover the parent — Stretch an absolutely positioned child over its positioned parent.
Crop an image to fit its box — Fill a box with an image without distorting it.
Truncate text with an ellipsis — Cut off long single-line text with three dots.
Limit text to a number of lines — Show at most three lines, then an ellipsis.
Animate a change smoothly — Fade the background when the user hovers.
Create an animation — Define keyframes and apply them.
Snap to items while scrolling — Make a horizontal carousel stop at each item.
Hide text visually but keep it for screen readers — Hide an element from view but keep it available to assistive technology.
Style keyboard focus — Show a clear outline only when navigating with the keyboard.

C++ 23 cheatsheet — Compile and debug C++ with g++ and CMake, and use modern C++ (up to C++23): containers, algorithms, smart pointers, templates and threads.
C# 14 cheatsheet — Modern C# 14 syntax for strings, nullability, collections, LINQ, records, pattern matching, async code and generics.
Go 1 cheatsheet — The go command for modules, building, testing and cross-compiling, plus the code patterns you write every day.
HTML 5 cheatsheet — HTML5 page structure, text, links, images, forms, tables and metadata, with accessible patterns.
Java, Maven and Gradle 25 cheatsheet — JDK commands to compile, run and diagnose Java programs, plus the Maven and Gradle commands for builds and tests.
JavaScript 2025 cheatsheet — Modern JavaScript for arrays, strings, objects, async code, the DOM and modules, in copy-ready snippets.