Introduction to CSS

CSS (Cascading Style Sheets) controls how HTML elements look on screen — colors, fonts, spacing, layout, and animations. CSS is what transforms plain HTML into beautiful web pages.

There are three ways to add CSS:

Inline — style attribute directly on the element (avoid, hard to maintain)
Internal — <style> block inside <head> (for single pages only)
External — separate .css file linked with <link> (recommended)

/* External CSS syntax: selector { property: value; } */

/* Element selector — all <p> elements */
p {
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Class selector (reusable, starts with .) */
.highlight {
  background-color: #fff3cd;
  padding: 4px 8px;
  border-radius: 4px;
}

/* ID selector (unique per page, starts with #) */
#main-title {
  font-size: 32px;
  text-align: center;
  color: #1a1a2e;
}

/* Group selector — apply same rule to multiple elements */
h1, h2, h3 {
  font-family: Georgia, serif;
  font-weight: 700;
}

💡

The word "Cascading" means styles flow downward: later rules override earlier ones with the same specificity. More specific selectors always win over less specific ones.

How to link an external stylesheet:

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

Watch & Learn

A recommended video to watch alongside this chapter.

More “Introduction to CSS” videos on YouTube

CSS Selectors