CSS Property List Categorized by Usage

1. Commonly Used for Div Styling

CSS Property Behavior

width Defines the width of a div.

height Defines the height of a div.

background-color Sets the background color of the div.

margin Sets the space outside of the div.

padding Sets the space inside the div between the content and its border.

border Adds a border around the div.

display Specifies how the div is displayed (e.g., block, inline-block).

position Specifies how the div is positioned (relative, absolute, fixed, etc.).

z-index Specifies the stack order of the div when overlapping with other elements.

float Makes the div float to the left or right within its container.

box-shadow Adds shadow effects around the div.

overflow Controls how content is handled when it exceeds the div's dimensions (hid

2. Commonly Used for Text Styling

CSS Property Behavior

color Sets the text color.

font-size Specifies the size of the text.

font-family Defines the font style for the text.

line-height Sets the height between lines of text.

font-weight Specifies the thickness of the font (normal, bold, etc.).

text-align Specifies the horizontal alignment of the text (left, right, center).

text-decoration Adds decoration to text (underline, overline, etc.).

letter-spacing Defines the spacing between characters.

text-transform Converts text to uppercase, lowercase, or capitalize.

word-spacing Sets the space between words.

3. Commonly Used for Table Styling

CSS Property Behavior

border-collapse Specifies whether the borders of the table and cells are collapsed into a sin

border-spacing Specifies the space between the borders of adjacent cells.

text-align Specifies horizontal alignment of text in table cells.

vertical-align Specifies the vertical alignment of content in a cell.

padding Adds space inside table cells between content and cell borders.

background-color Sets background color for the table or individual cells.

border Sets borders for the table, rows, or individual cells.

width Defines the width of the table.

height Defines the height of the table.

caption-side Specifies the position of the table caption (top or bottom).

table-layout Defines the layout algorithm for the table (auto, fixed).

4. Commonly Used for Layout and Positioning

CSS Property Behavior

display Controls how an element is displayed (block, inline, flex, grid).

position Specifies how an element is positioned (relative, absolute, fixed, sticky).

float Allows elements to float left or right.

clear Specifies if an element should clear floating elements.

flex Defines a flexible layout structure for parent containers and child items.

grid Specifies a grid-based layout system.

align-items Aligns flex/grid items along the cross axis.

justify-content Aligns flex/grid items along the main axis.

z-index Controls the stacking order of overlapping elements.

5. Commonly Used for Image and Media Styling

 CSS Property Behavior

width Sets the width of the image or media.

height Sets the height of the image or media.

object-fit Specifies how the image should fit within its container (contain, cover).

border-radius Rounds the corners of the image.

box-shadow Adds shadow effects to the image or media.

opacity Defines the transparency level of the image or media.

filter Adds visual effects like blur, brightness, contrast, etc., to images.

float Makes the image float to the left or right.

margin Adds space around the image or media.

position Allows the image to be positioned relatively or absolutely within its containe