CSS Cheat Sheet (CSS Cheat Sheet with Examples)

CSS (Cascading Style Sheets) controls the presentation of web pages, enhancing the structure HTML provides with visual and layout customization. Here’s a CSS cheat sheet with examples, covering CSS selectors, properties, the box model, flexbox, grid, and Tailwind CSS.

CSS Selectors Cheat Sheet

CSS selectors allow you to target specific HTML elements for styling. Here’s a quick overview of commonly used selectors:

Universal Selector (*): Applies styles to all elements.

* {
  margin: 0;
  padding: 0;
}

Type Selector: Targets specific elements by their tag name.

h1 {
  color: blue;
}

Class Selector (.className): Targets elements with a specific class.

.text-center {
  text-align: center;
}

ID Selector (#idName): Targets an element with a specific ID.

#header {
  background-color: lightgray;
}

Attribute Selector: Styles elements based on attributes.

[type="text"] {
  border: 1px solid black;
}

CSS Box Model Cheat Sheet

The CSS box model is a crucial concept, as it defines how elements are rendered on a webpage. The model consists of the following parts:

• Content: The inner area where text and images appear.
• Padding: Space between the content and border.
• Border: A line surrounding the padding (optional).
• Margin: Space outside the border.

Here's an example to illustrate:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 15px;
}

In this example:

• The content width is 200px.
• Padding adds 10px on all sides.
• A 5px border surrounds the padding.
• Margin adds 15px space outside the border.

CSS Properties Cheat Sheet

CSS properties define the visual aspects of elements. Here’s a list of essential properties with examples:

Color: Sets the text color.

p {
  color: #333;
}

Background: Controls the background color or image.

body {
  background-color: #f9f9f9;
}

Font: Adjusts the font properties.

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

Text Alignment: Aligns text within an element.

.text-center {
  text-align: center;
}

Padding and Margin: Adds space inside and outside an element.

div {
  padding: 20px;
  margin: 10px;
}

Display: Defines the display behavior (inline, block, flex, etc.).

.container {
  display: flex;
}

CSS Flexbox Cheat Sheet

CSS Flexbox is a powerful layout tool that enables responsive and flexible designs by arranging items in a row or column. Here’s a breakdown of key Flexbox properties:

display: flex: Enables flexbox on a container.

.flex-container {
  display: flex;
}

flex-direction: Sets the direction of items (row, column, row-reverse, column-reverse).

.flex-container {
  flex-direction: row;
}

justify-content: Aligns items horizontally (flex-start, center, space-between, etc.).

.flex-container {
  justify-content: space-between;
}

align-items: Aligns items vertically (flex-start, center, stretch, etc.).

.flex-container {
  align-items: center;
}

flex-wrap: Wraps items to a new line if necessary.

.flex-container {
  flex-wrap: wrap;
}

Flexbox is particularly useful for creating responsive layouts without needing media queries.

CSS Grid Cheat Sheet

CSS Grid is a two-dimensional layout system that allows for complex web designs with rows and columns. Here’s a quick guide:

display: grid: Turns a container into a grid layout.

.grid-container {
  display: grid;
}

grid-template-columns: Defines the number and width of columns.

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

grid-template-rows: Defines the number and height of rows.

.grid-container {
  grid-template-rows: 100px 200px;
}

gap: Adds spacing between rows and columns.

.grid-container {
  gap: 10px;
}

grid-area: Defines a grid item’s position.

.grid-item {
  grid-area: 1 / 2 / span 2 / span 3;
}

Grid is ideal for building more intricate layouts, providing more control over positioning than Flexbox.

Tailwind CSS Cheat Sheet

Tailwind CSS is a utility-first CSS framework, designed for rapidly building custom interfaces. Below are some commonly used Tailwind utilities:

Text and Background Colors: Easily change text and background colors.

<div class="text-red-500 bg-gray-100">
  Error: Something went wrong!
</div>

Flexbox Utilities: Tailwind makes it simple to create flexbox layouts.

<div class="flex justify-center items-center">
  Centered Content
</div>

Spacing: Control padding and margin with concise classes.

<div class="p-4 m-2">
  Spaced Content
</div>

Typography: Easily apply font styles.

<h1 class="font-bold text-xl text-blue-600">
  Hello World
</h1>

Grid Utilities: Quickly define grids with Tailwind’s grid classes.

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-1">Item 1</div>
  <div class="col-span-2">Item 2</div>
</div>

Tailwind CSS is particularly useful for building complex UIs rapidly without writing much custom CSS.

Commonly Used Layout Techniques

Understanding the core layout techniques can help build responsive and flexible designs.

Centering an Element

Centering elements horizontally and vertically is a common challenge. Here’s how to center an element with flexbox:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Creating a Responsive Grid

CSS Grid is ideal for creating responsive layouts. Here’s a basic example:

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

This layout automatically adjusts to the screen size, creating a responsive grid.

Basic Card Layout

A card layout with a header, content, and footer can be created with flexbox and grid.

<div class="card">
  <header>Card Header</header>
  <div class="content">Some content</div>
  <footer>Card Footer</footer>
</div>

.card {
  border: 1px solid #ddd;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

Conclusion

This CSS cheat sheet provides a foundational reference for CSS selectors, properties, the box model, flexbox, grid, and Tailwind CSS. Whether you’re just starting with web development or need a quick refresher, these CSS tools and frameworks help create efficient, responsive designs. As CSS continues to evolve, staying familiar with its core elements and exploring frameworks like Tailwind CSS can enhance your workflow and design capabilities.

More Cheat Sheets and Top Picks

• HTML Cheat Sheet
• JavaScript Cheat Sheet
• Java Cheat Sheet
• Docker Cheat Sheet
• SQL Cheat Sheet
• Python Cheat Sheet