Introduction to CSS

beginner

Part of CSS Fundamentals

Theory

CSS (Cascading Style Sheets) is the language that controls the visual presentation of web pages. While HTML provides the structure of content, CSS determines how it looks — colors, fonts, spacing, layout, animations, and more.

CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
}

Selector — identifies which HTML element(s) to style (e.g., h1, .class, #id)
Property — the aspect to style (e.g., color, font-size, margin)
Value — the setting for the property (e.g., red, 16px, 10px)

Example:

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

Three Ways to Add CSS

1. Inline CSS

Applied directly to an element using the style attribute:

<p style="color: red; font-weight: bold;">This is red and bold.</p>

Inline CSS has the highest specificity but mixes presentation with structure — use sparingly.

2. Internal CSS

Defined within a <style> element in the <head> of the HTML document:

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

Internal CSS is useful for single-page styles but doesn't scale well for multi-page sites.

3. External CSS

Styles are defined in a separate .css file and linked to the HTML:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

External CSS is the best practice for production sites. It keeps styles separate from content, enables caching, and allows one stylesheet to control many pages.

CSS Specificity

When multiple CSS rules target the same element, specificity determines which rule takes precedence. From lowest to highest:

Element selectors (h1, p, div) — specificity weight: 0,0,0,1
Class selectors (.class, [attribute], :pseudo-class) — weight: 0,0,1,0
ID selectors (#id) — weight: 0,1,0,0
Inline styles (style="...") — weight: 1,0,0,0

The !important declaration overrides everything but should be avoided:

p { color: red !important; }

The Cascading Rule

"Cascading" means that when specificity is equal, the last rule in the stylesheet wins:

p { color: red; }
p { color: blue; } /* This wins — text will be blue */

The cascade also considers the source order of stylesheets — later stylesheets override earlier ones.

Inheritance

Some CSS properties are inherited from parent to child elements. For example, setting font-family on <body> cascades down to all text elements:

body { font-family: Arial, sans-serif; }
/* All descendants inherit Arial unless overridden */

Properties that are typically inherited: color, font-family, font-size, line-height, text-align.

Properties that are NOT inherited: margin, padding, border, background, width, height.

You can force inheritance with the inherit keyword:

p { border: inherit; }

Browser Developer Tools

Modern browsers include powerful DevTools for CSS:

Chrome/Edge: F12 → Elements panel → Styles tab
Firefox: F12 → Inspector → Rules tab
Safari: Right-click → Inspect Element → Styles sidebar

You can inspect any element, see which rules apply, toggle styles on/off, edit values in real time, and debug layout issues.

Use your browser's DevTools to experiment with CSS in real time. Changes you make in the Styles panel are temporary and reset on page refresh — perfect for testing before committing to code.

Practical Examples

Example: Three Ways to Add CSS

html

Example: External CSS File (Save as styles.css)

html

Exercises

Inline vs Internal vs External CSS

easy

Create an HTML page that uses all three CSS methods: (1) inline CSS to color one paragraph red, (2) internal CSS in the head to style all h2 elements blue, and (3) link to an external CSS file that styles the body background and font.

Expected Output:

A page where h2 is blue (internal CSS), one paragraph is red (inline CSS), the body has a specific background and font (external CSS), and the other paragraph inherits body styles.

Understanding the Cascade

medium

Write an HTML page that demonstrates the cascading rule. Style a paragraph three times with the same selector — each with a different color. The last rule should win. Then add an ID selector that should override the element selector.

Expected Output:

A paragraph that displays the color from the ID selector (highest specificity). The three element selector rules show the cascade — the last one is applied unless overridden by ID specificity.

Mini Quiz

Mini Project

Mini Project: Styled Personal Page

Create a personal introduction page styled using all three CSS methods. Your page should demonstrate understanding of specificity, cascading, and inheritance. Use an external stylesheet as your primary styling method.

Requirements:

Bonus Challenge

Add a print stylesheet using @media print that changes the page appearance for printing.