What is CSS? A Beginner’s Guide to Styling the Web

NonTechyJune 22, 2025044 views

In our last guide, you built your very first webpage. You created the structure, the “skeleton,” using HTML. If you haven’t done that yet, I highly recommend you start with our HTML guide first.

Right now, your page is probably looking a little plain. That’s because HTML is only concerned with structure, not style. To add colors, change fonts, and create beautiful layouts, we need to use its partner language: CSS.

If HTML is the skeleton of your house, CSS is the paint, the furniture, and the interior design. It’s what makes a website go from a boring document to a beautiful, engaging experience. Let’s start styling.

What is CSS, Exactly?

CSS stands for Cascading Style Sheets.

Style: This one’s easy. It’s the code that applies styles—colors, fonts, sizes, etc.
Sheets: This refers to the fact that you write your styles in separate files, or “stylesheets.” This is a huge advantage! It means you can write one stylesheet to define the look of your entire website, instead of styling every single page individually.
Cascading: This is a key concept. It refers to the rules that browsers use to decide which style rule “wins” if you accidentally apply multiple, conflicting styles to the same element. We won’t worry too much about this today, but it’s good to know what the name means.

The Basic Syntax of CSS: How It Works

The syntax for CSS is simple and intuitive. It’s made up of three parts:

The Selector: What HTML element do you want to style? (e.g., the <h1> tag, all paragraphs <p>, etc.)
The Property: What aspect of it do you want to change? (e.g., its color, font-size, background-color, etc.)
The Value: How do you want to change it? (e.g., to blue, 16px, #F0F0F0, etc.)

It looks like this in code:

/* This is a CSS comment */

selector {
  property: value;
}

/* Let's style all H1 headings to be a nice blue color */
h1 {
  color: blue;
}

Three Ways to Add CSS to a Page

There are three ways to get this CSS code to affect your HTML. Let’s look at them, from the simplest to the best practice.

Inline CSS (The “Quick and Dirty” Way): You can add a style attribute directly to an HTML tag. This is only good for a tiny, one-off style change. <h1 style="color: red;">This heading will be red</h1>
Internal Stylesheet (The “Single Page” Way): You can put your CSS code inside a <style> tag right in the HTML <head> section. This is okay for a simple, single-page website. <head> <style> h2 { background-color: yellow; } </style> </head>
External Stylesheet (The Professional Way): This is the best practice and the method we’ll be using. We create a completely separate file just for our styles. This keeps our code clean and organized.

Let’s Style Our “About Me” Page

We are going to use the External Stylesheet method to style the index.html file we created in the last guide.

Step 1: Create Your CSS File

Go back to your My First Website folder.
Create a new file in the same folder as your index.html file.
Save this file as style.css.

You should now have two files in your folder: index.html and style.css.

Step 2: Link Your Stylesheet

Your HTML file doesn’t automatically know that style.css exists. We need to link them together.

Open your index.html file.
In the <head> section, add the following <link> tag.

<head>
  <title>Your Name's Page</title>
  <link rel="stylesheet" href="style.css">
</head>

This tag tells the HTML document to use style.css as its stylesheet.

Step 3: Add Your Styles

Now for the fun part! Open your empty style.css file and add the following rules. Read the comments to see what each rule does.

/* style.css */

/* Let's change the background of the whole page and use a nicer font */
body {
  background-color: #f0f8ff; /* A nice, light aliceblue */
  font-family: Arial, sans-serif; /* Use Arial, or a default sans-serif font */
}

/* Style our main heading */
h1 {
  color: #005a9c; /* A deep, professional blue */
  text-align: center; /* Center the heading */
}

/* Style the sub-headings */
h2, h3 {
  color: #333; /* A dark grey for readability */
}

/* Let's make the image circular and centered */
img {
  display: block; /* Allows us to use margin auto */
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%; /* This is the trick to make it a circle! */
}

/* Style our list of hobbies */
ul {
  list-style-type: square; /* Change the bullet points to squares */
}

/* Style the link to be more noticeable */
a {
  color: #d9534f; /* A nice red color */
  text-decoration: none; /* Remove the default underline */
}

/* Let's add an underline back when a user hovers over the link! */
a:hover {
  text-decoration: underline;
}

Step 4: See the Magic!

Save both your index.html and style.css files.
Go to your computer’s folder and double-click the index.html file to open it in your browser. If it’s already open, just hit refresh.

You should now see a beautifully styled webpage! The colors, fonts, and layout have all been transformed by your new stylesheet.

What’s Next? Making It Interactive

You’ve now mastered the two fundamental languages of the web: HTML for structure and CSS for style. You can build beautiful, static websites.

But what if we want our page to do something? What if we want to click a button and have the content change without loading a new page?

For that, we need the third core language of the web: JavaScript. In our next guide, we will begin our journey into programming and bring your webpage to life. Stay tuned!