Chapters
HTML + CSS: Build Your First Web Page — A Beginner’s Practical Guide
📘 Chapter 2: Introduction to CSS — Styling with Classes, IDs, and Selectors`
🎨 Introduction: Bring
Your Web Pages to Life with CSS
In the previous chapter, you learned how to structure a web
page using HTML. Now it’s time to style it. That’s where CSS
(Cascading Style Sheets) comes in.
While HTML defines what’s on the page, CSS defines how it
looks — the colors, fonts, spacing, layout, and more.
By the end of this chapter, you’ll know how to:
- Apply
CSS to HTML using 3 different methods
- Use
selectors, classes, and IDs effectively
- Style
text, backgrounds, borders, and layout
- Write
clean, maintainable, reusable styles
Let’s transform your plain webpage into a beautifully
designed one!
🧠 What is CSS?
CSS stands for Cascading Style Sheets. It's the
language used to control the presentation of web content.
🔹 What CSS Can Do:
- Set
colors, fonts, and sizes
- Adjust
spacing (margins, padding)
- Position
elements on the page
- Add
borders, shadows, transitions, and animations
- Make
your design responsive and user-friendly
🧱 Ways to Apply CSS
There are 3 ways to use CSS in your HTML:
|
Method |
Where it's Written |
Use Case |
|
Inline CSS |
Inside the HTML tag
(bad practice) |
Quick tests, small
changes |
|
Internal CSS |
Inside
<style> in <head> |
Single-page
projects |
|
External CSS |
Linked .css file |
Best practice for
large/multi-page sites |
✅ Example 1: Inline CSS
html
<h1
style="color: blue; font-size: 30px;">Welcome!</h1>
❌ Not recommended for
maintainability
✅ Example 2: Internal CSS
html
<head>
<style>
h1 {
color: blue;
font-size: 30px;
}
</style>
</head>
✅ Example 3: External CSS (Best
Practice)
index.html
html
<head>
<link rel="stylesheet"
href="style.css">
</head>
style.css
css
h1
{
color: blue;
font-size: 30px;
}
✅ This separates structure (HTML)
from style (CSS), making it easier to manage.
🔎 CSS Syntax Basics
css
selector
{
property: value;
}
🔹 Example:
css
p
{
color: gray;
font-size: 16px;
}
🔸 Common CSS Properties
|
Property |
Purpose |
Example |
|
color |
Text color |
color: red; |
|
background-color |
Background
color |
background-color:
#f4f4f4; |
|
font-size |
Text size |
font-size: 20px; |
|
font-family |
Typeface |
font-family:
Arial, sans-serif; |
|
text-align |
Text alignment |
text-align: center; |
🎯 Selectors: Targeting
Elements with CSS
Selectors allow you to choose which HTML elements you
want to style.
🔹 Types of Selectors
|
Selector Type |
Symbol |
Example |
Targets |
|
Element |
none |
h1 {} |
All <h1> tags |
|
Class |
. |
.title {} |
All elements
with class="title" |
|
ID |
# |
#main-header {} |
One unique element
with id="main-header" |
|
Group |
, |
h1, h2 {} |
Multiple
types at once |
|
Descendant |
(space) |
div p {} |
All <p> inside
<div> |
|
Child |
> |
ul > li {} |
Only direct
children <li> |
✅ Example: Using Class and ID
HTML
html
<h1
class="main-heading">Hello</h1>
<p
id="intro">This is a paragraph.</p>
CSS
css
.main-heading
{
color: teal;
text-transform: uppercase;
}
#intro
{
font-style: italic;
}
✅ Use classes for multiple
elements, and IDs for unique ones.
🧱 Box Model:
Understanding Spacing and Layout
All HTML elements are treated as boxes. The CSS box model
lets you control spacing, borders, and layout.
🧱 Parts of the Box Model:
|
Part |
Description |
|
Content |
The actual text or
image |
|
Padding |
Space around
content (inside border) |
|
Border |
Outline around padding |
|
Margin |
Space between
elements |
🧪 Example
css
div
{
padding: 20px;
border: 2px solid black;
margin: 15px;
}
🎨 Styling Text and Fonts
🔹 Text Styling Properties
|
Property |
Example |
|
color |
color: navy; |
|
font-family |
font-family:
Verdana; |
|
font-size |
font-size: 18px; |
|
font-weight |
font-weight:
bold; |
|
text-transform |
text-transform:
uppercase; |
|
text-decoration |
text-decoration:
underline; |
🔹 Example:
css
p
{
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
🖼️ Backgrounds, Borders,
and Images
css
body
{
background-color: #f0f8ff;
}
img
{
border: 2px solid gray;
border-radius: 10px;
}
- Use
background-image: url('path.jpg'); to add background images
- Use
border-radius for rounded corners
- Use
box-shadow for elegant depth effects
📱 Responsive Design Prep
with Relative Units
Use:
- em
and rem instead of px for font size
- %
for widths and heights to adapt layout
- Media
queries (covered in Chapter 4) for mobile responsiveness
🧪 Mini Exercise: Style a
Sample Page
HTML
html
<h1
class="headline">Welcome</h1>
<p
id="intro">This is your styled page.</p>
CSS
css
.headline
{
color: green;
font-size: 2rem;
text-align: center;
}
#intro
{
color: #555;
font-style: italic;
padding: 10px;
}
🧠 Tips for Writing Clean
CSS
- Use external
stylesheets
- Choose
clear, meaningful class names
- Group
similar styles together
- Use
comments: /* section header styles */
- Avoid
excessive inline styles
- Test
on different screen sizes
🧾 Summary Table
|
Concept |
Key Takeaways |
|
CSS Syntax |
selector { property:
value; } |
|
Selectors |
Class (.), ID
(#), Element |
|
Styling |
Text, backgrounds,
spacing |
|
Box Model |
Understand
padding, borders, margin |
|
Best Practice |
Use external
stylesheets for maintainability |
✅ Chapter 2 Summary
You’ve now learned:
- How
to link and write CSS
- The
difference between classes, IDs, and selectors
- How
to style fonts, colors, borders, and spacing
- Best
practices for clean, maintainable CSS
How to preview your styles in real-time in the browser
BackFAQs
Q1: What is the difference between HTML and CSS?
A: HTML (HyperText Markup Language) is used to structure the content of a webpage—such as text, headings, links, and images. CSS (Cascading Style Sheets) is used to style that content—like setting colors, fonts, spacing, and layout.
Q2: Do I need to install any special software to write HTML and CSS?
A: No special software is required. You can use any text editor like Visual Studio Code, Sublime Text, or even Notepad. All modern browsers can render your HTML and CSS code.
Q3: Can I build a complete website with just HTML and CSS?
A: Yes, you can build a static website using only HTML and CSS. However, for interactive elements like animations or forms with validation, you'll eventually need JavaScript.
Q4: How do I view my HTML page in a browser?
A: After saving your file with a .html extension, simply double-click it or right-click and select “Open with” → your browser (e.g., Chrome, Firefox, Edge).
Q5: What is the best way to apply CSS to an HTML page?
A: The best practice is to use an external CSS file (linked with a <link> tag in the HTML <head>). This makes your code modular, clean, and easier to maintain.
Q6: Is it better to learn HTML and CSS before JavaScript?
A: Yes. HTML and CSS provide the structural and visual foundation of web development. Learning them first helps you understand how websites are built before adding interactivity with JavaScript.
Q7: How can I make my website responsive using HTML and CSS?
A: Use CSS media queries, flexbox, and relative units like percentages or em/rem to make your layout adapt to different screen sizes (e.g., desktop, tablet, mobile).
Q8: Can I host my HTML + CSS website online for free?
A: Yes! Platforms like GitHub Pages, Netlify, and Vercel allow you to host static sites (HTML/CSS/JS) for free with custom domains and version control.
Q9: What’s the difference between class and id in CSS?
A: An id targets a unique element using #idname, while a class can be reused across multiple elements using .classname. IDs should be unique per page; classes can apply styles to multiple elements.
Q10: Where can I find design inspiration and examples for HTML/CSS projects?
A: Websites like CodePen, Dribbble, Frontend Mentor, and CSS-Tricks offer great examples, templates, and challenges to inspire and improve your front-end design skills.
Explore Other Libraries
Please allow ads on our site
Please log in to access this content. You will be redirected to the login page shortly.
Login
Comments(0)