Introduction to CSS

CSS (Cascading Style Sheets) controls how HTML looks: colors, fonts, spacing, layout, and animation. HTML is the structure; CSS is the style.

Anatomy of a CSS rule

h1 {
  color: crimson;
  font-size: 40px;
}

• h1 is the selector: which elements to style.
• Everything between the curly braces is the declaration block.
• color: crimson; is a declaration: a property (color) and a value (crimson), separated by a colon and ending with a semicolon.

<h1>Hello, CSS!</h1>
<p>CSS makes the web beautiful.</p>

Try changing crimson to teal, or 40px to 60px.

Three ways to add CSS

1. External stylesheet (recommended)

Put your CSS in a separate file and link it in the <head>:

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

One file can style your whole website, and the browser caches it.

2. Internal stylesheet

Use a <style> element in the <head>:

<style>
  body { background: #fafafa; }
</style>

3. Inline styles

Use the style attribute directly on an element:

<p style="color: purple;">Purple text</p>

The "cascade"

What happens when two rules style the same element? CSS decides with the cascade, using three ideas:

1. Importance: declarations marked !important win (use this rarely).
2. Specificity: more specific selectors win (an id beats a class, which beats a tag name).
3. Order: if everything else is equal, the rule that comes last wins.

p { color: blue; }
p { color: green; } /* this one wins: it comes later */

Inheritance

Some properties, like color and font-family, are inherited by child elements. Set a font on body and every element inside uses it.

body {
  font-family: system-ui, sans-serif;
  color: #222;
}

Comments

/* This is a CSS comment */

Summary

• A CSS rule is a selector plus a block of property: value; declarations.
• Prefer external stylesheets linked with <link>.
• The cascade decides which rule wins: importance, specificity, then order.
• Some properties are inherited by child elements.