CSS
Awesome links
Basic Syntax
selector {
property: value;
}
Selectors
Type Selector
Class Selector
.classname {
color: red;
}
ID Selector
#idname {
color: green;
}
Attribute Selector
input[type="text"] {
background-color: yellow;
}
Descendant Selector
Child Selector
div > p {
color: orange;
}
Adjacent Sibling Selector
General Sibling Selector
Pseudo-class Selector
Pseudo-element Selector
p::first-line {
font-weight: bold;
}
Colors
Named Colors
Hex Colors
RGB Colors
p {
color: rgb(255, 0, 0);
}
RGBA Colors
p {
color: rgba(255, 0, 0, 0.5);
}
HSL Colors
p {
color: hsl(0, 100%, 50%);
}
HSLA Colors
p {
color: hsla(0, 100%, 50%, 0.5);
}
Text
Text Color
Text Alignment
p {
text-align: center;
}
Text Decoration
p {
text-decoration: underline;
}
Text Transform
p {
text-transform: uppercase;
}
Text Indentation
Line Height
Letter Spacing
p {
letter-spacing: 2px;
}
Fonts
Font Family
p {
font-family: 'Arial', sans-serif;
}
Font Size
Font Style
p {
font-style: italic;
}
Font Weight
Box Model
Width and Height
div {
width: 100px;
height: 100px;
}
Padding
Border
div {
border: 1px solid black;
}
Margin
Box Sizing
div {
box-sizing: border-box;
}
Backgrounds
Background Color
div {
background-color: lightblue;
}
Background Image
div {
background-image: url('image.jpg');
}
Background Repeat
div {
background-repeat: no-repeat;
}
Background Size
div {
background-size: cover;
}
Background Position
div {
background-position: center;
}
Layout
Display
div {
display: block;
}
span {
display: inline;
}
Position
div {
position: relative;
top: 10px;
left: 10px;
}
Z-index
div {
position: absolute;
z-index: 10;
}
Float
Clear
Flexbox
Container
.container {
display: flex;
justify-content: center;
align-items: center;
}
Item
Grid
Container
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
Item
.item {
grid-column: span 2;
}
Transitions
div {
transition: background-color 0.5s ease;
}
div:hover {
background-color: lightgreen;
}
Translate
div {
transform: translate(50px, 100px);
}
Rotate
div {
transform: rotate(45deg);
}
Scale
div {
transform: scale(1.5);
}
Skew
div {
transform: skew(10deg, 20deg);
}
Animations
Keyframes
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
Animation
div {
animation-name: example;
animation-duration: 4s;
}