Complete CSS Properties Reference
This reference contains a comprehensive list of the most used CSS properties, organized by function to help you quickly find the right property for styling your site.
Colors and Backgrounds
| Property | Description |
|---|---|
color |
Sets the text color inside the element. |
background-color |
Sets the background color of the element. |
background-image |
Sets an image as the element background. |
background-size |
Controls the size of the background image (e.g., cover, contain). |
background-repeat |
Determines whether the background image repeats. |
opacity |
Sets the element opacity (from 0 to 1). |
Text and Fonts
| Property | Description |
|---|---|
font-family |
Sets the font family used for text. |
font-size |
Sets the font size (px, rem, em, etc.). |
font-weight |
Sets the font weight (e.g., bold, normal). |
text-align |
Sets text alignment (e.g., center, right, left). |
text-decoration |
Adds decoration to text (like underline or removing it with none). |
line-height |
Sets the spacing between lines. |
letter-spacing |
Sets the spacing between letters. |
Box Model
| Property | Description |
|---|---|
width / height |
Sets the element width and height. |
padding |
Sets inner spacing between content and border. |
margin |
Sets outer spacing between the element and others. |
border |
Sets the border thickness, style, and color. |
border-radius |
Creates rounded corners. |
box-shadow |
Adds a shadow around the element box. |
box-sizing |
Defines how width and height are calculated (usually border-box). |
Layout and Positioning
| Property | Description |
|---|---|
display |
Sets the display type (e.g., block, inline, flex, grid, none). |
position |
Sets the positioning method (e.g., relative, absolute, fixed, sticky). |
top, right, bottom, left |
Offsets a positioned element. |
z-index |
Controls stacking order of overlapping elements. |
overflow |
Defines what happens to content that overflows the element. |
float |
Floats an element left or right (somewhat legacy). |
Flexbox
| Property | Description |
|---|---|
flex-direction |
Sets the direction of items inside a flex container (e.g., row, column). |
justify-content |
Aligns items along the main axis. |
align-items |
Aligns items along the cross axis. |
flex-wrap |
Controls whether items wrap to a new line. |
gap |
Sets spacing between items inside the container. |