Week 04: CSS Fundamentals

Unit II - Cascading Style Sheets

Welcome to the visual side of web development!

What You'll Learn

  • CSS syntax and how styles work
  • Selectors: targeting HTML elements
  • Colors, backgrounds, and text styling
  • The cascade and specificity

The Painting Analogy

If HTML is the structure of a house (walls, rooms, doors), CSS is the interior design - the paint colors, wallpaper, furniture arrangement, and decorations that make it beautiful and functional!

Press → or click Next to continue

What is CSS?

CSS = Cascading Style Sheets

  • Cascading: Styles flow down and can be overridden
  • Style: Visual presentation of elements
  • Sheets: Collections of style rules

Why CSS?

  • Separation of content (HTML) from presentation (CSS)
  • Consistent styling across multiple pages
  • Easier maintenance and updates
  • Better accessibility and performance

Brief History

  • 1996: CSS1 released
  • 1998: CSS2 added positioning, z-index
  • 2011+: CSS3 modules (animations, flexbox, grid)
  • Today: CSS is constantly evolving!

Industry Note

Before CSS, styling was done with HTML attributes like <font> and bgcolor. Imagine changing colors on 100 pages one by one!

CSS Syntax Anatomy

selector {
    property: value;
}

Example

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}
  • Selector: h1 - what to style
  • Property: color - what aspect to change
  • Value: blue - the new value
  • Declaration: property + value pair
  • Declaration Block: everything in { }

Rules to Remember

  • Properties and values separated by :
  • Each declaration ends with ;
  • Multiple declarations in one block
  • CSS is case-insensitive (but use lowercase)
  • Whitespace is ignored (use for readability)

Common Mistake

Forgetting the semicolon! The browser will ignore that declaration and possibly the next one too.

Three Ways to Add CSS

1. Inline CSS

<p style="color: red; font-size: 16px;">
    Red text
</p>

Use: Quick tests, email templates

Avoid: Regular development (hard to maintain)

2. Internal CSS

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

Use: Single-page styles, prototyping

3. External CSS (Recommended!)

<!-- In HTML -->
<head>
    <link rel="stylesheet"
          href="styles.css">
</head>

/* In styles.css */
p { color: green; }

Use: All production websites

Why External CSS?

  • Cached by browser = faster loading
  • One file styles entire website
  • Easy to maintain and update
  • Separation of concerns

CSS Selectors - Part 1

Targeting Elements

Selector Example What it Selects
Element p { } All <p> elements
Class .intro { } Elements with class="intro"
ID #header { } Element with id="header"
Universal * { } All elements
Grouping h1, h2, h3 { } All h1, h2, and h3 elements

Class vs ID

  • Class (.) - Reusable, multiple elements
  • ID (#) - Unique, one element per page

Think: Class = "students in CSE" (many), ID = "Roll number 101" (one)

<!-- HTML -->
<p class="highlight">One</p>
<p class="highlight">Two</p>
<p id="special">Unique</p>

/* CSS */
.highlight { color: yellow; }
#special { color: red; }

CSS Selectors - Part 2

Combinator Selectors

Combinator Example What it Selects
Descendant (space) div p { } All <p> inside <div> (any level)
Child (>) div > p { } Direct <p> children of <div>
Adjacent Sibling (+) h1 + p { } First <p> immediately after <h1>
General Sibling (~) h1 ~ p { } All <p> siblings after <h1>

Visual Example

<div>
    <p>Direct child</p>
    <section>
        <p>Nested (descendant)</p>
    </section>
</div>
<p>Sibling</p>

Matching Rules

/* Both paragraphs */
div p { color: blue; }

/* Only "Direct child" */
div > p { color: red; }

/* Only "Sibling" */
div + p { color: green; }

Colors in CSS

Color Formats

/* Named Colors (140+) */
color: red;
color: dodgerblue;
color: coral;

/* Hexadecimal (#RRGGBB) */
color: #ff0000;  /* red */
color: #00ff00;  /* green */
color: #0000ff;  /* blue */
color: #333;     /* shorthand for #333333 */

/* RGB / RGBA */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);  /* 50% transparent */

/* HSL / HSLA */
color: hsl(0, 100%, 50%);     /* red */
color: hsla(0, 100%, 50%, 0.5);

Understanding Hex

#RRGGBB - Two digits each for Red, Green, Blue

Range: 00 (none) to FF (full)

  • #000000 = Black
  • #ffffff = White
  • #ff0000 = Pure Red

Color Properties

  • color - Text color
  • background-color - Background
  • border-color - Borders

Tip: Use browser DevTools color picker to find the perfect color!

Text Styling

Font Properties

/* Font Family */
font-family: Arial, sans-serif;
font-family: 'Times New Roman', serif;
font-family: 'Courier New', monospace;

/* Font Size */
font-size: 16px;
font-size: 1.2rem;
font-size: 1.5em;

/* Font Weight */
font-weight: normal;  /* 400 */
font-weight: bold;    /* 700 */
font-weight: 600;

/* Font Style */
font-style: italic;
font-style: normal;

Text Properties

/* Alignment */
text-align: left;
text-align: center;
text-align: right;
text-align: justify;

/* Decoration */
text-decoration: underline;
text-decoration: line-through;
text-decoration: none;  /* remove underline */

/* Transform */
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

/* Spacing */
letter-spacing: 2px;
word-spacing: 5px;
line-height: 1.6;

Font Stack Best Practice

font-family: 'Preferred Font', 'Fallback Font', generic-family;

Always end with a generic family: serif, sans-serif, monospace, cursive, fantasy

The CSS Box Model

Every HTML element is a rectangular box!

Content
Padding
Border
Margin

Box Model Layers

  1. Content: The actual content (text, images)
  2. Padding: Space inside the border
  3. Border: Line around the padding
  4. Margin: Space outside the border
.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}
/* Total width = 200 + 40 + 10 + 20
              = 270px! */

The Calculation Problem

By default, width only sets content width. Add box-sizing: border-box; to include padding and border in the width!

Box Model Properties

Padding

/* Individual sides */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

/* Shorthand */
padding: 10px;           /* all sides */
padding: 10px 20px;      /* top/bottom, left/right */
padding: 10px 20px 15px; /* top, left/right, bottom */
padding: 10px 20px 15px 25px; /* clockwise from top */

Margin

/* Same syntax as padding */
margin: 10px;
margin: 10px auto;  /* center horizontally */
margin: 0;          /* remove default margins */

Border

/* Individual properties */
border-width: 2px;
border-style: solid;
border-color: black;

/* Shorthand */
border: 2px solid black;

/* Individual sides */
border-top: 1px dashed red;
border-bottom: 3px dotted blue;

/* Border radius (rounded corners) */
border-radius: 10px;
border-radius: 50%;  /* circle! */

Border Styles

solid, dashed, dotted, double, groove, ridge, inset, outset, none

The Cascade & Specificity

When multiple rules target the same element, which one wins?

Specificity Hierarchy

  1. !important - Highest (avoid using!)
  2. Inline styles - style attribute
  3. ID selectors - #header
  4. Class selectors - .intro
  5. Element selectors - p, div

Specificity Score

Calculate as (IDs, Classes, Elements)

  • p { } → (0, 0, 1)
  • .intro { } → (0, 1, 0)
  • #header { } → (1, 0, 0)
  • #header .nav p { } → (1, 1, 1)

Example

<p id="intro" class="highlight">
    Hello World
</p>

/* Which color wins? */
p { color: blue; }           /* (0,0,1) */
.highlight { color: yellow; } /* (0,1,0) */
#intro { color: red; }       /* (1,0,0) */

/* Answer: RED wins! */

Best Practice

  • Use classes for most styling
  • Avoid IDs for styling (use for JS)
  • Never use !important (except debugging)
  • Keep selectors simple and flat

CampusKart Milestone: Brand Identity

Deliverable: style.css with complete brand system applied to your Week 3 forms

What to Build

  • Color palette (primary, secondary, accent, backgrounds)
  • Google Fonts (heading + body font)
  • Styled form elements (inputs, buttons, labels)
  • Background colors/gradients for sections
  • Typography hierarchy
  • Consistent button styles

Before vs After

Your ugly HTML forms from Week 3 are about to get a makeover. Apply everything you learned today — selectors, colors, fonts, backgrounds, borders.

Push to GitHub when done. This is your "CSS Week 1" commit.

Video Resources

Frontend Masters

CSS Foundations

Complete CSS fundamentals course

MDN Web Docs

CSS Reference

The definitive CSS documentation

CSS-Tricks

css-tricks.com

Amazing tutorials and guides

Practice Exercises

Exercise 1: Style a Card

Create a styled card component with:

  • Background color
  • Padding and margin
  • Rounded corners
  • Border

Exercise 2: Typography

Style a blog post with:

  • Custom fonts
  • Different heading sizes
  • Line height and spacing
  • Link hover effects

Exercise 3: Color Schemes

Create three color themes:

  • Light theme
  • Dark theme
  • High contrast theme

Exercise 4: Specificity

Practice selector specificity:

  • Override styles correctly
  • Avoid using !important
  • Use appropriate selectors

Examples to Study

View Week 04 Examples →

Week 04 Summary

Key Concepts

  • CSS separates content from presentation
  • Syntax: selector { property: value; }
  • Three ways: inline, internal, external (best!)
  • Selectors: element, class, ID, combinators
  • Colors: hex, rgb, hsl, named
  • Box model: content, padding, border, margin
  • Specificity determines which rules win

Best Practices

  • Use external stylesheets
  • Use classes for styling
  • Keep selectors simple
  • Use box-sizing: border-box
  • Organize CSS logically
  • Comment complex sections

Coming Next Week

Week 05: CSS Layout & Positioning - Flexbox, Grid, and making layouts!