CSS: Introduction

The language that makes web pages look good.

What is CSS and Why It Matters

CSS stands for Cascading Style Sheets. HTML builds the structure of a page. CSS controls how it looks: colors, fonts, spacing, and layout.

Without CSS, every website would be plain black text on a white background. With CSS, the same HTML can be transformed into any visual design.

Separation of concerns: keep structure (HTML) and style (CSS) in separate files
Reusability: one stylesheet can style an entire website
Maintainability: change one rule and every matching element updates

`CSS`

CSS (Cascading Style Sheets) is the language that controls how HTML elements look on screen.

Selector: targets the HTML element to style
Property: the aspect you want to change (color, size, spacing)
Value: what you set the property to (red, 16px, bold)
Cascade: when multiple rules apply, the browser picks a winner based on specificity and order

Your First CSS Rules

A selector, a property, and a value.

h1 {
  color: steelblue;
}

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

CSS Integration Methods

There are three ways to add CSS to an HTML page:

1. Inline CSS

Written directly on an element using the style attribute. Good for quick one-off tweaks, but hard to maintain.

`Inline CSS`

Styles are written directly inside the style attribute on an HTML element.

style="": the attribute that holds inline CSS declarations
Highest specificity: overrides internal and external rules
Not reusable: you must repeat the same styles on every element
Avoid for general styling; use only for small, one-off overrides

Inline CSS

Styles written directly on the element.

<h1 style="color: red;">This heading is red</h1>
<p style="font-size: 20px;">This paragraph is larger.</p>

2. Internal CSS

Placed inside a <style> tag in the <head>. Useful for single-page demos.

`<style>`

The <style> tag goes inside <head> and holds CSS rules that apply to the whole page.

<style>: wraps all internal CSS rules
Rules written here apply to the entire HTML file
Good for demos and single-page projects
Not ideal for multi-page sites: rules don't carry over to other pages

Internal CSS

CSS rules written inside a <style> tag in the <head>.

h1 { color: green; }
p  { font-size: 18px; }

3. External CSS

A separate .css file linked with a <link> tag. This is the standard approach for real projects, one file styles the whole site.

`<link rel="stylesheet">`

The <link> tag in <head> connects an external .css file to your HTML page.

rel="stylesheet": tells the browser this link is a CSS file
href: the path to your .css file
One stylesheet can be linked to every page on the site
The browser caches the file, subsequent pages load faster

External CSS

Link the stylesheet in <head>, write rules in a separate .css file.

/* styles.css */
h1 { color: purple; }
p  { font-size: 18px; }

Method	Where	Best For	Reusable?
Inline	style="" on element	Quick one-off overrides	No
Internal	<style> in <head>	Single-page demos	Within one page
External	.css via <link>	All real projects	Yes: site-wide

How CSS Works with HTML

A CSS rule has three parts: a selector, a property, and a value.

p { color: blue; }

p: Selector: targets all <p> elements
color: Property: what to change
blue: Value: what to set it to

Selectors

Element, class, and ID selectors.

/* element selector: targets every <h1> */
h1 { color: darkblue; }

/* class selector: targets anything with class="note" */
.note { color: green; }

/* id selector: targets the element with id="warning" */
#warning { color: red; }

CSS Debugging Basics

When CSS doesn't work as expected, open Browser DevTools with F12. The Elements panel lets you inspect and live-edit any CSS rule.

`DevTools: Elements Panel`

Right-click any element on a page and choose Inspect to open DevTools. The Elements panel shows all CSS rules applied to the selected element.

Computed tab: shows the final resolved value of every CSS property
Strikethrough rule: a rule that is overridden by a more specific one
Click any value to edit it live in the browser, great for experimenting
Unchecking a checkbox next to a rule temporarily disables it

Common Mistakes

Missing semicolon at the end of a declaration
Typo in property name: colour should be color
Wrong selector: the rule exists but targets the wrong element
Forgot to link the stylesheet in HTML

Specificity

More specific selectors win. ID > Class > Element.

p     { color: gray; }   /* least specific */
.blue { color: blue; }   /* overrides element */
#red  { color: red;  }   /* overrides class   */

Best Practices & Code Organization

As your CSS grows, keeping it organized makes it much easier to read and maintain.

Always use external stylesheets for real projects
Use lowercase, hyphen-separated class names: .nav-bar, .hero-title
Group rules by section using comments: /* === Layout === */
Avoid !important: fix specificity instead
Write mobile-first: base styles for small screens, then add media queries

Organized CSS

Group rules into sections with comments.

/* === BASE === */
body { font-family: Arial, sans-serif; color: #333; }

/* === LAYOUT === */
.container { max-width: 800px; margin: 0 auto; padding: 16px; }

/* === COMPONENTS === */
.card { border: 1px solid #ddd; padding: 16px; }
.card-title { font-size: 18px; font-weight: bold; }

CSS Architecture Principles

On bigger projects, a naming system helps keep CSS predictable. The two most popular approaches are OOCSS and BEM.

OOCSS: Object Oriented CSS

Separate structure (size, layout) from skin (color, font). This way you can reuse the same structure with different visual styles.

`OOCSS`

Object Oriented CSS separates structure from skin so you can mix and match styles without duplicating rules.

Structure: size, padding, layout (reused across many components)
Skin: colors, borders, fonts (swapped independently)
Keeps your CSS DRY: Don't Repeat Yourself
Pairs well with BEM naming to make intent clear

BEM: Block Element Modifier

A naming convention with three parts:

.block: the standalone component, e.g. .card
.block__element: a child part, e.g. .card__title
.block--modifier: a variation, e.g. .card--featured

BEM Naming

Block__Element--Modifier pattern.

/* Block */
.card { border: 1px solid #ccc; padding: 16px; margin-bottom: 10px; }

/* Elements */
.card__title { font-weight: bold; }
.card__body  { color: gray; }

/* Modifier */
.card--featured { border-color: steelblue; background: #f0f8ff; }

Performance Considerations

CSS is render-blocking: the browser won't show the page until it has downloaded and parsed all linked CSS. A few simple habits keep your pages fast:

`Render-Blocking CSS`

The browser pauses rendering the page while it downloads and parses CSS. This is why CSS performance matters even for small sites.

render-blocking: CSS must be fully loaded before the browser paints anything
Place your <link> tag in <head> so the browser fetches CSS early
Minification: removing whitespace and comments reduces file size
Fewer stylesheets = fewer network requests = faster load

Loading

Use one external stylesheet instead of many
Avoid @import inside CSS: it delays loading
Minify CSS before deploying to production

Rendering

Use transform and opacity for animations, not width or top
Keep selectors simple: avoid deeply nested ones
Remove unused CSS rules

Animation Performance

Use transform instead of left/top to avoid layout reflow.

.box {
  width: 60px;
  height: 60px;
  background: steelblue;
  animation: move 1s ease-in-out infinite alternate;
}

/* Use transform: runs on GPU, no layout recalculation */
@keyframes move {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}

/* Avoid animating left/top: forces layout recalculation
@keyframes move {
  from { left: 0; }
  to   { left: 200px; }
} */

Brief Overview of CSS Frameworks

CSS frameworks are pre-written stylesheets that speed up development. Instead of writing all styles from scratch, you use classes the framework already defines.

Learn vanilla CSS first. Frameworks make more sense once you understand what they are doing under the hood.

`CSS Frameworks`

A CSS framework is a pre-written stylesheet you link to your project. It gives you ready-made classes for layout, typography, buttons, and more.

Tailwind CSS: utility-first; you compose styles with small classes like text-blue-500
Bootstrap: component-based; gives you ready-made buttons, cards, and navbars
Bulma: simple Flexbox-based framework with no JavaScript
Frameworks are tools, not shortcuts: learn CSS fundamentals first

Framework	Approach	Best For
Tailwind CSS	Utility-first: small classes like text-red-500	Custom designs, full control
Bootstrap	Component-based: ready-made buttons, cards, navbars	Rapid prototyping
Bulma	Flexbox-based, no JavaScript required	Simple, clean layouts

Knowledge Check

1. What does CSS stand for?

2. Which CSS integration method has the highest specificity by default?

3. In the CSS rule `p { color: red; }`, what is `p` called?

4. Which DevTools panel is most useful for inspecting and editing CSS?

5. What does BEM stand for in CSS architecture?