CSS References
This reference chapter compiles all the CSS selectors, properties, at-rules, functions, units, and color formats into one place. Use it as a quick lookup while building your projects.
Complete Selector Reference
| Selector | Example | Description |
|---|---|---|
.class | .intro | Selects all elements with class="intro" |
#id | #header | Selects the element with id="header" |
* | * | Universal selector — selects all elements |
element | p | Selects all <p> elements |
[attr] | [target] | Selects elements with a target attribute |
:pseudo | :hover | Pseudo-class selector |
::pseudo | ::before | Pseudo-element selector |
Combinators
| Combinator | Symbol | Example | Description |
|---|---|---|---|
| Descendant | space | div p | Selects all <p> inside <div> |
| Child | > | div > p | Direct child of <div> |
| Adjacent sibling | + | div + p | First <p> immediately after <div> |
| General sibling | ~ | div ~ p | All <p> siblings after <div> |
Pseudo-classes
:hover /* mouse over */
:focus /* element focused */
:active /* being clicked */
:visited /* visited link */
:link /* unvisited link */
:first-child /* first child of parent */
:last-child /* last child of parent */
:nth-child(n) /* nth child */
:nth-of-type(n)/* nth of its type */
:not(s) /* not matching selector */
:checked /* checked input */
:disabled /* disabled input */
:empty /* element with no children */
:root /* root element (html) */Pseudo-elements
::before /* insert content before element */
::after /* insert content after element */
::first-line /* style first line of text */
::first-letter /* style first letter */
::selection /* portion selected by user */
::placeholder /* input placeholder text */CSS At-rules
| At-rule | Purpose |
|---|---|
@media | Applies styles based on media queries (screen size, orientation, etc.) |
@keyframes | Defines animation keyframe sequences |
@font-face | Loads custom fonts |
@supports | Feature detection — applies styles if browser supports a property |
@import | Imports another stylesheet (use with caution — can slow rendering) |
@layer | Declares a cascade layer for controlling specificity order |
CSS Functions
url() /* load a resource (image, font, etc.) */
rgb() / rgba() /* RGB color values */
hsl() / hsla() /* HSL color values */
calc() /* mathematical calculation */
min() /* smallest value from a list */
max() /* largest value from a list */
clamp() /* clamp a value between min and max */
minmax() /* used in Grid for min/max track sizes */
repeat() /* repeat grid tracks */
var() /* reference a CSS custom property */
attr() /* use an HTML attribute value in CSS */Web Safe Fonts
font-family: Arial, Helvetica, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Courier New', Courier, monospace;
font-family: Georgia, 'Times New Roman', serif;
font-family: Verdana, Geneva, sans-serif;
font-family: 'Trebuchet MS', sans-serif;
font-family: Impact, Haettenschweiler, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;Animatable Properties
Most CSS properties that accept numeric values, colors, or transforms can be animated. Common examples:
opacity, color, background-color, transform
width, height, margin, padding, border
top, right, bottom, left
font-size, letter-spacing, line-height
box-shadow, text-shadow, filter
flex-grow, flex-shrink, gapCSS Units Table
| Unit | Type | Description |
|---|---|---|
px | Absolute | 1 pixel = 1/96th of 1 inch |
em | Relative | Relative to parent element's font-size |
rem | Relative | Relative to root element's font-size (html) |
% | Relative | Percentage of parent element |
vw | Viewport | 1% of viewport width |
vh | Viewport | 1% of viewport height |
fr | Fraction | Fraction of available space in Grid |
cm / mm / in | Absolute | Physical units (print stylesheets) |
PX to EM Converter
The formula is: target / parent = value. If the parent has a font-size of 16px (browser default) and you want 32px, then 32 / 16 = 2em. For rem, it's always relative to the root <html> element's font-size (typically 16px).
/* Assuming 16px base */
8px = 0.5rem
12px = 0.75rem
16px = 1rem
24px = 1.5rem
32px = 2rem
48px = 3rem
64px = 4remColor Formats
/* Named colors */
color: red;
color: crimson;
/* Hexadecimal */
color: #ff0000; /* 6-digit */
color: #f00; /* 3-digit shorthand */
color: #ff000080; /* 8-digit with alpha */
/* RGB / RGBA */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
/* HSL / HSLA */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);
/* Modern — OKLCH and LAB */
color: oklch(0.7, 0.2, 30);Default Browser Styles
Browsers apply default styles to HTML elements. For example, <body> has a default margin of 8px, headings have bold font-weight and specific font-sizes, and links are blue and underlined. CSS resets or Normalize.css are commonly used to create a consistent baseline across browsers.
/* Simple CSS reset */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}Browser Support Information
Always check Can I Use before using a cutting-edge CSS feature. Modern CSS features like Grid, Flexbox, custom properties, and clamp() have excellent browser support. Older features like border-image have more limited support. Vendor prefixes (-webkit-, -moz-) are rarely needed today but may appear in legacy codebases.
