CSS Cheatsheet

Table of Contents

1. Selectors
2. Box Model
3. Typography
4. Colors and Backgrounds
5. Layout
6. Flexbox
7. Grid
8. Transitions and Animations
9. Responsive Design
10. Miscellaneous

Selectors

Basic Selectors

* { } /* Universal Selector */
h1 { } /* Type Selector */
.class { } /* Class Selector */
#id { } /* ID Selector */
[attribute] { } /* Attribute Selector */

Combinators

div p { } /* Descendant Selector */
div > p { } /* Child Selector */
div + p { } /* Adjacent Sibling Selector */
div ~ p { } /* General Sibling Selector */

Pseudo-classes

a:hover { } /* Hover */
input:focus { } /* Focus */
li:first-child { } /* First Child */
li:last-child { } /* Last Child */
li:nth-child(2n) { } /* Even Children */

Pseudo-elements

p::first-line { } /* First Line */
p::first-letter { } /* First Letter */
p::before { content: ""; } /* Before Element */
p::after { content: ""; } /* After Element */

Box Model

Box Sizing

* {
    box-sizing: border-box;
}

Margin and Padding

.element {
    margin: 10px; /* All sides */
    margin: 10px 20px; /* Top/Bottom Left/Right */
    margin: 10px 20px 30px 40px; /* Top Right Bottom Left */
    padding: 10px; /* Same patterns as margin */
}

Border

.element {
    border: 1px solid black;
    border-radius: 5px;
    border-top: 2px dashed red;
}

Typography

Font Properties

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    line-height: 1.5;
}

Text Properties

p {
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 2px;
    word-spacing: 4px;
}

Colors and Backgrounds

Colors

.element {
    color: red;
    color: #00ff00;
    color: rgb(0, 0, 255);
    color: rgba(0, 0, 255, 0.5);
    color: hsl(120, 100%, 50%);
    color: hsla(120, 100%, 50%, 0.5);
}

Backgrounds

.element {
    background-color: yellow;
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Layout

Display

.element {
    display: block;
    display: inline;
    display: inline-block;
    display: none;
}

Position

.element {
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
}

Float

.element {
    float: left;
    float: right;
    clear: both;
}

Flexbox

Flex Container

.container {
    display: flex;
    flex-direction: row | column;
    justify-content: flex-start | center | flex-end | space-between | space-around;
    align-items: stretch | flex-start | center | flex-end;
    flex-wrap: nowrap | wrap;
}

Flex Items

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    flex: 1; /* shorthand for grow, shrink, and basis */
    align-self: auto | flex-start | center | flex-end | stretch;
}

Grid

Grid Container

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px;
    justify-items: start | center | end;
    align-items: start | center | end;
}

Grid Items

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    justify-self: start | center | end;
    align-self: start | center | end;
}

Transitions and Animations

Transitions

.element {
    transition: property duration timing-function delay;
    transition: all 0.3s ease;
}

Animations

@keyframes slide {
    0% { left: 0; }
    100% { left: 100px; }
}

.element {
    animation: slide 2s ease infinite;
}

Responsive Design

Media Queries

@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

Flexible Images

img {
    max-width: 100%;
    height: auto;
}

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Miscellaneous

Variables (Custom Properties)

:root {
    --main-color: #3498db;
}

.element {
    color: var(--main-color);
}

Opacity and Visibility

.element {
    opacity: 0.5;
    visibility: hidden;
}

Transform

.element {
    transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}

Filter

.element {
    filter: blur(5px) brightness(200%) grayscale(80%);
}