CSS3

CSS Cheat Sheet

Element selectorTargets all elements of a type

p {
  color: red;
}

Class selectorTargets elements with a class

.my-class {
  font-size: 16px;
}

ID selectorTargets a single element by ID

#my-id {
  background: blue;
}

DescendantTargets nested elements

div p {
  margin: 0;
}

Pseudo-classTargets special states

a:hover {
  color: orange;
}

ContentThe inner content area

PaddingSpace inside the border

padding: 10px;
padding: 10px 20px;

BorderEdge around padding

border: 1px solid black;
border-radius: 8px;

MarginSpace outside the border

margin: 10px auto;
margin-top: 20px;

Box sizingInclude padding and border in width

box-sizing: border-box;

DisplayControls element display type

display: block;
display: flex;
display: grid;
display: none;

FlexboxOne-dimensional layout

display: flex;
justify-content: center;
align-items: center;
gap: 16px;

GridTwo-dimensional layout

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;

PositionPositioning method

position: absolute;
position: relative;
position: fixed;
top: 0; left: 0;