selector {
property: value;
}
| Selector | Description | Example |
|---|---|---|
element |
Selects all elements of the specified type | p { color: red; } |
#id |
Selects the element with the specified id | #header { font-size: 20px; } |
.class |
Selects all elements with the specified class | .intro { text-align: center; } |
* |
Selects all elements | * { margin: 0; } |
element, element |
Selects all specified elements | h1, h2 { margin: 10px; } |
element element |
Selects all elements inside another element | div p { color: blue; } |
element>element |
Selects direct child elements | ul>li { list-style: none; } |
element+element |
Selects the next sibling element | h1+p { margin-top: 0; } |
[attribute] |
Selects elements with the specified attribute | input[type="text"] { width: 100%; } |
| Property | Description | Example |
|---|---|---|
color |
Sets the color of the text | color: blue; |
text-align |
Aligns the text | text-align: center; |
text-decoration |
Sets the decoration of the text | text-decoration: underline; |
text-transform |
Controls the capitalization of the text | text-transform: uppercase; |
font-family |
Sets the font of the text | font-family: Arial, sans-serif; |
font-size |
Sets the size of the text | font-size: 16px; |
font-weight |
Sets the weight of the text | font-weight: bold; |
line-height |
Sets the height of each line of text | line-height: 1.5; |
letter-spacing |
Sets the space between characters | letter-spacing: 2px; |
| Property | Description | Example |
|---|---|---|
width |
Sets the width of an element | width: 100px; |
height |
Sets the height of an element | height: 100px; |
padding |
Sets the padding inside an element | padding: 20px; |
margin |
Sets the margin outside an element | margin: 20px; |
border |
Sets the border around an element | border: 1px solid black; |
box-sizing |
Defines how the width and height of an element are calculated | box-sizing: border-box; |
| Property | Description | Example |
|---|---|---|
background-color |
Sets the background color of an element | background-color: lightblue; |
background-image |
Sets the background image of an element | background-image: url('image.jpg'); |
background-repeat |
Sets if/how the background image will be repeated | background-repeat: no-repeat; |
background-size |
Sets the size of the background image | background-size: cover; |
background-position |
Sets the starting position of the background image | background-position: center; |
| Property | Description | Example |
|---|---|---|
position |
Sets the type of positioning for an element | position: relative; |
top |
Sets the top position of an element | top: 10px; |
bottom |
Sets the bottom position of an element | bottom: 10px; |
left |
Sets the left position of an element | left: 10px; |
right |
Sets the right position of an element | right: 10px; |
z-index |
Sets the stack order of an element | z-index: 1; |
| Property | Description | Example |
|---|---|---|
display |
Defines a flex container | display: flex; |
flex-direction |
Defines the direction of the flex items | flex-direction: row; |
justify-content |
Aligns flex items along the main axis | justify-content: center; |
align-items |
Aligns flex items along the cross axis | align-items: center; |
flex-wrap |
Specifies whether flex items should wrap | flex-wrap: wrap; |
flex |
Specifies how a flex item will grow or shrink | flex: 1; |
| Property | Description | Example |
|---|---|---|
display |
Defines a grid container | display: grid; |
grid-template-columns |
Defines the columns of the grid | grid-template-columns: 1fr 2fr; |
grid-template-rows |
Defines the rows of the grid | grid-template-rows: auto 100px; |
grid-column-gap |
Sets the gap between columns | grid-column-gap: 10px; |
grid-row-gap |
Sets the gap between rows | grid-row-gap: 10px; |
grid-area |
Specifies a grid item’s size and location | grid-area: 1 / 1 / 2 / 3; |
| Property | Description | Example |
|---|---|---|
@keyframes |
Defines an animation | @keyframes mymove { |
animation-name |
Specifies the name of the animation | animation-name: mymove; |
animation-duration |
Specifies the duration of the animation | animation-duration: 5s; |
animation-timing-function |
Specifies the timing of the animation | animation-timing-function: ease; |
animation-delay |
Specifies a delay before the animation starts | animation-delay: 2s; |
animation-iteration-count |
Specifies the number of times the animation will run | animation-iteration-count: infinite; |
| Property | Description | Example |
|---|---|---|
transform |
Applies a 2D or 3D transformation to an element | transform: rotate(45deg); |
transform-origin |
Sets the origin for the transformation | transform-origin: center; |
scale |
Scales an element | transform: scale(1.5); |
translate |
Moves an element | transform: translate(50px, 100px); |
rotate |
Rotates an element | transform: rotate(30deg); |