CSS Fundamentals

CSS (Cascading Style Sheets) controls how HTML elements look. It separates presentation from structure — HTML defines content, CSS defines appearance.

What is CSS?

Every web page is built from three layers, and each one has a different job:

• HTML = Structure (what things are)
• CSS = Styling (how things look)
• JavaScript = Behavior (what things do)

Keeping them separate means you can restyle a whole page without touching a single line of its HTML. That separation is the whole point of CSS.

CSS Syntax

Every CSS rule has a selector and declarations:

/* h1 is the element you define for styling */
h1 {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 24px;
}

• h1 — Selector (targets the element)
• color — Property (what to change)
• blue — Value (what to change it to)

The spaces inside {} do not matter — you can write the rule on one line or twenty. Two things do matter: every declaration ends with a ;, and only the last one in a block may leave it off.

One thing to remember: property names are written in lowercase (font-size, not FONT-SIZE), but class and ID names are case-sensitive, so .Header and .header are two different selectors.

Three Ways to Add CSS

CSS can go in three places. They all work and the browser applies all three — the only difference is how easy the styles are to find, reuse, and change later.

1. External Stylesheet (Recommended)

Link a separate CSS file:

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

/* styles.css */
h1 {
  color: blue;
}

rel="stylesheet" is what tells the browser this file contains styles, and href is where to find it. Both must sit in <head>.

Benefits:

• Single file for entire site
• Cached by browser (faster)
• Easy to maintain

2. Internal Style Block

Add CSS in the <head>:

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

<body>
  <h1>Heading here</h1>
</body>

The <style> block belongs in <head>, never in <body>. The rules inside it work exactly like the ones in an external file.

Use for:

• Single-page sites
• Page-specific styles

3. Inline Styles

Add CSS directly to elements:

<h1 style="color: blue;">Hello</h1>

Everything goes into the style attribute on the tag itself. Quick for a one-off tweak, but it is the least flexible option.

Avoid when possible:

• Hard to maintain
• Overrides other styles
• Mixes structure and presentation

One thing to remember: when two rules set the same property, the one the browser reads last wins. That is the “cascading” part of Cascading Style Sheets, and choosing which rule wins is decided by specificity — covered in its own lesson.

Comments

Add comments to explain your code. A comment starts with /* and ends with */, and you can put one anywhere — on its own line or at the end of a declaration. The browser skips it completely.

/* This is a CSS comment */

h1 {
  /* Blue color for headings */
  color: blue;
}

Comments change nothing on the page, so use them to explain why a value is there, not to describe what the line already says out loud.

Basic Selectors

A selector is the part of a rule that says which elements the style applies to. There are three basic kinds: by tag name, by class, and by ID.

Element Selector

Targets all elements of a type:

p {
  color: black;
}

h1 {
  font-size: 32px;
}

This is the widest selector there is. Every <p> on the page matches, including ones you did not write yourself, so element selectors suit rules you want everywhere — a base font size, say.

Class Selector

Targets elements with a class attribute:

<p class="highlight">Yellow background</p>
<p>Normal paragraph</p>

.highlight {
  background-color: yellow;
}

The .highlight selector matches the value of the class attribute, so only the first paragraph is affected. You can reuse the same class on as many elements as you like, which is what makes classes the workhorse of CSS.

Note: Classes start with .

ID Selector

Targets a single element with an ID:

<div id="header">Header content</div>

#header {
  background-color: #333;
}

An ID must be unique on the page — only one element can carry id="header" — and the # in the selector matches that one element.

Note: IDs start with #

Note: Use class and not id to specify the element for the style, because id is not designed for this case.

id is used to specify an element in JavaScript (we will cover this in the JavaScript lesson).

Properties and Values

A property is the thing you want to change and a value is what you change it to. Properties are a fixed, known list — color always means text color, never background — but you can use the same property as many times as you like with different values.

Common Properties

This is just a brief overview, but we will cover everything in detail in the upcoming lessons.

/* Text */
h1 {
  color: blue;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

/* Background */
body {
  background-color: #f5f5f5;
  background-image: url('bg.jpg');
}

/* Box Model */
div {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
}

/* Width/Height */
img {
  width: 100%;
  height: auto;
}

Each property only accepts certain kinds of value: color wants a color, font-size wants a length, text-align wants a keyword like center. If you give it the wrong one, the browser drops that single declaration and keeps the rest of the rule — so one typo rarely breaks the whole page.

Value Types

Values are not written the same way for every property. A color can be a word, a hex code, or a function call. A length can be pixels, em, rem, a percentage, or viewport units. All of these forms are valid, and the browser ends up with the same result — pick the one that best fits the job.

Colors

/* Named colors */
color: red;

/* Hexadecimal */
color: #ff0000;
color: #f00;

/* RGB */
color: rgb(255, 0, 0);

/* RGBA (with opacity) */
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);

How each one works:

• Named — Fixed words like red or rebeccapurple. Fastest to type, but limited to about 140 shades, so use them for quick demos rather than a real palette.
• Hex — # followed by red, green, and blue as two digits each, from 00 to ff. Each pair is one channel, so #ff0000 is full red with no green or blue. When two digits repeat you can shorten them: #f00 is the same color.
• RGB — rgb() takes the same three channels as numbers from 0 to 255. Same colors as hex, just a different notation — handy when the value comes from JavaScript.
• RGBA — rgb() plus a fourth value from 0 to 1 for transparency. 0 is fully invisible, 1 is fully solid.
• HSL — Hue (0–360 on a color wheel), saturation, and lightness. Handy when you want to darken or lighten the same hue without guessing new numbers.

One thing to remember: transparency here is a value inside rgba(), not a property of its own. Writing opacity: 0.5 on an element fades the element and everything inside it, background included.

Lengths

/* Pixels */
font-size: 16px;

/* Em (relative to parent) */
font-size: 1.5em;

/* Rem (relative to root) */
font-size: 1.5rem;

/* Percentage */
width: 50%;

/* Viewport units */
width: 100vw;
height: 100vh;

How each one works:

• px — A fixed dot size. It stays exactly the same regardless of the reader’s settings, which makes it predictable but not flexible.
• em — Relative to the font-size of the element itself. It scales when the reader zooms or a parent font size changes, and because it nests, 1.5em inside 1.5em compounds.
• rem — Relative to the font-size on the root html element. It never nests, so it is much easier to predict.
• % — Relative to the parent. width: 50% means half of the parent’s width, not half of the screen.
• vw / vh — One percent of the viewport width or height, so 100vw is the full width of the window and 100vh is the full visible height.

One thing to remember: prefer rem for font sizes so your page follows the reader’s browser settings. And 0 is the one length you can write with no unit at all — margin: 0 is complete.

Complete Example

Here’s a complete example of an HTML file with its CSS in a <style> block. Everything you have learned so far is used here: a reset, element selectors, a class, and a :hover state.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Fundamentals</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* Body styling */
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #f5f5f5;
      }

      /* Headings */
      h1 {
        font-size: 2.5rem;
        color: #2c3e50;
        margin-bottom: 1rem;
      }

      h2 {
        font-size: 2rem;
        color: #34495e;
        margin-bottom: 0.75rem;
      }

      /* Paragraphs */
      p {
        font-size: 1rem;
        margin-bottom: 1rem;
        line-height: 1.8;
      }

      /* Links */
      a {
        color: #3498db;
        text-decoration: none;
      }

      a:hover {
        color: #2980b9;
        text-decoration: underline;
      }

      /* Buttons */
      .button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      .button:hover {
        background-color: #2980b9;
      }

      /* Container */
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CSS Fundamentals</h1>
      <p>
        CSS controls how HTML elements look.
        <a href="#">Learn more</a>
      </p>
      <button class="button">Click Me</button>
    </div>
  </body>
</html>

What this means:

• The * reset clears the browser’s default margins and padding so every element starts from the same baseline. We touch that in the box model lesson.
• box-sizing: border-box makes padding and border count inside an element’s declared width. Without it, width: 100% plus padding overflows its parent.
• .container centers the page with max-width: 1200px and margin: 0 auto — auto splits the leftover space evenly on both sides.
• .button:hover is the same class selector plus :hover, applied only while the pointer is over it. Pseudo-classes get their own lesson later.

Best Practices

1. Use external stylesheets — Easier to maintain
2. Use classes over IDs — More reusable
3. Use meaningful names — .nav-item not .blue
4. Keep it organized — Group related styles
5. Use comments — Explain complex styles

Common Mistakes

1. Missing semicolon — Each declaration needs ;
2. Missing curly braces — Properties must be inside {}
3. Using IDs for styling — Use classes instead
4. Inline styles everywhere — Hard to maintain
5. Not using box-sizing — Causes layout issues