CSS Fundamentals & Selectors

Duration: 60–90 minutes

🎯 What You’ll Learn

What CSS is and how it works with HTML.[web:228][web:231]
The three main ways to add CSS: inline, internal, and external.[web:215][web:219]
The structure of a CSS ruleset: selector, property, and value.[web:215][web:219]
How to target elements using basic selectors (element, class, ID).[web:215][web:216]

📺 Lesson Video

Watch this CSS introduction to understand how CSS connects to your HTML and how rulesets work:

1.1 What Is CSS?

CSS (Cascading Style Sheets) is the language used to style and layout web pages.[web:215][web:228] It controls colors, fonts, spacing, borders, backgrounds, and how elements are positioned on the page.[web:215][web:231]

HTML provides the structure (content and elements), while CSS provides the presentation (look and feel).[web:228][web:231]

/* Example: make all h1 headings blue and centered */
h1 {
  color: #2563eb;
  text-align: center;
}

1.2 Ways to Add CSS to HTML

Inline CSS

CSS written directly in the HTML tag using the style attribute.[web:215][web:231]

<h1 style="color: red; text-align: center;">Hello CSS</h1>

Use sparingly. Inline CSS becomes hard to maintain in real projects.

Internal CSS (in <style>)

CSS written inside a <style> tag in the <head> of the HTML file.[web:215][web:219]

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #16a34a;
    }
  </style>
</head>

External CSS (recommended)

CSS stored in a separate .css file and linked from the HTML page. This is the most scalable and professional approach.[web:215][web:219][web:231]

<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css" />
</head>

/* styles.css */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

h1 {
  color: #2563eb;
}

1.3 CSS Ruleset Anatomy

A CSS ruleset has a selector and one or more declarations (property + value).[web:215][web:219]

selector {
  property: value;
  another-property: another-value;
}

Example:

p {
  color: #334155;
  line-height: 1.6;
}

Selector: p (targets all <p> elements)
Property: color, line-height
Value: #334155, 1.6

1.4 Basic Selectors

Element (Type) Selector

Targets all elements of a specific HTML tag.[web:215][web:228]

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
  color: #4b5563;
}

Class Selector

Targets elements with a specific class attribute. A class can be reused on multiple elements.[web:215][web:216][web:219]

<h2 class="section-title">HTML Basics</h2>
<p class="section-description">Learn to structure pages with HTML.</p>

.section-title {
  color: #1d4ed8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-description {
  color: #4b5563;
}

ID Selector

Targets a single unique element by its id attribute. IDs should be unique per page.[web:215][web:228]

<h1 id="main-heading">Frontend Beginner</h1>

#main-heading {
  font-size: 2.5rem;
  color: #0f172a;
}

Rule of thumb: Prefer class for styling, use id for unique elements, anchors, or JavaScript hooks.

1.5 Grouping and Combining Selectors

Grouping multiple selectors

Apply the same styles to multiple selectors at once by separating them with commas.[web:215][web:219]

h1, h2, h3 {
  font-family: system-ui, sans-serif;
  color: #111827;
}

Descendant selector (basic)

Targets elements inside other elements, for example all <em> inside a paragraph.[web:215][web:228]

p em {
  color: #b91c1c;
  font-style: normal;
  font-weight: bold;
}

1.6 Setting Up Your First styles.css

Create a new file in your project called styles.css.

In your index.html, add:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Frontend Beginner</title>
  <link rel="stylesheet" href="styles.css" />
</head>

Add some base styles in styles.css:

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #f9fafb;
  color: #111827;
}

h1 {
  text-align: center;
  margin-top: 2rem;
}

🧪 Practice Task

Link a styles.css file to your existing HTML pages (home, about, contact).
Use:
- An element selector to style all <p> tags (font size and color).
- A class selector .button-primary to style a link or button.
- An ID selector #hero-title for the main heading on your homepage.
Refresh the browser and confirm the styles are applied correctly.

✅ Lesson Summary

CSS controls how HTML content looks: colors, fonts, spacing, and layout.[web:215][web:228][web:231]
External stylesheets (.css files) are the best way to organize your styles.[web:215][web:219]
CSS rulesets are built from selectors, properties, and values.[web:215][web:219]
Basic selectors include element, class (.class), and ID (#id); use classes for most styling.[web:215][web:216]

Frontend Beginner

Curriculum

CSS Fundamentals & Selectors