CSS Reference — Complete Cheat Sheet, Properties & Browser Support

In this tutorial, you'll learn about CSS Reference. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

This is your complete CSS reference — a cheat sheet of selectors, properties, units, and tools for quick lookup. Bookmark this page and come back whenever you need to remember a syntax.

What You'll Find

By the end of this reference, you'll have a comprehensive catalog of CSS selectors (including modern ones like :has() and :is()), layout and box model properties, typography properties (font-family, font-size, text-align), animation properties, all CSS units, browser support for major features, and an overview of CSS frameworks and preprocessors (Sass, Less, PostCSS).

Where This Fits

flowchart LR
    A["All CSS Tutorials"] --> B["**CSS Reference**"]
    B --> C["Frameworks & Libraries"]
    C --> D["Frontend-Ready Developer"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style D fill:#22c55e,stroke:#16a34a,color:#fff

CSS Selectors Cheat Sheet

Properties Quick Reference

Layout

Box Model

Typography

Background & Visual

Flexbox

Grid

Animation

CSS Units

Browser Support

Check latest support at caniuse.com.

CSS Frameworks

CSS Preprocessors

Sass / SCSS

$primary: #3498db;
$spacing: 16px;

.card {
  background: white;
  padding: $spacing;

  .title {
    color: $primary;
    font-size: 1.25rem;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

Less

@primary: #3498db;

.card {
  background: white;

  .title { color: @primary; }
}

PostCSS

A tool for transforming CSS with plugins — Autoprefixer, nesting, future CSS syntax.

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It's tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What's the difference between :nth-child and :nth-of-type? {{< details "Show answer" >}} :nth-child(2) selects the second child regardless of element type. :nth-of-type(2) selects the second element of that specific type. {{< /details >}}

Q2: Which units are best for responsive font sizes? {{< details "Show answer" >}} rem for consistent sizing across the page. clamp(min, preferred, max) for fluid typography. em for sizes relative to the current element. {{< /details >}}

Q3: What does box-sizing: border-box do? {{< details "Show answer" >}} Makes width and height include padding and border in their calculation, so a 100px-wide element stays 100px regardless of padding. {{< /details >}}

Q4: What's the difference between transition and animation? {{< details "Show answer" >}} transition animates between two states (triggered by hover, focus, etc.). animation with @keyframes can define multiple steps and loop. {{< /details >}}

Q5: What's a Css Preprocessor? {{< details "Show answer" >}} A tool that extends CSS with variables, nesting, mixins, and functions. Sass (SCSS) and Less are the most popular. They compile to standard CSS. {{< /details >}}

FAQ

FAQ

What's Next?

You've completed the CSS module! Continue to:

What's Next

Congratulations on completing this Css Reference tutorial! Here's where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!