CSS Properties

Cheat Sheet

Prepared by Mella Academy

Box Model
- `width`: Specifies the width of an element's content area.

- `height`: Specifies the height of an element's content area.

- `margin`: Sets the margin space on all four sides of an element.

- `margin-top`, `margin-right`, `margin-bottom`, `margin-left`: Sets the margin space on individual sides of an element.

- `padding`: Sets the padding space on all four sides of an element.

- `padding-top`, `padding-right`, `padding-bottom`, `padding-left`: Sets the padding space on individual sides of an element.

- `border`: Sets the properties for all four sides of an element's border.

- `border-top`, `border-right`, `border-bottom`, `border-left`: Sets the properties for individual sides of an element's border.

- `border-width`: Sets the width of an element's border.

- `border-style`: Sets the style of an element's border (e.g., solid, dashed).

- `border-color`: Sets the color of an element's border.

Box Model
- `border-radius`: Defines the radius of the corners of an element's border box.

- `box-sizing`: Specifies how the total width and height of an element is calculated.
Positioning
- `position`: Specifies the positioning method of an element.

- `top`, `right`, `bottom`, `left`: Sets the position of a positioned element.

- `float`: Places an element on the left or right side of its container, allowing text and
inline elements to wrap around it.

- `clear`: Specifies whether an element should be moved below floating elements.

- `overflow`: Specifies what should happen if content overflows an element's box.

- `clip`: Clips an absolutely positioned element.

- `z-index`: Sets the stack order of a positioned element.

Typography
- `font`: Shorthand for setting multiple font properties.

- `font-family`: Specifies the font family for text.

- `font-size`: Specifies the font size for text.

- `font-weight`: Specifies the weight (boldness) of text.

- `font-style`: Specifies the style (normal, italic, oblique) of text.

- `line-height`: Sets the height of a line of text.

- `letter-spacing`: Sets the spacing between characters in text.

- `word-spacing`: Sets the spacing between words in text.

- `text-align`: Specifies the horizontal alignment of text.

- `text-decoration`: Specifies the decoration added to text.

- `text-transform`: Controls the capitalization of text.

- `white-space`: Specifies how white space inside an element is handled.

Backgrounds and Borders
- `background`: Shorthand for setting all background properties.
- `background-color`: Specifies the background color of an element.
- `background-image`: Specifies one or more background images for an element.
- `background-repeat`: Specifies how background images are repeated.
- `background-position`: Specifies the starting position of a background image.
- `background-size`: Specifies the size of the background images.
- `border-collapse`: Specifies whether table borders should be collapsed into a single border or not.
- `border-spacing`: Specifies the distance between the borders of adjacent cells in a table.
- `border-top`, `border-right`, `border-bottom`, `border-left`: Shorthand for setting border properties individually.
- `outline`: Shorthand for setting outline properties.
- `outline-color`: Sets the color of an outline.
- `outline-style`: Sets the style of an outline.
- `outline-width`: Sets the width of an outline.
Colors
- `color`: Specifies the text color.

- `opacity`: Sets the opacity level for an element.

Lists
- `list-style`: Shorthand for setting all list style properties.

- `list-style-type`: Specifies the marker style for list items.

- `list-style-position`: Specifies the position of the marker box in a list item.

- `list-style-image`: Specifies an image to use as the marker for list items

Miscellaneous
- `cursor`: Specifies the type of cursor to be displayed when hovering over an element.

- `content`: Inserts generated content before or after an element's content.

- `quotes`: Specifies the type of quotation marks for embedded quotations.

- `counter-reset`: Resets one or more counters to a specified value.

- `counter-increment`: Increments one or more counters by a specified value.

- `resize`: Specifies whether an element is resizable by the user.

- `user-select`: Specifies whether the user can select text.

- `pointer-events`: Specifies whether an element should react to pointer events.

- `caret-color`: Sets the color of the text cursor (caret) in input elements.
Transformations
- `transform`: Applies 2D or 3D transformations to an element.

- `transform-origin`: Sets the origin point of transformations applied to an element.

- `transform-style`: Specifies how nested elements are rendered in 3D space.

- `perspective`: Sets the depth of the 3D space for an element.

- `perspective-origin`: Sets the origin for the perspective property.

Layout
- `display`: Specifies the display behavior of an element (e.g., block, inline, flex).

- `visibility`: Specifies the visibility of an element.

- `opacity`: Sets the opacity level of an element.

- `flex`: Shorthand for setting flexible layout properties.

- `flex-direction`: Specifies the direction of flex items in a flex container.

- `flex-wrap`: Specifies whether flex items should wrap if they overflow the container.

- `flex-flow`: Shorthand for setting flex-direction and flex-wrap properties.

- `justify-content`: Aligns flex items along the main axis of a flex container.

- `align-items`: Aligns flex items along the cross axis of a flex container.

- `align-content`: Aligns a flex container's lines within the flex container when there is extra space
Layout
`order`: Specifies the order of a flex item relative to the other flex items in the container.

- `columns`: Shorthand for setting column-width and column-count properties.

- `column-count`: Specifies the number of columns an element should be divided into.

- `column-fill`: Specifies how to fill columns with content.

- `column-gap`: Sets the gap between columns.

- `column-rule`: Shorthand for setting column-rule-width, column-rule-style, and column-rule-color properties.

- `column-span`: Specifies whether an element should span across all columns.

- `column-width`: Specifies the width of columns.