What is CSS? Styling Your First Web Page
If you've ever looked at a website and thought, "How did they make it look so nice?" the answer is usually CSS.
CSS (Cascading Style Sheets) is the language that makes web pages look good. While HTML builds the structure (headings, paragraphs, images), CSS handles the colors, fonts, spacing, and layout.
In this beginner-friendly guide, you’ll:
- Understand what CSS is and how it works with HTML
- Create a simple web page
- Add CSS to change colors, fonts, and spacing
- See your first styled page in your browser
No experience needed. You just need a text editor (like Notepad, VS Code, or any basic editor) and a web browser (like Chrome, Firefox, or Edge).
Step 1: Create a Simple HTML Page
Before we style a page, we need a page to style.
- Open your text editor.
- Create a new file and save it as
index.html(make sure it ends with.html). - Paste this code into the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Styled Page</title>
</head>
<body>
<!-- This is a heading -->
<h1>Welcome to My First Web Page</h1>
<!-- This is a paragraph of text -->
<p>Hello! This is my very first web page. Soon, it will look much nicer.</p>
<!-- Another heading for a different section -->
<h2>About Me</h2>
<p>I am learning how to build and style web pages using HTML and CSS.</p>
</body>
</html>
Now open this file in your browser:
- Find
index.htmlon your computer - Double-click it
- It should open in your default browser
You’ll see a plain page with black text on a white background. Simple, but a great starting point.
Step 2: What Does CSS Actually Do?
Right now, your page has no styling. The browser is using its default look.
CSS lets you change things like:
- Color: text and background
- Font: typeface, size, style
- Spacing: margins (outer space) and padding (inner space)
- Layout: where things sit on the page
Think of HTML as the skeleton and CSS as the clothes and makeup that make it look the way you want.
CSS works by using rules. A CSS rule looks like this:
selector {
property: value;
}
- The selector tells the browser what to style (for example,
h1orp). - The property is what you want to change (like
colororfont-size). - The value is how you want it to look (like
redor20px).
Step 3: Add Your First CSS (Inline Style)
The quickest way to see CSS in action is with an inline style. This means adding CSS inside an HTML tag.
In your index.html, change the first <h1> line from this:
<h1>Welcome to My First Web Page</h1>
to this:
<h1 style="color: blue;">Welcome to My First Web Page</h1>
Save the file, refresh your browser, and look again.
Your main heading should now be blue.
What happened?
style="color: blue;"is an inline CSS stylecoloris the propertyblueis the value
This works, but typing styles directly into HTML tags can get messy. Next, let’s use a cleaner method.
Step 4: Using a <style> Tag (Internal CSS)
Instead of putting CSS in each tag, we can write all our styles in one place, inside a <style> tag in the <head> section.
Update your index.html to look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Styled Page</title>
<!-- Internal CSS goes here -->
<style>
/* Make all h1 headings blue and centered */
h1 {
color: blue;
text-align: center;
}
/* Make all h2 headings dark gray */
h2 {
color: #333333;
}
/* Style all paragraphs */
p {
font-family: Arial, sans-serif; /* Change the font */
font-size: 16px; /* Set text size */
line-height: 1.5; /* Add space between lines */
}
</style>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>Hello! This is my very first web page. Soon, it will look much nicer.</p>
<h2>About Me</h2>
<p>I am learning how to build and style web pages using HTML and CSS.</p>
</body>
</html>
Refresh your browser.
You should now see:
- The main heading (
h1) in blue and centered - The second heading (
h2) in dark gray - Paragraphs with a cleaner font and more comfortable line spacing
You just wrote real CSS!
Step 5: Adding Backgrounds and Spacing
Let’s make the page easier on the eyes by changing the background color and adding some space around the content.
In the same <style> section, add a body rule above the others:
body {
background-color: #f5f5f5; /* Light gray background */
margin: 20px; /* Space around the whole page */
}
Your full <style> tag should now look like this:
<style>
body {
background-color: #f5f5f5; /* Light gray background */
margin: 20px; /* Space around the whole page */
}
h1 {
color: blue;
text-align: center;
}
h2 {
color: #333333;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
When you refresh the page, you should now see a light gray background and a bit of space around your content.
background-colorchanges the page’s backgroundmargin: 20px;adds 20 pixels of space around the content
Already, your page looks less like a raw document and more like a designed page.
Step 6: Using Classes to Style One Section Differently
So far, our CSS targets all h1, h2, and p elements. But what if you want one paragraph to look special, like a highlighted note?
This is where classes come in.
- Add a special paragraph in your
<body>:
<p class="highlight">This is an important note about my web page.</p>
- Now add this CSS inside your
<style>tag:
.highlight {
background-color: yellow; /* Yellow background */
padding: 10px; /* Space inside the box */
border: 1px solid #cccccc; /* Light gray border */
}
Your style section now includes a new rule for .highlight.
What’s happening?
.highlightis a class selector (the dot means “class”)class="highlight"on the<p>tag applies that style only to this paragraph
Refresh your page. You should see one paragraph with a yellow background, extra space inside, and a neat border.
Try It Yourself: Experiment With Styles
Now that you’ve got the basics, play around a bit. Open your style tag and try:
Changing colors:
h1 { color: darkgreen; }Making text bigger:
h2 { font-size: 24px; }Rounding the corners of the highlighted box:
.highlight { border-radius: 8px; /* Curved corners */ }
After each change, save the file and refresh the browser.
Don’t worry about breaking things. If something looks wrong, you can always undo or go back to the earlier version.
Step 7: How CSS Fits Into the Bigger Picture
You’ve just done what real web developers do every day: you wrote HTML and used CSS to style it.
To quickly recap:
- HTML describes the content (headings, paragraphs, sections)
- CSS describes how that content looks (colors, fonts, spacing)
- CSS rules follow the pattern
selector { property: value; } - You can write CSS:
- Inline (inside a tag) – simple, but messy
- Internally (inside a
<style>tag) – good for small pages - Externally (in a separate
.cssfile) – best for larger sites (you’ll get there soon!)
What you’ve learned today is more than enough to start experimenting with your own simple pages.
What’s Next?
If you’d like to keep going, here are some ideas:
- Add more sections to your page (like “My Hobbies” or “My Favorite Books”) and style them.
- Look up and try new CSS properties like
text-transform,text-shadow, orbox-shadow. - Learn about external CSS files by creating a
styles.cssfile and linking it with a<link>tag.
Quick Recap of Key Takeaways
- CSS stands for Cascading Style Sheets and controls how web pages look.
- You apply CSS using selectors, properties, and values.
- You can style entire elements (
h1,p) or specific ones using classes (like.highlight). - Small changes in CSS can dramatically change the feel of your website.
You’ve styled your very first web page—that’s a big win. Keep experimenting, stay curious, and each small step will make you more confident with CSS and web design.
