Css Basics

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

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

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.

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.

CSS works by applying rules to HTML elements.

Real websites use external CSS files. Always.

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

Use cases: Global text styling, headings, defaults

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

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.

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

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.

You can target elements inside other elements.

Scope your styles or you will regret it later.

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.

CSS stands for Cascading Style Sheets. This means:

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

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

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.