CSS Introduction

Plain HTML can show text and links, but pages look unfinished until you control color, spacing, and layout. CSS is the language that turns structured markup into a designed page.

What is CSS?

CSS (Cascading Style Sheets) is the standard language used to style HTML documents. You write rules that tell the browser how elements should look: text color, fonts, margins, backgrounds, layout, and more. HTML answers “what is this content?” CSS answers “how should it appear?”

HTML and CSS work together

Think of HTML as the skeleton of a page and CSS as the clothing and polish. You still need solid HTML — headings, paragraphs, links, and landmarks — so CSS has meaningful elements to style. This course assumes you already know basic HTML.

📊 HTML vs CSS roles

Layer	Main job	Typical questions it answers
HTML	Structure and meaning	Is this a heading, paragraph, or link?
CSS	Presentation and layout	What color, size, spacing, and arrangement?
JavaScript (later)	Behavior and interactivity	What happens when the user clicks?

You will study JavaScript in a later course. For now, keep the split clear: structure in HTML, look-and-feel in CSS.

A first look at a CSS rule

A CSS rule has a selector (what to style) and declarations (how to style it). Declarations sit inside curly braces and use a property and a value.

A simple rule

css

CSS Code

h1 {
color: navy;
font-size: 2rem;
}

What this rule does

h1 is the selector — it targets every h1 element
color: navy; sets the text color
font-size: 2rem; sets the heading size
Each declaration ends with a semicolon
You will learn selectors and units in depth in later sessions. Here it is enough to see the shape of a rule.

Seeing CSS on a page

Browsers apply CSS rules to matching HTML elements. Below, a short page uses an internal <style> block so you can see HTML and CSS in one file. Later sessions cover external stylesheets and other ways to add CSS.

HTML with a style block

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

What changed

Without the <style> rules, the page would use the browser’s default look. With CSS, the background softens, the heading turns dark blue, and the paragraph gets readable spacing. Same HTML content — different presentation.

Why “cascading” matters (preview)

The “Cascading” in CSS means styles can come from several places and the browser resolves which rule wins using cascade and specificity rules. You do not need the full algorithm yet. Remember this idea: multiple rules can target the same element, and CSS has a clear system for choosing the final look. Later sessions on cascade and specificity make that system practical.

Try it yourself

Create a file named intro.html.
Paste the HTML-with-style example, save it, and open it in your browser.
Change color: #1a365d; on the h1 rule to color: teal;, save, and refresh.
Confirm the heading color updates. If nothing changes, check that you saved the file and refreshed the correct tab.

Common mistakes

Expecting CSS to create page structure — use HTML elements for headings, lists, and links; style them with CSS
Writing property names without a selector or braces, so the browser ignores the declarations
Forgetting the semicolon after a declaration, which can break the next property in the same rule
Putting visible content only in CSS — CSS styles content; it does not replace HTML text

Summary

CSS styles HTML pages: colors, fonts, spacing, layout, and presentation
HTML structures content; CSS controls how that content looks
A CSS rule pairs a selector with property/value declarations inside { }
You can start with a <style> block, then move to external stylesheets
Cascading means multiple rules can apply; later lessons explain which wins
Practice by editing a small rule and refreshing the browser

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language