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;
    }
}