CSS Fundamentals

beginner

What You'll Learn

Theory

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

Why CSS Matters

CSS separates content from presentation. This separation improves accessibility, maintainability, and allows the same HTML to be styled differently for different devices (desktop, tablet, mobile, print). Without CSS, every web page would be plain black text on a white background.

How CSS Works with HTML

CSS can be added to HTML in three ways:

Inline CSS: via the style attribute directly on HTML elements
Internal CSS: via a <style> block in the document <head>
External CSS: via a .css file linked with <link rel="stylesheet">

The browser parses HTML into the DOM, then applies matching CSS rules based on selectors. When multiple rules conflict, specificity and the cascade determine which wins.

Browser Developer Tools

All modern browsers include DevTools for CSS debugging. Press F12 (Chrome/Firefox/Edge) or right-click → Inspect to open them. The Elements/Inspector panel shows the HTML tree and the Styles/Rules panel displays all CSS rules applied to the selected element. You can toggle rules on/off, edit values in real-time, view the box model, and debug layout issues.

Changes made in DevTools are temporary and reset on page refresh. This makes DevTools perfect for experimenting before committing changes to code.

Why this matters

CSS is what transforms raw HTML into visually appealing, professional websites. Mastering the cascade, specificity, and DevTools workflow is essential for every front-end developer.

What's next

In the next lessons, you'll dive deeper into each topic with hands-on examples and exercises.

Practical Example

Example: CSS Fundamentals

html

Exercises

Use DevTools to Inspect and Modify Styles

easy

Create a simple HTML page with an h1, two paragraphs, and a div. Add internal CSS that styles each element. Open DevTools (F12), inspect the h1, and change its color in the Styles panel. Then add a new CSS rule to the paragraph in DevTools.

Expected Output:

A page where you can inspect the h1 and see its styles. After modifying the color in DevTools, the heading changes immediately. Adding a new property (e.g., text-align: center) takes effect instantly.