What is CSS?

Understand what CSS is, why it exists alongside HTML, and the three ways you can attach it to a page.

If HTML is the skeleton of a web page — the headings, paragraphs, images, and buttons — then CSS is the skin, clothes, and makeup. CSS stands for Cascading Style Sheets, and it is the language that controls how HTML content actually looks: colors, fonts, spacing, layout, animation, and more. Without CSS, every website would look like a plain, unstyled document — black text on a white background, default fonts, no layout. In this lesson you'll learn exactly what CSS does, how it relates to HTML, and the three different ways to add CSS to a page.

Cascading Style Sheets, decoded

The name 'Cascading Style Sheets' describes exactly what the language does. A 'style sheet' is a set of rules that describe how something should be presented. 'Cascading' refers to the algorithm the browser uses when multiple rules could apply to the same element — styles flow down and combine based on specificity, source order, and inheritance, like water cascading down a series of pools. You'll study the cascade in depth in a later module, but for now just know: CSS rules can come from many places, and the browser has a predictable system for deciding which one wins.

CSS was created because early HTML had presentation attributes mixed directly into markup (things like <font color="red">), which made pages bloated and nearly impossible to maintain. CSS pulled all of that presentation logic into a separate language, so HTML could go back to describing structure and meaning, and CSS could own appearance.

HTML vs. CSS: structure vs. presentation

HTML and CSS have a clean division of labor. HTML describes what something IS — this is a heading, this is a paragraph, this is a list of navigation links. CSS describes how it LOOKS — this heading is large and bold, this paragraph has a comfortable line height, this navigation list is laid out horizontally with no bullet points.

This separation is one of the most important ideas in web development. The same HTML document can be restyled completely — different colors, different layout, even a different visual identity — without changing a single tag, simply by swapping the CSS. Conversely, the same CSS rules (say, a 'card' style) can be applied to many different pieces of HTML content across a site.

• HTML = structure and meaning (semantics) • CSS = presentation and layout (visuals) • JavaScript = behavior and interactivity (you'll meet this later)

Three ways to add CSS

There are three methods for attaching CSS to HTML: inline styles (written directly on an element using the style attribute), internal styles (written inside a <style> tag in the document's <head>), and external stylesheets (a separate .css file linked into the HTML with <link>). Each has its place, but modern best practice strongly favors external stylesheets for anything beyond a tiny one-off tweak — you'll see why below, and we'll cover the mechanics of each method in more depth in the next lesson.

Why separating structure and presentation matters

Keeping HTML and CSS separate isn't just a stylistic preference — it has real, practical benefits for building and maintaining websites at any scale.

• Maintainability — change a color or font in one CSS file and it updates everywhere that style is used, instead of hunting through hundreds of HTML files. • Reusability — one set of CSS rules (a design system or component library) can style many pages consistently. • Caching — an external .css file is downloaded once and cached by the browser, so it doesn't need to be re-transferred on every page load, making subsequent page views faster. • Collaboration — designers and developers can work on visuals (CSS) and content/structure (HTML) somewhat independently. • Smaller HTML files — HTML free of repeated style attributes is lighter and easier to read.

The three attachment methods at a glance

Inline styles apply to a single element only. Internal styles apply to the whole document they're written in. External styles can apply to any number of HTML documents that link to the same file.

<!-- 1. Inline: style attribute directly on an element -->
<p style="color: navy; font-weight: bold;">Inline styled text</p>

<!-- 2. Internal: <style> block inside <head> -->
<head>
  <style>
    p {
      color: navy;
      font-weight: bold;
    }
  </style>
</head>

<!-- 3. External: a separate .css file linked in -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Code Examples

The style attribute holds CSS declarations that apply only to this one <h1> element. Quick to write, but it doesn't scale — imagine repeating this on every heading.

The <style> element lives in <head> and holds CSS rules that apply to the entire document. No repetition needed — every <h1> on this page will be crimson.

The <link> tag pulls in a separate styles.css file. This is the recommended approach: the stylesheet can be linked from many HTML pages, and the browser caches it after the first download. styles.css would contain: body { font-family: Arial, sans-serif; } h1 { color: crimson; }

<!-- Inline CSS: style written directly on the element -->
<h1 style="color: crimson;">Welcome to my site</h1>

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }
    h1 {
      color: crimson;
    }
  </style>
</head>
<body>
  <h1>Welcome to my site</h1>
</body>
</html>

<!-- index.html -->
<head>
  <title>My Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to my site</h1>
</body>
</html>

The three layers of a web page

Each layer has a distinct job. Mixing them (e.g. styling with inline attributes everywhere) blurs these responsibilities and makes code harder to maintain.

HTML        ------->  Structure   (what things ARE)
CSS         ------->  Presentation (how things LOOK)
JavaScript  ------->  Behavior     (what things DO)

Important Rules

CSS stands for Cascading Style Sheets.

HTML defines structure/meaning; CSS defines presentation.

CSS can be added inline, internally, or externally.

External stylesheets are best practice for real projects because they're reusable, cacheable, and easier to maintain.

Why this matters on real teams

Professional websites almost always use external CSS files (often several, organized by component or page section, sometimes compiled from tools like Sass). This lets a whole team update the visual design — a rebrand, a dark mode, a new color palette — without touching the HTML content at all.

<p style="color: red;">Error message</p> <p style="color: red;">Another error</p> <p style="color: red;">A third error</p>

Repeating inline styles is a maintenance trap — if you need to change the color later, you must edit every element. A reusable class defined once fixes this.

[Multiple Choice] Which statement best describes the relationship between HTML and CSS? A. HTML and CSS do the same job, so you only need one of them B. HTML defines structure and meaning; CSS defines presentation and appearance C. CSS defines structure; HTML defines appearance D. HTML is only used for text, and CSS is only used for images

B. HTML defines structure and meaning; CSS defines presentation and appearance — HTML describes what content is (headings, paragraphs, lists), while CSS controls how that content looks (colors, fonts, layout, spacing).

Create a simple HTML page with one heading and one paragraph. Style the heading using internal CSS (a <style> block) so it is blue and centered.

<head> <style> h1 { color: blue; text-align: center; } </style> </head> <body> <h1>Hello CSS</h1> <p>This paragraph is unstyled.</p> </body>

Use a <style> tag in the <head>, target the h1 element, and set the color and text-align properties.