CSS Basics

What You Will Learn in CSS Basics

• How CSS syntax works.
• Selectors, properties, and values.
• CSS declarations and rule sets.
• How CSS targets HTML elements.
• CSS comments and organization.
• Common beginner mistakes.
• Best practices for writing maintainable CSS.

CSS Basics Cheatsheet

CSS Syntax

CSS syntax consists of selectors and declaration blocks. The selector identifies which HTML element should be styled, while the declaration block contains style rules.

selector {
  property: value;
}

Example

h1 {
  color: blue;
  font-size: 2rem;
}

In this example:

• h1 is the selector.
• color and font-size are properties.
• blue and 2rem are values.

Selectors, Properties, and Values

Every CSS rule contains these three building blocks.

p {
  color: #333333;
}

CSS Rule Set

A CSS rule set is a complete styling instruction consisting of a selector and one or more declarations.

.button {
  background-color: #0d6efd;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

Multiple declarations can exist inside the same rule set.

CSS Comments

Comments help document your code and improve readability. Browsers ignore comments during rendering.

/* Primary button styles */
.button {
  background-color: #0d6efd;
}

Use comments to explain sections, components, utility classes, or important design decisions.

Most Common CSS Selectors

h1,
h2,
h3 {
  font-family: Arial, sans-serif;
}

Complete CSS Example

HTML

<div class="card">
  <h2>CSS Basics</h2>
  <p>Learn CSS step by step.</p>
</div>

CSS

.card {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #dee2e6;
}

.card h2 {
  color: #0d6efd;
}

How Browsers Apply CSS

1. Browser loads HTML.
2. Browser downloads CSS files.
3. CSS selectors are matched against HTML elements.
4. Browser calculates final styles.
5. Page is rendered visually.

The browser combines HTML structure and CSS styling to create the final page users see.

CSS Best Practices

• Use external CSS files whenever possible.
• Use meaningful class names.
• Keep selectors simple and readable.
• Group related styles together.
• Use comments to organize large files.
• Avoid unnecessary ID selectors.
• Write mobile-first CSS.
• Reuse styles through classes.
• Remove unused CSS.
• Follow consistent formatting standards.

Common CSS Beginner Mistakes

• Forgetting semicolons between declarations.
• Misspelling property names.
• Using too many inline styles.
• Creating deeply nested selectors.
• Using IDs for everything.
• Ignoring mobile devices.
• Writing duplicate CSS rules.
• Not organizing styles logically.

Real-World Uses of CSS

• Business websites.
• E-commerce stores.
• Blogs and content sites.
• Web applications.
• Dashboards and admin panels.
• Design systems and component libraries.
• Mobile-responsive websites.

Key Takeaways

• CSS controls the appearance of HTML pages.
• Every CSS rule contains selectors, properties, and values.
• Selectors determine which elements receive styles.
• External CSS is recommended for production websites.
• Simple, maintainable CSS scales better than overly complex CSS.
• CSS fundamentals are the foundation for Flexbox, Grid, animations, and responsive design.