CSS Reference
Selectors
/* Element Selector */
p {
color: blue;
}
/* ID Selector */
#header {
background-color: lightgray;
}
/* Class Selector */
.center {
text-align: center;
}
/* Universal Selector */
* {
margin: 0;
padding: 0;
}
/* Attribute Selector */
input[type="text"] {
width: 200px;
}
/* Descendant Selector */
nav ul {
list-style-type: none;
}
/* Child Selector */
header > nav {
margin-top: 10px;
}
/* Adjacent Sibling Selector */
h2 + p {
font-style: italic;
}
Pseudo-Classes
/* :hover */
a:hover {
color: red;
}
/* :active */
button:active {
background-color: gray;
}
/* :focus */
input:focus {
border: 2px solid blue;
}
/* :nth-child */
li:nth-child(odd) {
background-color: lightgray;
}
/* :nth-of-type */
div:nth-of-type(2) {
font-weight: bold;
}
/* :first-child */
ul li:first-child {
font-weight: bold;
}
/* :last-child */
ul li:last-child {
font-style: italic;
}
Pseudo-Elements
/* ::before */
p::before {
content: "Read this: ";
font-weight: bold;
}
/* ::after */
p::after {
content: " - The end";
font-style: italic;
}
/* ::first-letter */
p::first-letter {
font-size: 150%;
}
/* ::first-line */
p::first-line {
font-weight: bold;
}
Box Model
/* Width and Height */
div {
width: 200px;
height: 100px;
}
/* Padding */
div {
padding: 20px;
}
/* Border */
div {
border: 1px solid black;
}
/* Margin */
div {
margin: 20px;
}
/* Display */
/* Block */
div {
display: block;
}
/* Inline */
span {
display: inline;
}
/* Inline-Block */
button {
display: inline-block;
}
/* None */
.hidden {
display: none;
}
Positioning
/* Static */
div {
position: static;
}
/* Relative */
div {
position: relative;
top: 20px;
left: 30px;
}
/* Absolute */
div {
position: absolute;
top: 20px;
left: 30px;
}
/* Fixed */
div {
position: fixed;
top: 0;
right: 0;
}
Flexbox
/* Flex Container */
.container {
display: flex;
}
/* Flex Direction */
.container {
flex-direction: row;
}
/* Flex Wrap */
.container {
flex-wrap: wrap;
}
/* Justify Content */
.container {
justify-content: space-between;
}
/* Align Items */
.container {
align-items: center;
}
/* Align Content */
.container {
align-content: center;
}
Grid
/* Grid Container */
.container {
display: grid;
}
/* Grid Template Columns */
.container {
grid-template-columns: auto auto auto;
}
/* Grid Gap */
.container {
grid-gap: 10px;
}
/* Grid Column and Row */
.item {
grid-column: 2 / 4;
grid-row: 1;
}
Transitions and Animations
/* Transitions */
button {
transition: background-color 0.5s ease;
}
button:hover {
background-color: lightblue;
}
/* Keyframes */
@keyframes move {
from {left: 0;}
to {left: 200px;}
}
/* Animations */
div {
animation: move 2s infinite alternate;
}
Media Queries
/* Mobile Devices */
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* Tablets */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
body {
background-color: lightgreen;
}
}
/* Desktops */
@media only screen and (min-width: 1025px) {
body {
background-color: lightyellow;
}
}