Scribd
Upload
2 views

CSS Properties

Uploaded by

mabduselam346
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

CSS Properties

Uploaded by

mabduselam346
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

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.

You might also like