Stage 2: Frontend Fundamentals

CSS · Lesson 01

CSS Basics

How stylesheets connect to HTML, selectors, cascade and specificity.

CSS3 min readFree lesson

CSS (Cascading Style Sheets) is the language that determines the appearance of HTML elements.
This lesson covers how to connect CSS to HTML, along with selectors, specificity, and the concept of inheritance.

1. Ways to Connect CSS

1-1. Inline

Written directly in the style attribute of an HTML tag.

<p style="color: red; font-size: 18px;">Inline style</p>
  • Has the highest specificity.
  • Cannot be reused and is hard to maintain. Not recommended.

1-2. Internal

Written with a <style> tag inside the <head> tag.

<head>
  <style>
    p { color: blue; }
  </style>
</head>
  • Applies only to that HTML file.
  • Suitable for small projects or tests.

1-3. External — Recommended

Create a separate .css file and connect it with a <link> tag.

<head>
  <link rel="stylesheet" href="style.css">
</head>
  • The same CSS can be reused across multiple HTML files.
  • Easiest to maintain. This is the standard approach in practice.

2. Selector

The syntax that specifies which HTML elements a style applies to.

Selector type Example Description
Tag selector p { } Selects every <p> tag
Class selector .card { } Selects elements with class="card"
ID selector #header { } Selects the element with id="header"
Descendant selector div p { } Selects every p inside a div
Child selector ul > li { } Selects only the direct children li of ul
Sibling selector h1 + p { } Selects the p immediately after an h1
Universal selector * { } Selects every element

Pseudo-class Selector

a:hover   { color: red; }    /* when the mouse is over the link */
a:visited { color: purple; } /* a visited link */
li:first-child { color: blue; } /* the first child element */
li:last-child  { color: green; } /* the last child element */
li:nth-child(2) { color: orange; } /* the second child element */

3. Specificity

When several styles conflict on the same element, one of them is applied according to its specificity.

Inline style > ID selector > Class selector > Tag selector
Selector Score
Inline (style="") 1000 points
ID (#id) 100 points
Class (.class), pseudo-class (:hover) 10 points
Tag (p, div) 1 point 
/* Example: all applied to the same <p id="title" class="text"> */
p           { color: black; }   /* 1 point */
.text       { color: blue; }    /* 10 points */
#title      { color: red; }     /* 100 points → this color is applied */

Using !important overrides all specificity, but abusing it makes maintenance difficult.

4. Inheritance

Some CSS properties of a parent element are automatically inherited by its child elements.

body {
  font-family: 'Arial', sans-serif; /* inherited by every child */
  color: #333;
}

Inherited properties: color, font-family, font-size, line-height, text-align, and others
Non-inherited properties: margin, padding, border, background, width, and others

5. Basic Text Properties

p {
  color: #333333;          /* text color */
  font-size: 16px;         /* text size */
  font-weight: bold;       /* text weight: normal, bold, 100~900 */
  text-align: center;      /* alignment: left, center, right, justify */
  text-decoration: none;   /* removes the underline (often used on links) */
  line-height: 1.6;        /* line spacing */
}

Example Files

Open index.html in the examples/ folder in your browser to see the various selectors in action.

Assignment

Read assignment.md and complete Build Your Own Badge.

Example files

Complete, runnable files used in this lesson. Copy them into your project and experiment.

index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Basics — Selector Practice</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header id="main-header">
    <h1>CSS Selector Practice</h1>
    <p>See the various selectors with your own eyes.</p>
  </header>

  <main>

    <!-- Tag selector -->
    <section class="section">
      <h2>1. Tag Selector</h2>
      <p>This paragraph is styled by the <strong>tag selector (p)</strong>.</p>
      <p>Every p tag shares the same style.</p>
    </section>

    <!-- Class selector -->
    <section class="section">
      <h2>2. Class Selector</h2>
      <p class="highlight">This sentence has the <code>.highlight</code> class applied.</p>
      <p class="highlight warning">This sentence has both the <code>.highlight</code> and <code>.warning</code> classes applied.</p>
      <p>This sentence keeps the default style without any class.</p>
    </section>

    <!-- ID selector -->
    <section class="section">
      <h2>3. ID Selector</h2>
      <p id="special">This sentence has the <code>#special</code> ID selector applied.</p>
      <p>An ID should be used only once per page.</p>
    </section>

    <!-- Descendant/child selector -->
    <section class="section">
      <h2>4. Descendant &amp; Child Selectors</h2>
      <div class="parent">
        <p>This p is a direct child of <code>.parent</code> (the child selector applies).</p>
        <div>
          <p>This p is a descendant of <code>.parent</code> but not a direct child (the descendant selector applies).</p>
        </div>
      </div>
    </section>

    <!-- Pseudo-class selector -->
    <section class="section">
      <h2>5. Pseudo-class Selector</h2>
      <ul class="pseudo-list">
        <li>First item (first-child)</li>
        <li>Second item</li>
        <li>Third item (nth-child(3))</li>
        <li>Last item (last-child)</li>
      </ul>
      <p><a href="#">Hover over me (:hover effect)</a></p>
    </section>

    <!-- Specificity -->
    <section class="section">
      <h2>6. Specificity</h2>
      <p class="priority-demo" id="priority-id">
        A tag, a class, and an ID selector all apply to this sentence.<br>
        Which color do you see? (The ID selector wins)
      </p>
    </section>

  </main>

  <footer id="main-footer">
    <p>CSS Basics Practice Example &copy; 2025</p>
  </footer>

</body>
</html>
style.cssCSS
/* =============================================
   CSS Basics — Selector Practice Example
   ============================================= */

/* Universal selector: resets the default margin of every element */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Tag selector: applies to the whole body */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #f5f5f5;
  line-height: 1.7;
}

/* ID selector: #main-header */
#main-header {
  background-color: #2c3e50;
  color: white;
  padding: 40px 20px;
  text-align: center;
}

#main-header h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}

/* Tag selector: every h2 */
h2 {
  font-size: 1.3rem;
  color: #2c3e50;
  margin-bottom: 12px;
  border-left: 4px solid #3498db;
  padding-left: 10px;
}

/* Tag selector: every p */
p {
  margin-bottom: 10px;
}

/* Class selector: .section */
.section {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  margin: 16px auto;
  max-width: 800px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Class selector: .highlight */
.highlight {
  background-color: #fff3cd;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: bold;
}

/* Multiple classes: .highlight.warning */
.highlight.warning {
  background-color: #f8d7da;
  color: #721c24;
  border-left: 3px solid #f5c6cb;
}

/* ID selector: #special */
#special {
  color: #8e44ad;
  font-style: italic;
  font-size: 1.1rem;
}

/* Descendant selector: every p inside .parent */
.parent p {
  color: #27ae60;
  background-color: #eafaf1;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* Child selector: only the direct child p of .parent */
.parent > p {
  border-left: 4px solid #27ae60;
  font-weight: bold;
}

/* Pseudo-class: list items */
.pseudo-list {
  list-style: none;
  padding: 0;
}

.pseudo-list li {
  padding: 8px 12px;
  margin-bottom: 4px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

/* Pseudo-class: first child */
.pseudo-list li:first-child {
  background-color: #d5f5e3;
  color: #1e8449;
  font-weight: bold;
}

/* Pseudo-class: last child */
.pseudo-list li:last-child {
  background-color: #fde8d8;
  color: #a04000;
  font-weight: bold;
}

/* Pseudo-class: nth child */
.pseudo-list li:nth-child(3) {
  background-color: #d6eaf8;
  color: #1a5276;
}

/* Pseudo-class: default link */
a {
  color: #2980b9;
  text-decoration: none;
  font-weight: bold;
}

/* Pseudo-class: link hover */
a:hover {
  color: #e74c3c;
  text-decoration: underline;
}

/* Specificity demo */
/* Tag selector: 1 point */
p.priority-demo {
  color: green; /* 11 points combined with the class */
}

/* ID selector: 100 points → the final winner */
#priority-id {
  color: #e74c3c;
  font-size: 1rem;
  padding: 12px;
  background-color: #fef9e7;
  border: 2px dashed #f39c12;
  border-radius: 4px;
}

/* ID selector: #main-footer */
#main-footer {
  background-color: #2c3e50;
  color: #aab7b8;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  font-size: 0.9rem;
}

/* Code tag style */
code {
  background-color: #ecf0f1;
  color: #c0392b;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

Assignment

Lesson 01 Assignment — Build Your Own Badge

Goal

Using CSS class selectors and ID selectors, build 3 badges that each have a different style.

Requirements

1. HTML File (index.html)

  • Create index.html and style.css in the same folder, and connect them with an external CSS file.
  • Build three badges following the structure below.
<div class="badge-container">
  <span class="badge badge-success">Success</span>
  <span class="badge badge-warning">Warning</span>
  <span id="badge-special" class="badge">Special</span>
</div>

2. CSS File (style.css)

Write styles that satisfy all of the following conditions.

Selector What to apply
body Background color, font, and centered alignment
.badge Common style for every badge (padding, border-radius, font-weight, etc.)
.badge-success A green badge
.badge-warning A yellow/orange badge
#badge-special A special badge in purple or blue (using an ID selector)
.badge:hover An effect that slightly enlarges the badge or changes its color on hover

3. Extra Challenge (Optional)

  • Add text below the badges that explains which selector was used to create each badge.
  • Try making a different color apply when a badge is clicked (a:active).
  • Use the sibling selector (+) to add a left margin to the second badge only.

Files to Submit

my-folder/
├── index.html
└── style.css

Checklist

  • Did not use inline CSS
  • Connected the external CSS file with a <link> tag
  • A common .badge class exists
  • The 3 badges have different colors
  • Used the #badge-special ID selector
  • Applied the :hover pseudo-class
  • Opens in the browser without errors

Hint

/* Hint for the default badge shape */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px; /* rounded corners */
  font-size: 0.85rem;
}

If you are curious about the answer, take a look at the solution/ folder.

Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Build Your Own Badge — Assignment Solution</title>
  <!-- Link the external CSS file (no inline CSS used) -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Build Your Own Badge</h1>
  <p class="subtitle">Three badges built with class selectors and ID selectors</p>

  <!-- Badge container -->
  <div class="badge-container">

    <!-- .badge (shared) + .badge-success (green badge) -->
    <span class="badge badge-success">Success</span>

    <!-- .badge (shared) + .badge-warning (warning badge) -->
    <span class="badge badge-warning">Warning</span>

    <!-- .badge (shared) + #badge-special (special badge via ID selector) -->
    <span id="badge-special" class="badge">Special</span>

  </div>

  <!-- Description of each badge -->
  <div class="info-container">

    <div class="info-card">
      <h3>.badge-success</h3>
      <p>This is a green badge built with a class selector.<br>
         It combines the shared style (.badge) with the green color (.badge-success).</p>
    </div>

    <div class="info-card">
      <h3>.badge-warning</h3>
      <p>This is a warning badge built with a class selector.<br>
         The sibling selector (+) adds a left margin after the first badge.</p>
    </div>

    <div class="info-card">
      <h3>#badge-special</h3>
      <p>This is a special badge built with an ID selector.<br>
         An ID selector is used for the single unique element on a page.</p>
    </div>

  </div>

</body>
</html>
style.cssCSS
/* =============================================
   Build Your Own Badge — Assignment Solution
   Selectors used: tag, class, ID, and pseudo-class
   ============================================= */

/* Universal selector: resets the default margin and box size */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Tag selector: sets the background and font for the whole page */
body {
  font-family: 'Segoe UI', Arial, sans-serif; /* default font */
  background-color: #f0f2f5;                  /* light gray background */
  color: #333;                                /* default text color */
  text-align: center;                         /* centers the content */
  padding: 40px 20px;                         /* top, bottom, left, right spacing */
}

/* Tag selector: heading style */
h1 {
  font-size: 2rem;          /* heading size */
  color: #2c3e50;           /* dark navy */
  margin-bottom: 8px;       /* bottom margin */
}

/* Class selector: subtitle */
.subtitle {
  color: #777;              /* gray text */
  font-size: 0.95rem;       /* slightly smaller size */
  margin-bottom: 40px;      /* spacing from the badges */
}

/* =============================================
   Badge container: arranges the badges in a row
   ============================================= */
.badge-container {
  display: flex;            /* horizontal layout */
  justify-content: center;  /* centered horizontally */
  align-items: center;      /* centered vertically */
  gap: 12px;                /* space between badges */
  margin-bottom: 50px;      /* bottom margin */
}

/* =============================================
   .badge — shared style for every badge (class selector)
   Every badge carries this class as well.
   ============================================= */
.badge {
  display: inline-block;    /* inline block: width/height can be applied */
  padding: 6px 16px;        /* 6px top/bottom, 16px left/right inner spacing */
  border-radius: 20px;      /* heavily rounded corners (pill shape) */
  font-size: 0.9rem;        /* text size */
  font-weight: 700;         /* bold text */
  letter-spacing: 0.5px;    /* slightly wider letter spacing */
  cursor: pointer;          /* turns the mouse cursor into a hand */
  transition: transform 0.2s, box-shadow 0.2s; /* hover animation */
}

/* =============================================
   Pseudo-class: when the mouse is over a badge
   Applied to every badge (.badge:hover)
   ============================================= */
.badge:hover {
  transform: scale(1.1);                       /* enlarges by 10% */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  /* adds a shadow */
}

/* =============================================
   .badge-success — green badge (class selector)
   Used together with .badge: <span class="badge badge-success">
   ============================================= */
.badge-success {
  background-color: #27ae60; /* green background */
  color: white;               /* white text */
  border: 2px solid #1e8449; /* slightly deeper green border */
}

/* =============================================
   .badge-warning — warning badge (class selector)
   Used together with .badge: <span class="badge badge-warning">
   ============================================= */
.badge-warning {
  background-color: #f39c12; /* orange background */
  color: white;               /* white text */
  border: 2px solid #d68910; /* slightly deeper orange border */
}

/* =============================================
   #badge-special — special badge (ID selector)
   An ID selector has higher specificity, so it outweighs .badge.
   Usage: <span id="badge-special" class="badge">
   ============================================= */
#badge-special {
  background-color: #8e44ad; /* purple background */
  color: white;               /* white text */
  border: 2px solid #6c3483; /* deeper purple border */
  font-size: 1rem;            /* overrides the text size via the ID selector */
}

/* =============================================
   Sibling selector: the second badge that follows the first badge
   .badge + .badge → applied to .badge-warning
   ============================================= */
.badge + .badge {
  margin-left: 4px; /* extra spacing from the sibling selector */
}

/* =============================================
   Description card area
   ============================================= */
.info-container {
  display: flex;              /* horizontal layout */
  justify-content: center;    /* centered */
  gap: 20px;                  /* space between cards */
  flex-wrap: wrap;            /* wraps onto a new line on narrow screens */
  max-width: 900px;           /* maximum width limit */
  margin: 0 auto;             /* centers the block with automatic left/right margins */
}

/* Class selector: description card */
.info-card {
  background-color: white;           /* white background */
  border-radius: 8px;                /* rounded corners */
  padding: 20px;                     /* inner spacing */
  width: 250px;                      /* card width */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* subtle shadow */
  text-align: left;                  /* left-aligned text */
}

/* Descendant selector: h3 inside .info-card */
.info-card h3 {
  font-size: 1rem;            /* heading size */
  color: #2c3e50;             /* dark color */
  margin-bottom: 10px;        /* bottom margin */
  font-family: 'Courier New', monospace; /* code-like font */
}

/* Descendant selector: p inside .info-card */
.info-card p {
  font-size: 0.85rem;         /* small text */
  color: #555;                /* gray */
  line-height: 1.6;           /* line spacing */
}

Learn this lesson with a mentor

Work through the Build Your Homepage series on your own, or join a guided cohort at our Pitampura campus and online.

Enroll nowStage overview
Call NowEnroll Now