What CSS does: connecting style to HTML

Every page you've built so far is unstyled

Open any lesson from this series in a browser and you'll notice something: it looks plain. Black text, blue links, a default serif font, form controls in whatever style your operating system ships. That's not a bug in your markup, it's the browser's own built-in stylesheet, the same one every browser applies to every page that doesn't say otherwise. Every course up to now taught you structure and meaning: which element is a heading, which input collects an email, which fieldset groups a question. None of it taught the browser what anything should look like. That's a different language entirely, and it starts here.

CSS in one sentence

CSS, Cascading Style Sheets, answers one kind of question: given an element that already exists in the HTML, how should it be drawn? Color, size, spacing, position, font, all of it. CSS never creates elements, never decides what data a form submits, never changes what a screen reader announces as a name. It only paints. That boundary matters enough to repeat: HTML is what a thing is; CSS is what a thing looks like. Confusing the two is the single most common mistake early on, reaching for a CSS trick to solve a problem that's a missing <label> or a wrong element choice.

Getting CSS onto the page

A rule needs to reach an HTML document before it does anything, and there are three ways in, though only one matters for real projects.

<!-- Inline: one property, on one element, written right in the tag. Avoid this. -->
<p style="color: red;">Careful with this one.</p>

<!-- Embedded: a whole stylesheet in the page's own <head>. Fine for learning. -->
<head>
  <style>
    p { color: red; }
  </style>
</head>

<!-- External: a separate .css file, linked in. What real apps do. -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Inline styles apply to one element and can't be reused; they'll show up occasionally, usually generated by JavaScript, but you should almost never write them by hand. Embedded <style> blocks are useful for a quick demo or a single-page example, this course will lean on them for that reason. External stylesheets, one .css file linked from every HTML page that needs it, are what production apps use: write the rule once, every page that links the file gets it, change it once, every page updates. In a Rails app, this file lives under app/assets/stylesheets and gets served automatically; you'll wire that up properly once you reach the Rails phase.

Anatomy of a rule

Every CSS rule has the same two-part shape: a selector that says which elements to target, and a declaration block that says what to do to them.

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

p                    ← selector: "every <p> element"
{                    ← opens the declaration block
  color: navy;       ← declaration: property "color", value "navy"
  font-size: 18px;   ← another declaration
}                    ← closes the declaration block

p is the selector, the whole subject of this course. Inside the braces, each line is a declaration: a property name, a colon, a value, and a semicolon closing it off. The semicolon after the last declaration is optional. Leave one out in the middle and the next declaration gets swallowed into this value, so the browser silently drops both. End every declaration with a semicolon and this bug never happens.

What selectors are for

A selector is a pattern, written in CSS's own small language, that the browser matches against every element in your HTML. p matches every <p> on the page. As you'll see over the rest of this course, selectors can target one specific element, a whole category of elements, elements in a particular state, elements sitting in a particular structural relationship to another element, and combinations of all of the above. Learning to read and write selectors precisely is the entire skill this course builds; the declarations inside the braces (colors, sizes, spacing) come later, once you can reliably say which element you're talking to.

What this course covers

• Lesson 1, What CSS does: connecting style to structure without touching either (you are here)
• Lesson 2, Type, class, and ID selectors: the three selectors behind almost everything you'll write
• Lesson 3, Grouping and combinators: targeting several selectors at once, and targeting by structural relationship
• Lesson 4, Attribute selectors: matching an element by what its HTML attributes say
• Lesson 5, Pseudo-classes: targeting a state, like being hovered, focused, or checked
• Lesson 6, Pseudo-elements: targeting a part of an element that isn't its own HTML tag
• Lesson 7, Putting it together: styling the accessible signup form from the last course, selector by selector

By the end, you'll be able to look at any piece of a page and write the exact selector that reaches it, no more, no less.