How CSS Works

1. How CSS works with HTML

CSS (Cascading Style Sheets) describes how HTML elements should look: colors, sizes, spacing, borders, etc. A CSS rule has a selector (which element) and properties (what style) with values.

Example rule

p {
  color: blue;
  font-size: 18px;
}

Meaning: select all <p> elements and set their text color to blue and font-size to 18px.

Explanation: The browser loads your HTML, then applies CSS rules to matching elements. Multiple rules can apply to the same element; “cascade” and “specificity” decide which wins. We use simple properties in this demo: color, background-color, font-size, padding, margin, border, text-align.

2. `class` and `id` attributes (in detail)

To target specific elements with CSS (or JavaScript), you add class or id to your HTML. Both are attributes you put on a tag; CSS uses them as selectors.

The class attribute

A class is a label you can reuse on many elements. One element can have multiple classes (separated by spaces). Use it when several elements share the same style or behavior.

CSS selector: a dot (.) plus the class name, e.g. .warning selects all elements with class="warning".

Output

This paragraph has class="warning-text".

Another paragraph with the same class — same style.

This one has two classes: "warning-text" and "highlight-box".

Code

<p class="warning-text">This paragraph has class="warning-text".</p>
<p class="warning-text">Another paragraph with the same class — same style.</p>
<p class="warning-text highlight-box">This one has two classes.</p>

<style>
  .warning-text { color: #b91c1c; font-weight: 600; }
  .highlight-box { background: #fef2f2; padding: 8px; border: 1px solid #b91c1c; }
</style>

Explanation: class="warning-text" gives the element that class. The rule .warning-text { ... } applies to every element with that class. class="warning-text highlight-box" gives two classes — both rules apply. Class names can use letters, numbers, hyphens, underscores; avoid spaces (space separates multiple classes). Use lowercase and hyphens by convention (e.g. my-class-name).

The id attribute

An id identifies one unique element on the page. No two elements should share the same id. Use it for a specific section, a form field, or as a target for anchor links (href="#my-id").

CSS selector: a hash (#) plus the id value, e.g. #main-title selects the element with id="main-title".

Output

This heading has id="main-title" (unique on the page).

This paragraph has id="intro-paragraph".

Jump back to the heading — href="#main-title" links to the element with that id.

Code

<h3 id="main-title">This heading has id="main-title".</h3>
<p id="intro-paragraph">This paragraph has id="intro-paragraph".</p>
<a href="#main-title">Jump back to the heading</a>

<style>
  #main-title { color: #1e40af; }
  #intro-paragraph { background: #e0e7ff; padding: 10px; }
</style>

Explanation: id="main-title" must appear only once on the page. The rule #main-title { ... } targets that single element. href="#main-title" in a link scrolls to the element with that id (anchor link). Id names follow the same conventions as class; they are case-sensitive. class = reusable; id = unique. Prefer class for styling; use id when you need a unique identifier (e.g. for links or JavaScript).

class vs id — quick comparison

Attribute	Reuse	CSS selector	Use for
`class`	Many elements can share	`.class-name`	Shared styles, grouping
`id`	Must be unique per page	`#id-value`	Anchor links, unique targets

3. Adding CSS: inline — `style` attribute

You can put CSS directly on one HTML element using the style attribute. The value is a list of property: value; pairs, separated by semicolons.

Output

This paragraph is blue and larger (inline style).

This one has a yellow background, padding, and a border.

Code

<p style="color: #1d4ed8; font-size: 18px;">This paragraph is blue and larger (inline style).</p>
<p style="background-color: #fef3c7; padding: 10px; border: 1px solid #f59e0b;">This one has a yellow background, padding, and a border.</p>

Explanation: The style attribute applies only to that single element. No selector is needed — you are styling that tag directly. Pros: quick and obvious. Cons: hard to maintain, no reuse, mixes structure and presentation. Use sparingly (e.g. one-off overrides).

4. Adding CSS: internal — `<style>` tag

You can put CSS inside a <style> tag, usually in the <head>. Then you use selectors to target elements by tag name, class, or id. The styles apply to the whole page.

Output

This paragraph has class="highlight-text" and is styled by a rule inside <style>.

Same class → same style (reuse).

Code (in <head> or before </body>)

<style>
  .highlight-text {
    color: #059669;
    background-color: #d1fae5;
    padding: 8px 12px;
    border-left: 4px solid #059669;
  }
</style>

<p class="highlight-text">This paragraph has class="highlight-text"…</p>
<p class="highlight-text">Same class → same style (reuse).</p>

Explanation: The <style> block contains normal CSS rules. Here .highlight-text is a class selector (the dot means “class”). Any element with class="highlight-text" gets these styles. Pros: one place for many elements, reuse. Cons: only affects this page; multi-page sites repeat the same CSS. For one page or demos, internal CSS is fine.

5. Adding CSS: external stylesheet

Keep CSS in a separate .css file and link it with <link rel="stylesheet" href="path/to/file.css"> in the <head>. Many HTML pages can share the same file.

Code (in <head>)

<link rel="stylesheet" href="demo-common.css" />

This very page uses that link — the layout, sections, code blocks, and notes come from demo-common.css.

Explanation: rel="stylesheet" tells the browser the link is a CSS file. href is the path to the file. The path can be relative (from the current HTML file) or absolute (full URL). Relative paths are common for your own project files. See the next section for how relative paths work.

6. Relative paths: how `href` is resolved

A relative path is resolved from the location of the HTML file that contains the <link>. The browser “starts” in the same folder as that HTML file.

Example folder structure

project/
  index.html          ← your page is here
  styles.css          ← same folder
  css/
    main.css           ← inside subfolder
  assets/
    theme.css          ← another subfolder

Paths from index.html

href value	Finds file
`styles.css`	Same folder as `index.html` → `project/styles.css`
`css/main.css`	Inside folder `css` → `project/css/main.css`
`assets/theme.css`	Inside folder `assets` → `project/assets/theme.css`

Same folder: use just the filename, e.g. href="styles.css". Subfolder: use folder name then slash then file, e.g. href="css/main.css".

7. Relative path: going up — `../`

.. means “parent folder”. So ../file.css means “go up one folder, then find file.css”. Use this when your HTML is inside a subfolder but the CSS is in the parent (or another branch).

Example folder structure

project/
  styles.css           ← CSS is here (parent)
  pages/
    about.html         ← your page is here (inside pages/)

From about.html (inside pages/)

<link rel="stylesheet" href="../styles.css" />

../ = leave pages/ and go to project/, then load styles.css.

More levels

../styles.css — up one folder, then styles.css
../../styles.css — up two folders, then styles.css
../css/main.css — up one folder, then into css/, then main.css

Explanation: The path is always relative to the HTML file that contains the link. So when about.html is in project/pages/, href="../styles.css" points to project/styles.css. Use ../ once per folder level you need to go up.

8. Simple CSS properties used in this demo

A quick reference for the properties we used. Values can be in px, em, %, or keywords depending on the property.

Property	What it does
`color`	Text color (e.g. `red`, `#1d4ed8`)
`background-color`	Background color of the element
`font-size`	Size of text (e.g. `16px`, `1.2em`)
`padding`	Space inside the element (e.g. `10px`, `8px 12px`)
`margin`	Space outside the element
`border`	Line around the element (e.g. `1px solid black`)
`text-align`	Horizontal alignment: `left`, `center`, `right`

8. Quick summary

CSS = selector + properties and values. It controls how HTML elements look.
Three ways to add CSS: (1) style attribute on one element (inline), (2) <style> tag on the page (internal), (3) <link rel="stylesheet" href="..."> to an external .css file.
Relative path: resolved from the folder where the HTML file lives. file.css = same folder; css/main.css = subfolder; ../file.css = parent folder.
Use external CSS for multi-page sites; use internal or inline for single-page or quick overrides.

How CSS Works & How to Add CSS to a Page

1. How CSS works with HTML

2. class and id attributes (in detail)

This heading has id="main-title" (unique on the page).

3. Adding CSS: inline — style attribute

4. Adding CSS: internal — <style> tag

5. Adding CSS: external stylesheet

6. Relative paths: how href is resolved

7. Relative path: going up — ../

8. Simple CSS properties used in this demo

8. Quick summary

2. `class` and `id` attributes (in detail)

3. Adding CSS: inline — `style` attribute

4. Adding CSS: internal — `<style>` tag

6. Relative paths: how `href` is resolved

7. Relative path: going up — `../`