| CSS margins, borders, etc | ||
| Property | Description | |
|---|---|---|
margin |
Specifies the outer space around an element. Can set values for
top, right, bottom, and left, or use
margin shorthand.
|
|
padding |
Specifies the inner space between an element's content and its
border. Can set individual values for top, right, bottom, and
left, or use padding shorthand.
|
|
border |
Specifies the border around an element. Includes properties like
border-width, border-style, and
border-color. border shorthand sets all
in one declaration.
|
|
width |
Specifies the width of an element, either in a specific unit
(e.g., px, %, em), or using
relative units.
|
|
height |
Specifies the height of an element, either in a specific unit
(e.g., px, %, em), or using
relative units.
|
|
float |
Specifies whether an element should float to the left or right of its container. Often used to wrap text around an element or create sidebars. | |
clear |
Used in conjunction with float, specifies whether an
element should clear floated elements, preventing text or content
from wrapping around it.
|
|
display |
Specifies how an element is displayed. Common values include
block, inline,
inline-block, and none.
|
|
position |
Specifies how an element is positioned in the document. Common
values are static, relative,
absolute, fixed, and
sticky.
|
|
top, right, bottom,
left
|
Specifies the offset from the nearest positioned ancestor or the
viewport (depending on position value). Works with
absolute, relative, and
fixed positioning.
|
|
z-index |
Specifies the stack order of an element, controlling which element appears in front of or behind others. | |
overflow |
Specifies how to handle content that exceeds the dimensions of its
container. Common values include visible,
hidden, scroll, and auto.
|
|
box-sizing |
Specifies how the total width and height of an element are
calculated: either including (border-box) or
excluding (content-box) padding and border.
|
|
| CSS Flex | ||
| Property | Description | |
|---|---|---|
display: flex |
Changes an element to a block-level container with flex items inside of it. | |
display: inline-flex |
Allows multiple flex containers to appear inline with each other. | |
justify-content |
Used to space items along the main axis. | |
align-items |
Used to space items along the cross axis. | |
flex-grow |
Specifies how much space (and in what proportions) flex items absorb along the main axis. | |
flex-shrink |
Specifies how much flex items shrink and in what proportions along the main axis. | |
flex-basis |
Specifies the initial size of an element styled with
flex-grow and/or flex-shrink.
|
|
flex |
Specifies flex-grow, flex-shrink, and
flex-basis in one declaration.
|
|
flex-wrap |
Specifies that elements should shift along the cross axis if the flex container is not large enough. | |
align-content |
Used to space rows along the cross axis. | |
flex-direction |
Specifies the main and cross axes. | |
flex-flow |
Specifies flex-wrap and
flex-direction in one declaration.
|
|
| Nested Flex Containers |
Flex containers can be nested inside of each other by declaring
display: flex or
display: inline-flex for children of flex containers.
|
|
| CSS Grid | ||
| Property | Description | |
|---|---|---|
display |
Specifies whether an element behaves as a grid container or inline grid container. | |
grid-template-columns |
Defines the number and size of columns in a grid container. | |
grid-template-rows |
Defines the number and size of rows in a grid container. | |
grid-template-areas |
Specifies named grid areas within the grid layout, allowing placement of items by name. | |
grid-template |
Shorthand for defining grid columns, rows, and areas in one declaration. | |
grid-column-gap |
Specifies the spacing between grid columns. | |
grid-row-gap |
Specifies the spacing between grid rows. | |
grid-gap |
Shorthand for setting both row and column gaps in the grid layout. | |
justify-items |
Aligns grid items along the row axis (horizontally) within their grid cells. | |
align-items |
Aligns grid items along the column axis (vertically) within their grid cells. | |
place-items |
Shorthand for setting both justify-items and
align-items in one declaration.
|
|
justify-content |
Aligns the grid as a whole along the row axis (horizontally) within the grid container. | |
align-content |
Aligns the grid as a whole along the column axis (vertically) within the grid container. | |
place-content |
Shorthand for setting both justify-content and
align-content in one declaration.
|
|
grid-auto-columns |
Defines the width of implicitly created columns. | |
grid-auto-rows |
Defines the height of implicitly created rows. | |
grid-auto-flow |
Controls the placement of auto-placed items in the grid, determining the direction and density. | |
grid-column |
Shorthand for specifying the start and end of a grid item along the column axis. | |
grid-row |
Shorthand for specifying the start and end of a grid item along the row axis. | |
grid-area |
Specifies a grid item’s position within a named grid area, or defines the start/end of both columns and rows. | |
z-index |
Specifies the stacking order of grid items, determining which elements appear on top when they overlap. | |
| Background and Colors | ||
| Property | Description | |
|---|---|---|
background-color |
Specifies the background color of an element. Can use color names, hex codes, RGB, or HSL. | |
background-image |
Specifies an image to use as the background for an element. Can
use url() to specify the image source.
|
|
background-size |
Specifies the size of the background image. Common values are
cover, contain, or specific dimensions
(e.g., 100% 100%).
|
|
background-position |
Specifies the starting position of the background image. Common
values are center, top,
bottom, or specific coordinates (e.g.,
50% 50%).
|
|
background-repeat |
Specifies whether and how the background image is repeated. Common
values are repeat, no-repeat,
repeat-x, and repeat-y.
|
|
opacity |
Specifies the transparency level of an element. Can be a value
between 0 (fully transparent) and
1 (fully opaque).
|
|
color |
Specifies the color of text. Can use color names, hex codes, RGB, or HSL values. | |
| Typography and Text Styling | ||
| Property | Description | |
|---|---|---|
font-family |
Specifies the font family for text, e.g.,
'Arial', sans-serif. You can define fallback fonts.
|
|
font-size |
Specifies the size of the font. Can use values like
px, em, rem, or
percentages.
|
|
font-weight |
Specifies the thickness or boldness of text, using values like
normal, bold, or numeric values (e.g.,
100 to 900).
|
|
font-style |
Specifies whether the text is italic or normal. Common values are
normal, italic, and
oblique.
|
|
text-align |
Specifies the alignment of text within an element. Common values
are left, right, center,
and justify.
|
|
line-height |
Specifies the height of a line of text. Can use unitless numbers,
px, or em.
|
|
text-transform |
Controls the capitalization of text. Common values are
uppercase, lowercase, and
capitalize.
|
|
letter-spacing |
Specifies the space between letters. Can use values in
px or em.
|
|
word-spacing |
Specifies the space between words. Can use values in
px or em.
|
|
text-decoration |
Specifies decoration added to text, such as
underline, line-through, or
none.
|
|
| Transitions and Animations | ||
| Property | Description | |
|---|---|---|
transition |
Specifies the transition effect when changing from one style to
another. Can define the property,
duration, timing-function, and
delay in one declaration.
|
|
transition-property |
Specifies the CSS property that the transition effect applies to
(e.g., background-color, width).
|
|
transition-duration |
Specifies the length of time the transition takes. Can use values
like s or ms.
|
|
animation |
Defines an animation using keyframes. Can specify
name, duration,
timing-function, delay,
iteration-count, and more.
|
|
keyframes |
Specifies the keyframes for an animation, using percentages (e.g.,
0%, 100%) or keywords like
from and to.
|
|
animation-delay |
Specifies when the animation will start, either immediately
(0s) or after a specified delay.
|
|
animation-iteration-count |
Specifies how many times an animation should play. Can be a number
or infinite for continuous looping.
|
|
animation-direction |
Specifies whether an animation should play in reverse on alternate
iterations. Common values are normal,
reverse, alternate, and
alternate-reverse.
|
|
| Pseudo-class/Pseudo-elements | ||
| Pseudo-class / Pseudo-element | Description | |
|---|---|---|
:hover |
Applies styles when the user hovers over an element. | |
:focus |
Applies styles when an element has focus (e.g., an input field). | |
:active |
Applies styles when an element is being activated, such as when a button is being clicked. | |
:visited |
Applies styles to links that have already been visited by the user. | |
:first-child |
Applies styles to the first child element of a parent. | |
:last-child |
Applies styles to the last child element of a parent. | |
:nth-child() |
Applies styles to the child element that matches the specified index or pattern. | |
:nth-of-type() |
Applies styles to the element that is the nth of its type within its parent. | |
:not() |
Excludes elements that match a specific selector from being styled. | |
:checked |
Applies styles to input elements (like checkboxes or radio buttons) that are checked. | |
:disabled |
Applies styles to form elements that are disabled. | |
:enabled |
Applies styles to form elements that are enabled. | |
:focus-within |
Applies styles to an element if it or any of its descendants have focus. | |
:first-of-type |
Applies styles to the first element of a specific type within its parent. | |
:last-of-type |
Applies styles to the last element of a specific type within its parent. | |
::before |
Inserts generated content before an element's content. | |
::after |
Inserts generated content after an element's content. | |
::first-letter |
Applies styles to the first letter of an element's text content. | |
::first-line |
Applies styles to the first line of an element's text content. | |
::selection |
Applies styles to the portion of an element that has been selected by the user (e.g., when text is highlighted). | |
::placeholder |
Applies styles to the placeholder text in form elements (e.g., input fields). | |
::marker |
Applies styles to the marker box of a list item (e.g., bullet points in a list). | |
::backdrop |
Applies styles to the backdrop of a modal dialog when it's active. | |