Home
CSS

CSS Basics Explained: Syntax, Selectors, Cascade & Specificity

Learn how CSS works from the ground up. Understand CSS syntax, selectors, cascade, inheritance, and specificity with simple explanations and examples.
MAXON
CSS Basics Explained: Syntax, Selectors, Cascade & Specificity

In this lesson, you’ll learn the most important core concepts of CSS that control how styles actually work: CSS syntax, selectors, cascade, inheritance, and specificity.

If CSS ever felt random or frustrating, it’s usually because one of these rules was unclear. Once you understand them, CSS becomes predictable, logical, and easy to debug.

Info!
Every CSS framework (Bootstrap, Tailwind, custom design systems) is built on these exact fundamentals.

1. CSS Syntax (How CSS Is Written)

CSS is written using rules. A rule tells the browser what to select and how to style it. 


selector {
  property: value;
}

Example rule:

Here:

  • p is the selector
  • color and font-size are properties
  • blue and 18px are values
Success! CSS syntax is simple. Most problems come from rule conflicts, not syntax.

2. CSS Selectors (Targeting Elements)

Selectors decide which HTML elements receive styles. Choosing the right selector is key to clean and maintainable CSS.

Selector Example Use Case
Element p Style all elements of one type
Class .card Reusable styling (best practice)
ID #header Unique element only

Warning!
Avoid styling everything with ID selectors. They make CSS hard to override.

3. CSS Cascade (Which Rule Wins?)

When multiple CSS rules target the same element, the browser uses the cascade to decide the final style.

Cascade priority:

  1. !important (avoid using)
  2. Specificity
  3. Source order (last rule wins)

Info!
CSS is not executed like JavaScript. Order and priority matter.

4. CSS Inheritance (Automatic Style Flow)

Some CSS properties automatically pass from parent elements to child elements. This is called inheritance.

Inherited properties include:

  • color
  • font-family
  • font-size

Tip!
Inheritance reduces repetitive CSS and keeps styles consistent.

5. CSS Specificity (Rule Strength)

Specificity defines which selector is stronger when multiple rules apply.

Specificity order (low → high):

  1. Element selector
  2. Class selector
  3. ID selector
  4. Inline styles

Warning!
Using !important breaks specificity logic and creates long-term CSS problems.

What You Learned

  • CSS syntax and rule structure
  • How selectors target elements
  • How the cascade resolves conflicts
  • How inheritance works automatically
  • How specificity controls rule priority
Success! You now understand the foundation of CSS. Every advanced layout and animation builds on this.

Next lesson: CSS Colors, Units & Typography

Post a Comment