How to Style Your First HTML Page With CSS: A Beginner-Friendly Tutorial

You created your first HTML page.

You opened it in the browser.

And then you stared at it.

It works…

…but it looks very plain. 😅

You have a heading.

A paragraph.

Maybe a button.

Everything is sitting on the page, but it doesn't quite look like the websites you're used to seeing.

So you start wondering:

“How do I make this look better?”

That's where CSS comes in.

CSS, or Cascading Style Sheets, allows you to control how your HTML content is presented.

You can change colours, fonts, spacing, borders, layouts, and much more.

And the good news is that you don't need to build a complicated website to start learning.

In this tutorial, we'll take a simple HTML page and gradually style it with CSS.

By the end, you'll understand how to:

1. Create an HTML file
2. Create a CSS file
3. Connect CSS to HTML
4. Select HTML elements
5. Change colours
6. Change font sizes
7. Add spacing
8. Add borders
9. Create a simple layout
10. Test your work in the browser

Let's get started. 🚀

Step 1: Create Your HTML File

First, create a file called:

index.html

HTML provides the structure of your webpage.

For this tutorial, let's create something simple:

<!DOCTYPE html>

<h1>Welcome to My Website</h1>

<p>I am learning web development.</p>

<button>Learn More</button>

Save the file and open it in your browser.

You'll see your heading, paragraph, and button.

But it probably looks very basic.

That's completely fine.

We're going to change that with CSS.

Step 2: Create Your CSS File

Now create another file in the appropriate location:

style.css

This file will contain the styles for your webpage.

At the moment, it may be empty.

That's okay.

We're about to change that.

Step 3: Connect Your CSS to Your HTML

Creating a CSS file isn't enough.

Your HTML needs to know where the stylesheet is.

Inside the <head> section of your HTML document, add:

Your HTML should now look something like this:

<!DOCTYPE html>

<h1>Welcome to My Website</h1>

<p>I am learning web development.</p>

<button>Learn More</button>

Now the browser knows that it should load the styles from style.css.

This step is extremely important.

You could write hundreds of lines of beautiful CSS, but if your stylesheet isn't properly connected, those styles won't appear on the page.

Step 4: Select an HTML Element

Let's start with the heading.

In your CSS file, write:

h1 {
color: darkblue;
}

Save the CSS file.

Then refresh your browser.

Your heading should now appear in dark blue.

🎉

You just used CSS to change the presentation of an HTML element.

But what actually happened?

The h1 is the selector.

It tells CSS:

“Find the <h1> element.”

Then:

color: darkblue;

tells the browser what you want to change.

This basic pattern appears everywhere in CSS:

selector {
property: value;
}

For example:

h1 {
color: darkblue;
}

h1 → selector

color → property

darkblue → value

Understanding this structure is one of the first important steps in learning CSS.

Step 5: Change the Font Size

Your heading has a colour now.

Let's make it larger.

Add:

h1 {
color: darkblue;
font-size: 36px;
}

Save and refresh.

Now the heading should be larger.

You can experiment with different values:

font-size: 24px;

or:

font-size: 48px;

Try different values and observe what happens.

This is an important part of learning CSS.

Don't just copy the number.

Change it.

See the result.

Then change it again.

You're beginning to understand the relationship between your CSS and what the browser displays.

Step 6: Add Spacing

One of the biggest differences between a basic webpage and a more polished interface is often spacing.

Let's add some space below the paragraph.

p {
margin-bottom: 20px;
}

The margin-bottom property adds space outside the bottom of the paragraph.

You can also use margin to control spacing around an element.

For example:

p {
margin: 20px;
}

CSS also has padding.

The simple distinction is:

Margin = space outside an element

Padding = space inside an element

Understanding the difference between margin and padding becomes very important as you start creating more complex layouts.

Step 7: Add a Border

Let's style the button.

Add:

button {
border: 1px solid black;
}

Now your button has a visible border.

A border can be customized in several ways.

For example:

button {
border: 2px solid black;
}

Or:

button {
border: 1px solid gray;
}

You can also change the border style, colour, and width.

For example:

button {
border: 2px dashed black;
}

Again, experiment.

Change the value.

Refresh the browser.

Observe the difference.

That's how CSS starts becoming less abstract.

Step 8: Style the Button Further

Now let's make the button a little more interesting.

button {
border: none;
padding: 10px 20px;
font-size: 16px;
}

We've now introduced padding.

The padding creates space inside the button.

You can think of it like this:

    Padding
┌───────────────┐
│    Button     │
└───────────────┘

Instead of allowing the text to sit tightly against the button's edges, padding gives it breathing room.

You can experiment with different values:

padding: 5px 10px;

or:

padding: 15px 30px;

Notice how the button changes.

Step 9: Create a Simple Layout

So far, we've changed individual elements.

But CSS can also control how elements are arranged.

One of the most useful tools for this is Flexbox.

Suppose your HTML contains a container:

One
Two
Three

You can use:

.container {
display: flex;
gap: 20px;
}

The display: flex declaration tells the browser to use Flexbox for the container.

The gap property creates space between the items.

Instead of everything simply appearing one after another, you now have much more control over how the elements are arranged.

Flexbox becomes extremely useful for:

• Navigation bars
• Button groups
• Cards
• Form layouts
• Headers
• Content sections
• Alignment

And this is where CSS starts becoming much more powerful than simply changing colours.

Step 10: Test Everything in Your Browser

Now comes one of the most important parts of learning web development:

Testing.

The process is simple:

Write → Save → Refresh → Observe → Change → Refresh again

For example, change:

font-size: 36px;

to:

font-size: 48px;

Save.

Refresh.

Observe what changed.

Then change it again.

You could also change:

color: darkblue;

to another valid colour.

Change the spacing.

Change the border.

Change the layout.

Keep experimenting.

You're not just writing code.

You're building a mental connection between:

CSS code → Browser behaviour → Visual result

That connection is extremely important.

Step 11: Put the Pieces Together

After experimenting, you could have a stylesheet that looks something like:

h1 {
color: darkblue;
font-size: 36px;
}

p {
margin-bottom: 20px;
}

button {
border: 1px solid black;
padding: 10px 20px;
font-size: 16px;
}

.container {
display: flex;
gap: 20px;
}

This isn't a complete professional website.

And it doesn't need to be.

The purpose is to understand the fundamentals.

You've already learned several important CSS concepts:

Selectors

Properties

Values

Colours

Typography

Spacing

Borders

Padding

Flexbox

That's a strong beginning.

What If Your CSS Doesn't Work?

This is where many beginners get frustrated.

You write:

h1 {
color: red;
}

Save.

Refresh.

Nothing happens.

Before assuming CSS is broken, check a few things.

Is the stylesheet connected?

Make sure you have:

Is the filename correct?

If your stylesheet is called:

styles.css

but your HTML says:

the browser may not find the file.

Is your selector correct?

If your HTML contains:

Hello

then:

h1 {
color: red;
}

targets it.

But a selector for something that doesn't exist won't produce the expected result.

Did you make a typo?

CSS is very precise.

For example:

font-szie: 30px;

isn't the same as:

font-size: 30px;

Is another rule overriding your style?

As your stylesheet grows, multiple rules can affect the same element.

This is where understanding the cascade and specificity becomes important.

Don't randomly change everything.

Investigate the problem.

Use Developer Tools

Modern browsers provide Developer Tools that can help you understand what is happening.

You can inspect an element and see the CSS rules affecting it.

This can help you identify:

• Which rules are being applied
• Which rules are being overridden
• Which properties are active
• What the final computed values are

This is one of the best ways to move from:

“Why isn't this working?”

to:

“I can see exactly what's happening.”

The more you use Developer Tools, the more comfortable you'll become with debugging CSS.

Don't Try to Learn Everything at Once

When you're starting CSS, it's tempting to search for huge lists of properties and try to memorize them.

You don't need to.

Start with the fundamentals.

Learn:

Selectors

How to target elements.

Colours

How to change visual presentation.

Typography

How to control text.

Box Model

How content, padding, borders, and margins interact.

Flexbox

How to arrange elements.

Grid

How to create more advanced two-dimensional layouts.

Responsive Design

How layouts adapt to different screen sizes.

Cascade and Specificity

How the browser decides which CSS rules take precedence.

Once you understand these concepts, learning additional CSS becomes much easier.

Make Your First Page Your Playground

Here's an exercise you can try.

Start with:

My First Website

I'm learning CSS.

Click Me

Then challenge yourself to style it.

Challenge 1

Change the heading colour.

Challenge 2

Make the heading larger.

Challenge 3

Add space around the paragraph.

Challenge 4

Add padding to the button.

Challenge 5

Add a border.

Challenge 6

Create a simple Flexbox layout.

Challenge 7

Experiment with different screen sizes.

Don't worry about making it perfect.

The goal is to understand what each change does.

The Real Skill You're Building

At first, styling a webpage can feel like memorizing commands.

But you're actually learning something more important.

You're learning how to communicate visual instructions to a browser.

You tell the browser:

“Make this heading larger.”

“Put these elements next to each other.”

“Add space here.”

“Give this button a border.”

“Change this text colour.”

And the browser interprets those instructions and renders the result.

That's the foundation of CSS.

Final Thoughts

Styling your first HTML page doesn't require a complicated project.

You don't need a framework.

You don't need hundreds of CSS properties memorized.

You don't need to understand every advanced layout technique.

Start small.

Create an HTML file.

Create a CSS file.

Connect them.

Select an element.

Change a property.

Save.

Refresh.

Observe.

Experiment.

Then build on what you've learned.

Remember:

HTML gives your webpage structure.

CSS controls its presentation and layout.

JavaScript adds behaviour and interactivity.

Your first webpage might look simple.

That's okay.

Every experienced frontend developer started somewhere.

And sometimes, that starting point is nothing more than:

Hello World

followed by your first few lines of CSS.

One element. One CSS rule. One experiment at a time. 💻

What would you style first?

If you were creating your first HTML page today, would you start with the heading, colours, button, spacing, or layout?

Share your answer below. 👇