CSS Documentation
Concise, example-driven CSS reference. Read the concept, see the code, then practice it in a Coddy journey.
Start a guided CSS journeyGetting Started
- Inline CSSInline CSS puts declarations straight on an element with the style attribute. Learn the syntax, when inline styles are the right call, how they win over stylesheets, and how they compare with internal and external CSS.
- External CSSExternal CSS lives in a .css file that every page links with <link rel="stylesheet">; internal CSS sits in a <style> element inside one page. Learn both, how file paths work, and which rule wins when they meet.
- CommentsCSS has one comment syntax, /* ... */, for single and multiple lines. Learn where comments can go, how to comment out a rule, and why // and nested comments silently break the next rule.
- !important!important makes a declaration win over normal declarations, whatever their specificity. Learn exactly what it beats, what beats it, how specificity works underneath, and the cleaner ways to win a style conflict.
- VariablesCSS variables (custom properties) store a value once and reuse it with var(). Learn how to declare them in :root, scope and override them, give fallbacks, switch themes with JavaScript, and avoid the invalid-value trap.
Selectors
- SelectorsA CSS selector picks the elements a rule styles. Learn every selector type, the four combinators (descendant, child, adjacent sibling, general sibling), attribute selectors, grouping, and test selectors live.
- Class SelectorThe class selector (.name) styles every element with that class; the ID selector (#name) styles the one element with that id. Learn the syntax, multiple and chained classes, class vs id, naming rules, and toggling classes with JavaScript.
- Pseudo-ClassesPseudo-classes select elements by position or state: :nth-child(), :first-child, :not(), :focus, :checked, :has() and more. Learn the syntax, the an+b formula with a live tester, and the difference between nth-child and nth-of-type.
- ::before and ::after::before and ::after insert generated content as the first and last child of an element, straight from CSS. Learn the content property, why an empty content is required, positioning them, attr() tooltips, counters, and where they do not work.
- HoverThe :hover pseudo-class styles an element while the pointer is over it. Learn hover effects for buttons and cards, smooth transitions, link colors with :link, :visited, :hover and :active in the right order, and hover on touch screens.
Box Model
- Box ModelEvery element is a box made of four layers: content, padding, border and margin. Learn how each layer adds to the size, how box-sizing: border-box changes the math, and see every layer measured live.
- PaddingPadding is the space inside an element, between its content and its border. Learn the padding shorthand with 1 to 4 values, the single-side properties, logical padding, percentages, and how padding changes an element's size.
- MarginMargin is the transparent space outside an element's border that pushes other elements away. Learn the margin shorthand, centering with margin: 0 auto, negative margins, margin auto in flexbox, and why vertical margins collapse.
- Margin vs PaddingPadding is space inside an element's border; margin is space outside it. See both on the same box, side by side and live, then learn which to use for backgrounds, click areas, spacing between elements, and centering.
- BorderThe border property draws a line around an element's padding. Learn the border shorthand, every border style, colors and single sides, rounded corners with border-radius, and how borders differ from outlines.
- Width and Heightwidth and height set the size of an element's box. Learn fixed and percentage sizes, why height: 100% often does nothing, min-height and max-width for flexible layouts, auto vs 100%, and the fit-content keywords.
Text and Fonts
- Font SizeThe font-size property sets how big text is. Learn the units it takes (px, rem, em, %, keywords, vw), how to change font size in HTML, why rem is the safe default, and how em sizes compound.
- Font WeightThe font-weight property makes text bold, light or anything between. Learn the numeric scale from 100 to 900, normal and bold, the relative bolder and lighter, and why a weight sometimes shows no change.
- Line Heightline-height sets the height of each line of text, and so the space between lines. Learn why a unitless number is the right default, how px, em and % values inherit differently, and good values for body text and headings.
- Text ColorThe <font color> tag is obsolete; text color in HTML is set with the CSS color property. Learn how to color a whole page, one word, a link or a heading, with named colors, hex and rgb, and how to keep text readable.
- UnderlineUnderline text with text-decoration, then control the line: its color, style, thickness and distance from the text. Also how to remove the underline from links, and when you should not.
- Text Shadowtext-shadow draws one or more shadows behind text. Learn the four values (x offset, y offset, blur, color), how to stack shadows for glow, outline and 3D effects, and how to use a shadow to keep text readable on busy backgrounds.
Colors and Backgrounds
- ColorsEvery way to write a color in CSS: named colors, hex codes, rgb() and rgba(), hsl(), transparency with an alpha channel, currentColor, and the newer oklch() and color-mix(). Each with a live example and a converter.
- Background Colorbackground-color fills an element's box with a color. Learn how to set the background color of a whole page, a div, a table row or one word, how transparency works, why bgcolor is obsolete, and how background-color differs from the background shorthand.
- Background Imagebackground-image puts an image or gradient behind an element's content. Learn url() and gradients, background-size (cover and contain), background-position, background-repeat, layering several backgrounds, and the background shorthand.
- GradientsCSS gradients are images the browser draws from colors. Learn radial-gradient (shape, size, position), linear-gradient (direction and angles), conic-gradient, color stops, hard stops for stripes, repeating gradients and gradient text.
- Box Shadowbox-shadow draws shadows around an element's box. Learn the five values (x, y, blur, spread, color), inset shadows, layering several shadows for realistic depth, focus rings made with spread, and the mistakes that make shadows look muddy.
Layout
- DisplayThe display property decides how an element takes part in layout. Learn block, inline and inline-block with measured side-by-side boxes, display none vs visibility hidden, and where flex, grid, flow-root and contents fit.
- Positionposition: absolute places an element at exact coordinates inside its nearest positioned ancestor. Learn how absolute works with position: relative, then fixed and sticky, the top/right/bottom/left and inset properties, and why sticky sometimes does not stick.
- Z-Indexz-index decides which overlapping element is drawn on top. Learn which elements it works on, how stacking contexts group elements so that z-index 9999 can still lose, what creates a stacking context, and how to fix z-index that does not work.
- Overflowoverflow decides what happens to content that does not fit its box: show it, cut it off, or add scrollbars. Learn visible, hidden, scroll, auto and clip, overflow-x and overflow-y, text ellipsis, and the side effects overflow has on layout.
- Float and Clearfloat pushes an element to one side and lets text wrap around it, the way magazines place photos. Learn float left, right and inline-start, clear, why a parent collapses around floats and how display: flow-root fixes it, and why floats are no longer used for page layout.
- Center a DivEvery way to center a div horizontally, vertically or both: flexbox, grid, margin auto, absolute position with transform, inset with margin auto, and align-content. Each one runs live and measures its own centering, with a table of when to use which.
- Center an ImageAn <img> is inline, so it centers like text: text-align: center on its parent. Or make it a block with margin: 0 auto, or center it with flexbox or grid, including vertically. Each method runs live and measures the result.
Flexbox and Grid
- FlexboxFlexbox lays items out in a row or a column and controls how they share space and line up. Learn display: flex, the main and cross axis, every container property, flex-grow, flex-shrink and flex-basis, with a live playground that measures where each item lands.
- Justify Contentjustify-content places flex items along the main axis and align-items places them along the cross axis. See every value side by side, measured, with a clickable alignment grid, align-self, and the reasons justify-content sometimes does nothing.
- Flex Wrapflex-wrap decides whether flex items squeeze onto one line or move to the next, and flex-direction decides whether they run in a row or a column. Learn both with live examples, the flex-flow shorthand, align-content, and a responsive card row with no media queries.
- Grid LayoutCSS grid lays out items in rows and columns at once. Learn display: grid, grid-template-columns, the fr unit, repeat() and minmax(), auto-fill vs auto-fit, placing items with grid-column, and grid-template-areas, with a live grid you edit and measure.
Responsive Design
- Media QueriesA media query applies CSS only when a condition is true, such as a minimum screen width, a dark color scheme or a mouse pointer. Learn the @media syntax, mobile-first breakpoints, the range syntax, prefers-color-scheme, matchMedia in JavaScript, and container queries.
- rem vs em vs pxrem is relative to the root font size, em to the current element's font size, px is fixed, and % depends on the property. See each unit measured in a nested demo, why em compounds, when to use which, and how vw, vh and dvh work.
- clamp()clamp(MIN, PREFERRED, MAX) returns the preferred value but never less than MIN or more than MAX. Learn how it makes font sizes and spacing fluid without media queries, how to calculate the middle value, and how min() and max() relate to it.
- calc()calc() lets you do math in CSS and mix units, such as 100% minus a fixed 200px sidebar. Learn the syntax rules (the spaces matter), calc() with CSS variables, common layouts it solves, and why an invalid calc() is silently ignored.
Transitions and Effects
- TransitionA CSS transition animates a property from its old value to its new one when it changes, for example on hover. Learn the transition shorthand, every timing function side by side, what can and cannot be transitioned, the height: auto workaround, and reduced motion.
- AnimationCSS animations move an element through the steps you define in @keyframes, on their own and as often as you like. Learn the @keyframes syntax, all eight animation properties, fill-mode and direction, loading indicators, pausing, and how to respect reduced motion.
- TransformThe transform property moves, scales, rotates and skews an element without changing the layout around it. Learn every transform function, why the order of functions matters, transform-origin, the separate translate, scale and rotate properties, and the translate(-50%, -50%) centering trick.
- RotateRotate an element with transform: rotate(45deg) or the newer rotate property. Learn angle units (deg, turn, rad), rotating around a corner with transform-origin, rotating text and icons, a spinning loader, and 3D rotation with rotateX and rotateY.
- Opacityopacity makes a whole element and everything inside it see-through, from 0 (invisible) to 1 (solid). Learn the values, why opacity fades the text too and how to make only the background transparent, opacity: 0 vs visibility vs display, and fading on hover.
- Blur and Filterfilter: blur(5px) blurs an element, and backdrop-filter: blur() blurs what is behind it. Learn every filter function (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) with live sliders, how to combine them, and the blur edge problem.
