Css Basics

Learn how CSS works, master selectors, and understand the cascade.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn

What Is CSS and Why It Matters

CSS is the difference between a website people trust and a website people instantly leave. HTML alone creates content. CSS controls perception.

Humans judge a website in under 1 second. That judgment is driven almost entirely by CSS.

How CSS Actually Works

CSS works by applying rules to HTML elements.

Where CSS Lives (External Files)

Real websites use external CSS files. Always.

Inline CSS is amateur. Internal CSS is temporary. External CSS is professional.

1. Element Selectors (The Basics)

Use cases: Global text styling, headings, defaults

⚠️ Overusing element selectors causes problems later. They are broad, not precise.

2. Class Selectors (The Most Important)

Classes are reusable. They are the backbone of real CSS.

90% of your CSS should target classes. If you don't use classes properly, your CSS will collapse.

📋 CSS Selector Quick Reference

Selector

Syntax

Specificity

Use Case

Element

p {}

Low (0,0,1)

Global defaults

Class

.card {}

Medium (0,1,0)

Reusable components

ID

#header {}

High (1,0,0)

Unique sections

Inline

style=""

Highest

Avoid if possible!

💡 Pro tip: Use classes for 90% of your CSS. They're reusable and easy to maintain.

3. ID Selectors (Use Carefully)

IDs are unique. There should only be one per page.

⚠️ IDs are strong but dangerous if abused. Most modern CSS avoids them except for layout anchors.

Combining Selectors (Precision Control)

You can target elements inside other elements.

Scope your styles or you will regret it later.

CSS Properties You MUST Know

Color & Text: Fonts and spacing affect readability and trust.

Spacing (Box Model): Every element is a box with padding, margin, and border.

💡 If your layout feels "off", it's usually padding or margin.

Understanding Cascade & Specificity

CSS stands for Cascading Style Sheets. This means:

Understanding cascade prevents "Why isn't my CSS working?" moments.

Common Beginner CSS Mistakes

CSS is simple. Bad CSS habits are what make it hard.

Practice Challenge

Key Takeaways

Practice quiz

What does CSS stand for?

  • Computer Style Sheets
  • Creative Styling System
  • Cascading Style Sheets
  • Coded Style Syntax

Answer: Cascading Style Sheets. CSS stands for Cascading Style Sheets — 'cascading' refers to how conflicting rules are resolved.

What are the two parts of every CSS rule?

  • A selector and a block of styles (declarations)
  • A tag and an id
  • A property and a comment
  • An element and an attribute

Answer: A selector and a block of styles (declarations). Each rule has a selector (what to target) and a declaration block (the property: value pairs to apply).

Which character begins a class selector?

  • A hash (#)
  • An at-sign (@)
  • An ampersand (&)
  • A dot (.)

Answer: A dot (.). Class selectors start with a dot, like .card. ID selectors start with a hash, like #header.

Which character begins an ID selector?

  • A dot (.)
  • A hash (#)
  • A colon (:)
  • An asterisk (*)

Answer: A hash (#). ID selectors start with a hash, like #header. An ID should be unique — only one per page.

How many elements should share a given ID on a page?

  • Exactly one — IDs are unique
  • As many as you like
  • At most three
  • Only block elements

Answer: Exactly one — IDs are unique. An ID is unique: one ID per element and one element per ID. Never reuse IDs.

Order these selectors from lowest to highest specificity.

  • Class, element, ID
  • ID, class, element
  • Element, class, ID
  • Element, ID, class

Answer: Element, class, ID. Specificity rises from element (0,0,1) to class (0,1,0) to ID (1,0,0). Inline styles beat all of them.

When two rules have the SAME specificity, which one wins?

  • The first one written
  • The one that comes later in the stylesheet
  • The shorter one
  • Neither — both are ignored

Answer: The one that comes later in the stylesheet. With equal specificity, the later rule wins — that is the 'cascade' in Cascading Style Sheets.

Which way of applying CSS overrides element, class and ID selectors (short of !important)?

  • External stylesheet
  • Internal style tag
  • A class selector
  • Inline style attribute

Answer: Inline style attribute. Inline styles (style="...") have the highest specificity of the normal sources and override element, class and ID rules.

Which method does the lesson recommend for real websites?

  • Inline CSS on every element
  • External CSS files linked with link rel="stylesheet"
  • Internal CSS in a style tag
  • No CSS at all

Answer: External CSS files linked with link rel="stylesheet". External CSS files are the professional standard: clean separation, easier maintenance, and browser caching.

What does the descendant selector '.card p' (with a space) target?

  • Every p on the page
  • Only direct child p of .card
  • Only p elements inside an element with class card
  • The p directly after .card

Answer: Only p elements inside an element with class card. A space is the descendant combinator: .card p matches all p elements inside any .card, at any depth.

Continue this course