CSS Cheat Sheet
This cheat sheet provides a comprehensive overview of CSS, covering topics from
basics to advanced concepts. Each section includes explanations and examples for
better understanding.
Table of Contents
1. Selectors
2. Box Model
3. Typography
4. Colors and Backgrounds
5. Positioning and Layout
6. Flexbox
7. Grid
8. Transitions and Animations
9. Media Queries
10. Advanced Techniques
11. CSS Variables
12. Best Practices
Selectors
CSS selectors are used to target HTML elements for styling. Examples include universal (*), class
(.), ID (#), and attribute selectors.
Box Model
The CSS box model consists of margins, borders, padding, and the content area.
Typography
CSS allows you to style text using properties like font-family, font-size, font-weight, line-height,
letter-spacing, and text-align.
Colors and Backgrounds
Set colors using color names, hex codes, RGB, or HSL. Backgrounds can be styled with
background-color, background-image, background-size, and more.
Positioning and Layout
Position elements using static, relative, absolute, fixed, and sticky positioning. Use properties like
z-index to manage stacking context.
Flexbox
Flexbox is a layout model that provides an efficient way to align and distribute space among
elements. Key properties include display: flex, justify-content, align-items, and flex-direction.
Grid
CSS Grid Layout is a two-dimensional system for arranging items into rows and columns. Define
grids using grid-template-rows, grid-template-columns, and place items with grid-area.
Transitions and Animations
Add dynamic effects with CSS transitions and animations. Use transition-duration,
transition-timing-function, and @keyframes rules.
Media Queries
Make your designs responsive with media queries. Example: @media (max-width: 600px) { ... }
Advanced Techniques
Learn advanced techniques like pseudo-elements (::before, ::after), combinators, and advanced
selectors like :nth-child().
CSS Variables
Define reusable values with CSS variables. Example: --main-color: #007BFF; and use
var(--main-color).
Best Practices
Write clean, maintainable CSS by using meaningful class names, modular structure, and avoiding
inline styles.
