InnoMarts logo
InnoMarts
Fast websites
← Back to course

Getting Started with CSS

Getting Started with CSS

Welcome to the first CSS lesson.

In the HTML course, you learned how to build the structure of a web page.

Now CSS enters the room.

CSS looks at your plain HTML and says:

“Good structure. Very responsible. But why are you dressed like a government form?”

CSS gives your page style.

It controls colors, fonts, spacing, layout, borders, backgrounds, and many other visual details.

HTML creates the content.

CSS makes the content readable, attractive, and less likely to scare visitors away.

What You’ll Learn

In this lesson, you’ll learn:

What Is CSS?

CSS means Cascading Style Sheets.

It is a language used to style HTML documents.

HTML says:

<h1>Hello World</h1>

CSS says:

h1 {
  color: blue;
  font-size: 48px;
}

Together they create a page that has both structure and style.

HTML is the skeleton.

CSS is the clothes, haircut, shoes, and maybe sunglasses.

Not too many sunglasses.

We are building websites, not starting a dramatic music video.

Why CSS Exists

Imagine writing styles directly inside every HTML element.

Like this:

<h1 style="color: blue; font-size: 48px;">Hello World</h1>
<p style="color: gray; font-size: 18px;">This is my paragraph.</p>

This works.

But it becomes messy very quickly.

If you have 50 headings and want to change their color, you would need to edit 50 places.

That is not development.

That is punishment with extra typing.

CSS lets you write style rules in one place.

Example:

h1 {
  color: blue;
  font-size: 48px;
}

p {
  color: gray;
  font-size: 18px;
}

Now all h1 elements and all p elements can follow the same style rules.

Clean.

Organized.

Less chaos.

CSS is already saving your future self from suffering.

Create Your First CSS Project

Create a folder for this lesson:

mkdir css-lesson1
cd css-lesson1
touch index.html
touch style.css

You now have two files:

css-lesson1/
  index.html
  style.css

index.html will contain the page structure.

style.css will contain the styles.

This separation is important.

HTML does the structure.

CSS does the design.

Like two workers on the same project.

One builds the wall.

The other says, “Nice wall. Let’s paint it.”

Write the HTML

Open index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Getting Started with CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My First CSS Page</h1>
    <p>CSS makes HTML look better.</p>
  </header>

  <main>
    <section>
      <h2>About This Page</h2>
      <p>This is a simple page created to practice basic CSS.</p>
    </section>

    <section>
      <h2>What I Am Learning</h2>
      <ul>
        <li>How to connect CSS to HTML</li>
        <li>How to style headings</li>
        <li>How to change colors and spacing</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>Created while learning CSS.</p>
  </footer>
</body>
</html>

The most important line here is this:

<link rel="stylesheet" href="style.css">

This line connects your HTML file to your CSS file.

Without it, your CSS file can shout all day.

The HTML page will not listen.

The link Element

The link element goes inside the head.

Example:

<link rel="stylesheet" href="style.css">

It tells the browser:

Load the file style.css and use it as the stylesheet for this page.

The rel attribute means relationship.

The href attribute gives the file path.

If the CSS file is in the same folder as index.html, this works:

href="style.css"

If the CSS file is inside a folder called css, the path would be:

href="css/style.css"

Paths matter.

The browser is not psychic.

Sadly.

Write Your First CSS

Open style.css and add this:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
}

h1 {
  color: #2563eb;
}

h2 {
  color: #111827;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

Save the file.

Open index.html in the browser.

Your page should now look different.

Congratulations.

You just styled your first page with CSS.

No ceremony required.

But a small coffee celebration is allowed.

How CSS Rules Work

A CSS rule usually has three parts:

selector {
  property: value;
}

Example:

h1 {
  color: blue;
}

Here:

This means:

Find every h1 element and make its text blue.

CSS is basically giving instructions to the browser.

Sometimes the browser obeys.

Sometimes you made a typo.

Usually it is the typo.

Be strong.

Selectors

A selector chooses what you want to style.

Example:

p {
  color: gray;
}

This selects all p elements.

Example:

h2 {
  font-size: 32px;
}

This selects all h2 elements.

For now, we are using simple element selectors.

Later we will learn classes, IDs, combinations, and more powerful selectors.

CSS selectors are like saying:

“You. Yes, you. Wear this style.”

Very direct.

Very dramatic.

Properties and Values

A property is what you want to change.

A value is how you want to change it.

Example:

color: red;

color is the property.

red is the value.

Another example:

font-size: 24px;

font-size is the property.

24px is the value.

CSS uses many properties:

Do not try to memorize everything today.

That is how beginners become tired furniture.

Learn step by step.

Add Better Spacing

Now improve the page spacing.

Add this to style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

header {
  background-color: #111827;
  color: white;
  padding: 40px;
  text-align: center;
}

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

section {
  background-color: white;
  margin-bottom: 20px;
  padding: 24px;
  border-radius: 12px;
}

footer {
  text-align: center;
  padding: 20px;
  color: #666;
}

Now the page should look more organized.

Not perfect.

But definitely less like HTML escaped from a basement.

What Is margin?

margin is space outside an element.

Example:

section {
  margin-bottom: 20px;
}

This adds space below each section.

Margin is like personal space.

Elements need it.

People need it.

Your layout definitely needs it.

What Is padding?

padding is space inside an element.

Example:

section {
  padding: 24px;
}

This creates space between the edge of the section and the content inside it.

Without padding, text sticks to the edges.

And that looks uncomfortable.

Like sitting too close to someone on an empty bus.

What Is background-color?

background-color changes the background of an element.

Example:

header {
  background-color: #111827;
}

This makes the header dark.

You can use color names:

color: blue;

Or hex values:

color: #2563eb;

Hex values look mysterious at first.

Like secret codes.

But they are just color codes.

No magic.

Only pixels pretending to be magic.

Testing with a Local Server

You can open index.html directly in the browser.

But you can also use Caddy if you want to serve the folder locally:

caddy file-server --listen :8080

Then open:

http://localhost:8080

This is useful when you want your project to behave more like a real website.

Not required.

But nice.

And yes, using a local server makes you look slightly more professional.

Even if your CSS is still arguing with a margin.

Common Mistakes

Forgetting the CSS link

If CSS is not working, check this line:

<link rel="stylesheet" href="style.css">

Make sure it is inside head.

Make sure the file name is correct.

style.css is not the same as styles.css.

Computers are strict.

They do not forgive spelling drama.

Writing CSS inside HTML by accident

CSS belongs in style.css.

Not randomly inside the body like this:

<body>
  h1 {
    color: blue;
  }
</body>

That is not valid.

HTML will look at it and say:

“I do not know what this is, but it looks suspicious.”

Missing semicolons

This is better:

h1 {
  color: blue;
  font-size: 48px;
}

Each property line should usually end with a semicolon.

CSS can sometimes survive without the last one.

But do not test its patience.

Practice

Create your own page with:

Then style it with CSS.

Your CSS should change:

Keep it simple.

Today is not about becoming a designer.

Today is about making HTML listen to CSS.

Mini Challenge

Change the page so that:

Try changing one thing at a time.

Save.

Refresh.

Observe.

This is the CSS cycle.

Write.

Save.

Refresh.

Confusion.

Fix.

Victory.

Repeat.

Summary

Today you learned:

You wrote your first CSS.

That is a real step.

The page may not be a masterpiece yet.

But it is no longer naked HTML standing in the rain.

Next Lesson

In the next lesson, we will learn selectors and basic styling in more detail.

Selectors are how you tell CSS exactly what to style.

Very important.

Because CSS without selectors is just a person yelling design instructions into the void.