Course Notes
Week 2: CSS Fundamentals
CSS Basics & Selectors

CSS Basics & Selectors

Introduction

CSS (Cascading Style Sheets) controls how HTML elements look. While HTML defines the structure and content of a page, CSS defines the presentation - colors, fonts, spacing, layout, and more.

Why CSS?

Before CSS existed (1996), styling was done with HTML attributes like <font color="red">. This was:

  • Messy - style mixed with content
  • Repetitive - same styles repeated everywhere
  • Hard to maintain - changing a color meant editing every page

CSS separates content (HTML) from presentation (CSS), making websites easier to build and maintain.

What CSS Can Do

  • Colors and backgrounds
  • Fonts and text styling
  • Spacing (margins, padding)
  • Layouts (positioning, flexbox, grid)
  • Animations and transitions
  • Responsive designs (different styles for different screen sizes)

CSS Syntax

Every CSS rule follows this pattern:

selector {
  property: value;
}

Breaking It Down 

p {
  color: blue;
  font-size: 16px;
}
PartWhat It IsExample
SelectorWhat to stylep
PropertyWhat aspect to changecolor
ValueWhat to change it toblue
DeclarationProperty + value paircolor: blue;
Declaration blockEverything inside { }{ color: blue; font-size: 16px; }
RuleComplete selector + declaration blockThe entire example above

Syntax Rules

  • Properties and values are separated by a colon :
  • Each declaration ends with a semicolon ;
  • Multiple declarations go inside curly braces { }
  • Whitespace doesn’t matter (but proper formatting helps readability)

Comments 

/* This is a CSS comment */

p {
  color: blue; /* This makes text blue */
}

Three Ways to Add CSS

CSS written directly on an element using the style attribute:

<p style="color: blue; font-size: 18px;">This is blue text.</p>

Pros:

  • Quick for testing
  • Highest specificity (overrides other styles)

Cons:

  • Mixes content with presentation
  • Can’t reuse styles
  • Hard to maintain

Use for: Quick debugging, HTML emails, one-off overrides

CSS written in a <style> tag in the document’s <head>:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: blue;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <p>This is blue text.</p>
  </body>
</html>

Pros:

  • Styles stay with the HTML file
  • Good for single-page sites or prototypes

Cons:

  • Styles can’t be shared between pages
  • Mixes concerns (structure and style in same file)

Use for: Single-page sites, prototyping, specific page overrides

CSS written in a separate .css file and linked to HTML:

styles.css:

p {
  color: blue;
  font-size: 18px;
}

index.html:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="styles.css"
    />
  </head>
  <body>
    <p>This is blue text.</p>
  </body>
</html>

Pros:

  • Complete separation of concerns
  • One file styles multiple pages
  • Browser caches the CSS file (faster loading)
  • Easier to maintain

Cons:

  • Extra HTTP request (minor)

Use for: All real projects - this is the professional standard

The <link> Tag 

<link
  rel="stylesheet"
  href="styles.css"
/>
  • rel="stylesheet" - Tells browser this is a stylesheet
  • href="styles.css" - Path to the CSS file
  • Goes in the <head> section
  • Common file names: styles.css, style.css, main.css

CSS Selectors

Selectors determine which HTML elements your CSS rules apply to.

Element Selector

Selects all elements of a specific type:

p {
  color: gray;
}

h1 {
  font-size: 32px;
}

This styles all <p> and <h1> elements on the page.

Use for: Default styles that apply to all elements of that type

Class Selector

Selects elements with a specific class attribute. Uses a dot (.) prefix:

.highlight {
  background-color: yellow;
}

.large-text {
  font-size: 24px;
}
<p class="highlight">This has a yellow background.</p>
<p class="large-text">This is larger text.</p>
<p class="highlight large-text">This has both styles!</p>

Key points:

  • Class names start with . in CSS (not in HTML)
  • One element can have multiple classes (space-separated)
  • Same class can be used on multiple elements
  • Use lowercase with hyphens: my-class not myClass

Use for: Reusable styles applied to multiple elements

ID Selector

Selects the element with a specific ID. Uses a hash (#) prefix:

#main-title {
  color: navy;
  font-size: 48px;
}
<h1 id="main-title">Welcome to My Site</h1>

Key points:

  • ID names start with # in CSS (not in HTML)
  • Each ID should be unique - only one element per ID on a page
  • Higher specificity than classes

Use for: Unique elements, JavaScript hooks, anchor links

Class vs ID: When to Use Each

ClassID
ReusableUnique
Multiple elementsOne element per page
Lower specificityHigher specificity
Preferred for stylingBetter for JavaScript/anchors
Best Practice: Use classes for styling, IDs for JavaScript and anchor links.

Selector Comparison

Selector TypeCSS SyntaxHTML SyntaxExample
Elementp<p>Style all paragraphs
Class.classnameclass="classname"Style specific elements
ID#idnameid="idname"Style one unique element

Combining Selectors

Grouping (Comma)

Apply the same styles to multiple selectors:

h1,
h2,
h3 {
  color: navy;
  font-family: Georgia, serif;
}

This is equivalent to writing three separate rules.

Descendant Selector (Space)

Select elements that are inside other elements:

nav a {
  color: white;
  text-decoration: none;
}

This selects <a> elements that are inside <nav> elements (at any depth).

<nav>
  <a href="/">Home</a>
  <!-- Styled -->
  <a href="/about">About</a>
  <!-- Styled -->
</nav>

<a href="/other">Other</a>
<!-- NOT styled -->

Combining Class and Element 

p.intro {
  font-size: 20px;
}

This selects <p> elements that ALSO have the class intro.

<p class="intro">This is styled.</p>
<!-- Styled -->
<p>This is not.</p>
<!-- NOT styled -->
<div class="intro">Nor this.</div>
<!-- NOT styled (not a p) -->

The Cascade

CSS stands for Cascading Style Sheets. “Cascade” refers to how styles flow down and combine, with some styles overriding others.

Where Styles Come From (Priority Order)

  1. Browser defaults - Built-in styles (lowest priority)
  2. External stylesheets - Your .css files
  3. Internal styles - <style> tag in HTML
  4. Inline styles - style="" attribute (highest priority)

Later sources override earlier sources.

When Styles Conflict 

p {
  color: blue;
}

p {
  color: red;
}

The text will be red because the second rule comes later.

Specificity

When multiple rules target the same element, specificity determines which wins. More specific selectors override less specific ones.

Specificity Hierarchy

From lowest to highest:

  1. Element selectors (p, h1, div)
  2. Class selectors (.highlight, .nav-link)
  3. ID selectors (#main-title, #header)
  4. Inline styles (style="" attribute)

A Simple Mental Model

Selector Type“Points”
Element1
Class10
ID100
Inline1000

Higher points win. (This is simplified but works for most cases.)

Examples 

p {
  color: blue;
} /* 1 point */
.intro {
  color: green;
} /* 10 points - wins over element */
#main {
  color: red;
} /* 100 points - wins over class */
<p
  class="intro"
  id="main"
>
  What color am I?
</p>
<!-- Answer: RED (ID has highest specificity) -->

When Specificity Is Equal

If two rules have the same specificity, the last one wins:

.highlight {
  color: yellow;
}
.highlight {
  color: orange;
} /* This one wins */

Avoid !important 

p {
  color: blue !important; /* DON'T DO THIS */
}

!important overrides everything, but:

  • Makes debugging difficult
  • Creates specificity “wars”
  • Hard to override later

Only use as a last resort (like overriding third-party styles).

Basic CSS Properties

Here are some common properties to get started:

Text Color 

p {
  color: blue;
  color: #0066cc;
  color: rgb(0, 102, 204);
}

Background Color 

div {
  background-color: lightgray;
  background-color: #f0f0f0;
}

Font Size 

p {
  font-size: 16px;
  font-size: 1.2em;
  font-size: 1rem;
}

For now, use px (pixels). We’ll cover other units later.

Font Family 

body {
  font-family: Arial, Helvetica, sans-serif;
}

Always provide fallbacks in case the first font isn’t available.

Text Alignment 

h1 {
  text-align: center;
}

p {
  text-align: left; /* default */
  text-align: right;
  text-align: justify;
}

Common Mistakes

Using = instead of :

/* Wrong */
p {
  color = blue;
}

/* Correct */
p {
  color: blue;
}

Forgetting semicolons

/* Wrong - second property won't work */
p {
  color: blue
  font-size: 16px;
}

/* Correct */
p {
  color: blue;
  font-size: 16px;
}

Using dot/hash in HTML

<!-- Wrong -->
<p class=".highlight">Text</p>
<h1 id="#main">Title</h1>

<!-- Correct -->
<p class="highlight">Text</p>
<h1 id="main">Title</h1>

The dot (.) and hash (#) are only used in CSS, not in HTML attributes.

Misspelling property names

/* Wrong */
p {
  colour: blue; /* British spelling won't work */
  font-colour: blue; /* Made-up property */
}

/* Correct */
p {
  color: blue;
}

CSS properties use American English spellings.

Key Takeaways

🎯
  • CSS controls how things look; HTML controls what things are
  • Use external stylesheets for all real projects
  • CSS syntax: selector { property: value; }
  • Three selector types: element (p), class (.classname), ID (#idname)
  • Use classes for styling, IDs for JavaScript/anchors
  • Specificity determines which styles win: ID > Class > Element
  • When specificity is equal, last rule wins
  • Avoid !important - it makes CSS hard to maintain

Additional Resources

Official Documentation

MDN: CSS Basics
Great starting point
MDN: CSS Selectors
Complete selector reference

Interactive Learning

CSS Diner
Learn selectors through a game
freeCodeCamp CSS
Free interactive course

References

W3Schools CSS Tutorial
Examples with try-it editor
CSS-Tricks
Articles and guides on CSS techniques
Specificity Calculator
Check selector specificity

Tools

  • Browser DevTools (F12) - Inspect and modify CSS in real-time
  • VS Code - Code editor with CSS autocomplete and color preview
CSS Box Model, Colors & Typography