top of page
Search

What Is CSS? A Beginner’s Guide to Making Websites Look Good

Writer: Morgan Nye
Morgan Nye
Sep 3
3 min read

If HTML builds the structure of a website, CSS is what makes it look good.

Colors, fonts, spacing, backgrounds, button styles, layouts — a huge part of what makes one website look completely different from another comes down to CSS.

So, what exactly is it?

What Does CSS Stand For?

CSS stands for Cascading Style Sheets.

It’s a language used to control the appearance and layout of HTML elements on a webpage.

Remember the house example from our HTML guide?

HTML builds the house. CSS decorates it.

HTML gives you the walls, doors, and rooms. CSS decides what color the walls are, how big the rooms appear, where everything is positioned, and what style the house has.

What Does CSS Look Like?

Let’s say we have this simple HTML heading:

<h1>Hello, World!</h1>

By itself, your browser will display it using its default styling.

Now we can add some CSS:

h1 {
  color: blue;
  font-size: 40px;
  text-align: center;
}

Those few instructions tell the browser to make the heading blue, increase its size, and place it in the center of the page.

The words haven't changed.

The way they look has.

How Does CSS Know What to Change?

CSS uses something called a selector.

Take another look at this:

p {
  color: green;
}

The p tells CSS to find paragraph elements on the page.

Inside the brackets, we give the browser styling instructions.

color: green; tells it what we want to change and what we want to change it to.

So if our HTML contains:

<p>I'm learning CSS!</p>

CSS can change how that paragraph appears without changing the actual words.

What Can CSS Change?

A lot!

CSS can control things like:

  • Colors

  • Fonts

  • Text sizes

  • Backgrounds

  • Borders

  • Spacing

  • Buttons

  • Image sizes

  • Page layouts

  • Animations

  • What a website looks like on different screen sizes

CSS is a huge reason modern websites can have completely different personalities even when they're built using similar HTML structures.

HTML vs. CSS

HTML and CSS work closely together, but they have different jobs.

HTML tells the browser what something is.

CSS tells the browser what it should look like.

For example, HTML might say:

<button>Click Me!</button>

That creates a button.

CSS could then say:

button {
  background-color: blue;
  color: white;
  padding: 10px;
}

Now we've changed its appearance.

Same button. Same words. Different design.

Where Does JavaScript Fit In?

This is where the three major pieces of beginner web development start coming together.

HTML = Structure

CSS = Appearance

JavaScript = Functionality

Imagine we have a button on a website.

HTML creates it.

CSS makes it look good.

JavaScript can make something happen when you click it.

Understanding those three roles makes learning how websites work much easier.

Is CSS Hard to Learn?

Basic CSS is very beginner-friendly.

You don't need to memorize hundreds of properties before you start experimenting.

Try changing just a few things:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  text-align: center;
}

Refresh the webpage and you'll immediately see your changes.

That's one of the fun parts about learning CSS — you get visual feedback almost instantly.

Change a value, refresh the page, and see what happens.

Why Learn CSS?

CSS is a great introduction to the design side of technology.

It teaches you how small instructions can completely change what someone sees on their screen.

It also gives you the freedom to experiment.

Don't like the color?

Change it.

Want the heading bigger?

Change it.

Want everything centered?

You can do that too.

Learning CSS isn't just about memorizing properties. It's about experimenting, solving problems, and understanding how different pieces of a website work together.

Try It Yourself

Start with a simple HTML page:

<h1>My First Website</h1>
<p>I'm learning HTML and CSS!</p>

Then try adding:

h1 {
  color: purple;
  text-align: center;
}

p {
  font-size: 20px;
}

You just took basic HTML and started designing it with CSS.

And that's really what learning web development is about:

Build something. Change something. See what happens. Then keep experimenting.

 
 
 

Comments

bottom of page