Ananta Code Academy
ananta::html-css
MODULE 03 · CSS FOUNDATIONS

Introduction to CSS & Selectors

HTML gave your page structure. CSS is where it starts to look like something — colors, spacing, fonts, and the selectors that decide exactly which elements each rule touches.

Day 16 of 30 Beginner ~20 min
01 · OVERVIEW

What CSS Actually Does

CSS (Cascading Style Sheets) is the language that controls how HTML elements look and are positioned on a page. HTML says "this is a heading" and "this is a list" — CSS says how big that heading is, what color it is, and how much space sits around it.

02 · ADDING CSS TO A PAGE

Three Ways to Write CSS

CSS can live in three places. In real projects you'll almost always reach for the third one, but it helps to recognize all three.

METHOD WHEN TO USE IT
Inline

style="..." written directly on one element. Quick to test, hard to maintain — avoid it in real projects.

Internal

A <style> block inside <head>. Fine for a single-page demo or a quick prototype.

External

A separate .css file linked with <link>. The standard approach — one stylesheet, reused across every page.

index.html 
<!-- External stylesheet: the method you'll use going forward -->
<head>
  <link rel="stylesheet" href="style.css">
</head>
style.css 
/* A rule: selector + declaration block */
p {
  color: navy;
  font-size: 16px;
}
03 · SELECTORS

Targeting the Right Elements

A selector decides which elements a rule applies to. These four are the ones you'll reach for constantly.

SELECTOR MATCHES
p

Element selector — every <p> on the page.

.card

Class selector — every element with class="card". Reusable across many elements.

#main

ID selector — the one element with id="main". IDs must be unique per page.

*

Universal selector — every element on the page.

selectors.css 
/* Element selector */
h1 { color: #e8590c; }

/* Class selector — reusable */
.card { padding: 16px; }

/* ID selector — one element only */
#main { max-width: 800px; }

/* Combining a tag with a class */
li.active { font-weight: bold; }
CLASS VS ID

Use a class when the style might apply to more than one element — most of the time, this is what you want. Reach for an id only when you need to target one specific, unique element.

04 · COMBINATORS

Selecting by Relationship

Selectors can also target elements based on where they sit relative to another element.

combinators.css 
/* Descendant: any span inside .card, at any depth */
.card span { color: gray; }

/* Direct child: only li that is a direct child of ul */
ul > li { list-style: none; }

/* Grouping: apply one rule to several selectors at once */
h1, h2, h3 { font-family: sans-serif; }
05 · THE CASCADE

When Rules Compete: Specificity

When more than one rule targets the same element, CSS uses specificity to decide which wins — not just the order the rules were written in. As a rough scale: an id beats a class, a class beats an element selector, and a later rule of equal specificity beats an earlier one.

HOW SPECIFICITY IS SCORED
TAG p { color: black; } — lowest specificity
CLASS .intro { color: blue; } — beats a tag selector
ID #lead { color: orange; } — beats a class selector

If a <p> has both class="intro" and id="lead", it renders orange — the id rule wins regardless of where the rules appear in the file.

06 · BREAKDOWN

Breaking Down What You Just Learned

1

Rule structureEvery CSS rule pairs a selector with a declaration block of property: value pairs.

2

External stylesheetsLink a .css file with <link> so styles stay separate from markup and reusable across pages.

3

Element, class, idThree core selector types, from broadest (every tag) to narrowest (one unique element).

4

CombinatorsDescendant and child selectors target elements based on their position in the HTML.

5

SpecificityWhen rules conflict, ids beat classes and classes beat tag selectors.

07 · PRACTICE

Try It Yourself

EXERCISE

Take the static page you built on Day 15, create a linked style.css, and give the heading, one paragraph class, and one unique element three different colors using an element, a class, and an id selector.

08 · TODAY'S PRACTICE

Style a Page With Three Selector Types

HANDS-ON EXERCISE

Wiring up your first stylesheet

Create day16.html and style.css in the same folder and connect them together.

  1. Link style.css inside the <head> of day16.html using <link rel="stylesheet">.
  2. Build a page with a heading, two paragraphs, and a list of three items.
  3. Write an element selector rule that styles all paragraphs.
  4. Add a class to one paragraph and give it its own class selector rule.
  5. Add a unique id to the heading and style it with an id selector.
  6. Use a descendant selector to style only the list items inside your list.
09 · RECAP

Recap

CSS RULE

A selector paired with a declaration block of property: value pairs.

EXTERNAL STYLESHEET

The standard way to add CSS — one .css file linked to every page.

SELECTOR TYPES

Element, class, and id — each with a different scope.

SPECIFICITY

Decides which rule wins when more than one rule targets the same element.

10 · SUMMARY

Key Takeaways

  • CSS controls presentation; HTML stays focused on structure and meaning.
  • External stylesheets, linked with <link>, are the standard way to add CSS to a page.
  • Element, class, and id selectors target elements at different levels of scope.
  • Descendant and child combinators select elements based on their position in the markup.
  • Specificity — not just rule order — decides which rule wins when two rules conflict.
Course Overview