CSS Properties Reference — Modern Styling Elements | HTMLSave

Guide to CSS Properties

Well-structured CSS is the foundation of every modern web design. This curated CSS properties reference provides detailed guides for the most essential styling properties. Whether you need layout properties, typography controls, or visual effects, you'll find them categorized here with full usage guides.

Layout

The display property specifies the display behavior (the type of rendering box) of an element and its children.

The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

The gap property sets the gaps (gutters) between rows and columns in flexbox, CSS grid, and multi-column layouts.

The z-index property sets the stack order of a positioned element and its descendants.

The overflow property sets the desired behavior for content overflow of a block container element.

Flexbox

The flex-direction property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

justify-content

The justify-content property defines how the browser distributes space between and around content items along the main axis of a flex or grid container.

The align-items property sets the align-self value on all direct children as a group along the cross axis of a flex or grid container.

Grid

grid-template-columns

The grid-template-columns property defines the line names and track sizing functions of CSS grid columns.

Box Model

The margin shorthand property sets the margin area on all four sides of an element outside its border.

The padding shorthand property sets the padding area on all four sides of an element inside its border.

The border shorthand property sets an element’s border width, style, and color in a single declaration.

The box-sizing property sets how the total width and height of an element are calculated (including or excluding padding and border).

Typography

The color property sets the foreground color value of an element’s text content and text decorations.

The font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

The font-size property sets the size of the text font.

The font-weight property sets the weight (or boldness) of the font.

Background

background-color

The background-color property sets the background color of an element.

Visual

The border-radius property rounds the corners of an element outer border edge.

The box-shadow property adds shadow effects around an element frame.

The opacity property sets the opacity level of an element (including its children).

Animation

The transition shorthand property allows you to define the transition between two states of an element.

The transform property lets you modify the coordinate space of the CSS visual formatting model (translate, rotate, scale, skew).