CSS Cheatsheet

CSS is a fundamental technology for designing and styling web content. This cheat sheet provides a quick reference to commonly used CSS properties, selectors, and techniques. Whether you're a beginner or an experienced developer, this cheat sheet will help you enhance your web design skills.

Table of Contents

1. Selectors
2. Box Model
3. Positioning
4. Typography
5. Colors
6. Backgrounds
7. Borders
8. Transforms
9. Transitions
10. Flexbox
11. Grid Layout

Selectors

Element Selector

p {
  /* Selects all <p> elements */
}

Class Selector

.button {
  /* Selects all elements with class="button" */
}

ID Selector

#header {
  /* Selects the element with id="header" */
}

Descendant Selector

article p {
  /* Selects all <p> elements inside <article> elements */
}

Pseudo-class Selector

a:hover {
  /* Selects links on hover */
}

Universal Selector

* {
  /* Selects all elements */
}

Box Model

Width and Height

.box {
  width: 200px;
  height: 100px;
}

Margin

.box {
  margin: 10px;
}

Padding

.box {
  padding: 10px;
}

Border

.box {
  border: 1px solid #000;
}

Box Sizing

.box {
  box-sizing: border-box;
}

Positioning

Position

.element {
  position: relative;
  /* Other values: absolute, fixed, static */
}

Float

.image {
  float: left;
  /* Other values: right */
}

Flexbox

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid Layout

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Typography

Font Family

body {
  font-family: Arial, sans-serif;
}

Font Size

h1 {
  font-size: 24px;
}

Font Weight

strong {
  font-weight: bold;
}

Text Alignment

p {
  text-align: center;
  /* Other values: left, right, justify */
}

Colors

Color Property

.element {
  color: #333;
}

Background Color

.container {
  background-color: #f0f0f0;
}

Transparency

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

Backgrounds

Background Image

.header {
  background-image: url('bg.jpg');
  background-size: cover;
}

Background Repeat

.tile {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Borders

Border Radius

.button {
  border-radius: 5px;
}

Border Color

.input {
  border: 1px solid #ccc;
}

Transforms

Scale

.box {
  transform: scale(1.2);
}

Rotate

.card {
  transform: rotate(45deg);
}

Transitions

Transition Property

.button {
  transition: background-color 0.3s ease;
}

Hover Effect

.button:hover {
  background-color: #007bff;
  color: #fff;
}

Flexbox

Flex Container

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

Grid Layout

Grid Container

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

This cheatsheet provides a concise reference to common CSS properties and techniques. Use it as a quick guide while working on your web projects to create beautiful and responsive designs.

Estimated Reading Time: 5 minutes