How to use CSS to style a web page

CSS stands for Cascading Style Sheets. It defines how elements on a web page should be displayed. Its syntax is simple and straightforward. CSS is not a programming language. There are no conditions, loops, or functions. Instead, it consists of structured text that instructs the browser on how to present elements to the user.

Before starting, make sure you have completed the previous sections, especially 1. First steps 🧑‍🎓, 2. Pushing further 🚀, and the lesson on HTML.

Want to know when new lessons are available? Subscribe to the newsletter ✉️ and give a ⭐ to the GitHub repository to keep me motivated! Click here to get in touch.

Setup

You don’t need to install anything for this lesson. Simply open an empty folder in VS Code, create an index.html file, and copy and paste the code from the previous lesson into it.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Alma Mater</title>
</head>
<body>
    <h1>My Alma Mater: UQAM</h1>
    <p>I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
    <img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
    <p>The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
</body>
</html>

A screenshot showing a basic HTML page.

Inline style

You can style specific HTML elements directly using the style attribute. The CSS syntax consists of properties assigned to values.

For example, we can set the color of the first paragraph to blue and the second one to red. We can also change the font-weight to bold.

Note that there are many different ways to define colors in code. Here, we are using color names. There are around 140 recognized color names that browsers understand. If you want to learn more about colors, check this tutorial.

In the style attribute, each property-value pair must be separated by a ;.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Alma Mater</title>
</head>
<body>
    <h1>My Alma Mater: UQAM</h1>
    <p style="color:blue; font-weight: bold;">I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
    <img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
    <p style="color:red; font-weight: bold;">The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
</body>
</html>

A screenshot showing inline CSS.

💡

VS Code recognizes some basic CSS properties and values, like colors. Here, it added a small square displaying the selected color. However, this is not part of the code. It’s just a visual guide provided by the code editor.

Using the `style` element

Selecting elements

Inline CSS can be useful for quick, simple projects, but it becomes difficult to maintain in long-term or complex projects. If you want to keep your CSS within the HTML file, it’s best to group everything inside a style tag.

With inline CSS, the browser knows exactly which element is being styled. However, when using the style element, we need to use selectors to specify which elements should be styled and how.

The syntax follows this structure: the selector comes first, followed by property-value pairs enclosed in curly brackets. The pairs must be separated by a ;. For example, the code below instructs the browser to apply bold formatting to all p elements on the page.

p {
    font-weight: bold;
}

💡

The indentation above is just to make the CSS more readable for us, humans. Browsers don’t need it and rely only on the code structure. Many developers use tools to minify their CSS by removing spaces and line breaks, creating smaller files that load faster and use less bandwidth. We’ll cover this topic in another lesson.

`id` selectors

Let’s update our previous code to use the style element. Since this is just to tell the browser how to display elements, we keep it in the head.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Alma Mater</title>
    <style>
        p {
            font-weight: bold;
        }
 
        #first-paragraph {
            color: blue;
        }
 
        #second-paragraph {
            color: red;
        }
    </style>
</head>
<body>
    <h1>My Alma Mater: UQAM</h1>
    <p id="first-paragraph">I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
    <img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
    <p id="second-paragraph">The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
</body>
</html>

A screenshot showing CSS within a style element.

Have you noticed the #first-paragraph (line 12) and #second-paragraph (line 16) selectors? And the id attributes in the HTML (lines 23 and 25)?

Since we want all p elements to be bold, we use the p selector for font-weight: bold. However, we also want the first paragraph to be blue and the second paragraph to be red, so we use ids.

In the HTML, we assign the id attributes first-paragraph and second-paragraph. This allows us to target these specific paragraphs in CSS using the #first-paragraph and #second-paragraph selectors (notice the # symbol).

Keep in mind that an id should be unique. Each one should appear only once on a page.

`class` selectors

Element selectors (like p) target all matching elements on the page. For example, all p elements can be styled as bold.

In contrast, ids are useful for targeting a single, specific element.

But what if you want to style multiple elements without affecting all of them? The answer is class selectors.

For example, let’s add a third paragraph and say we want the last two paragraphs to be red.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Alma Mater</title>
    <style>
        p {
            font-weight: bold;
        }
 
        #first-paragraph {
            color: blue;
        }
 
        .red-text {
            color: red;
        }
    </style>
</head>
<body>
    <h1>My Alma Mater: UQAM</h1>
    <p id="first-paragraph">I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
    <img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
    <p class="red-text">The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
    <p class="red-text">Montreal is a wonderful city. You should visit it!</p>
</body>
</html>

A screenshot showing CSS with classes.

In the code above, we replaced the id attribute and the second-paragraph property with a class attribute assigned the value red-text.

Now, we can use the class selector .red-text (note the .) to modify the style of all elements that have this class (in this case, the last two paragraphs).

You can assign a class to as many elements as needed.

More about selectors

If you want to override a property’s value, you must understand the hierarchy of selectors:

Inline styles override any styles defined by other selectors.
id selectors override styles defined by class and element selectors.
class selectors override styles defined by element selectors.
Element selectors are the weakest in terms of specificity.

Additionally, you can combine selectors for more precise styling. Read this for more.

Using a `.css` file

As a web project grows, its styles can become quite complex. To keep the code organized and easier to maintain, it’s best to separate the CSS into a dedicated file and link it to the HTML.

In this example, we created a new file called style.css and moved everything that was previously inside the <style> and </style> tags into this new file.

style.css

p {
    font-weight: bold;
}
 
#first-paragraph {
    color: blue;
}
 
.red-text {
    color: red;
}

In the HTML file, we removed the <style> and </style> tags and added a link to the new .css file. This tells the browser to apply the styles from the external file.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Alma Mater</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>My Alma Mater: UQAM</h1>
    <p id="first-paragraph">I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
    <img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
    <p class="red-text">The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
    <p class="red-text">Montreal is a wonderful city. You should visit it!</p>
</body>
</html>

A screenshot showing a CSS file linked to a HTML file.

As you can see, the styles are still applied. Note that you can link multiple .css files if needed.

Using a `.css` template

You can also use CSS files that are publicly available on the internet. This is particularly useful when you want to use open-source CSS templates.

One that I find quite well done is Simple.css. It takes care of styling every element on your page.

To use it, simply link to it in your HTML file. When you open your file in a web browser, the CSS file will be fetched and applied.

Below, I also removed the id and class attributes to simplify things.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Alma Mater</title>
    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
</head>
<body>
    <h1>My Alma Mater: UQAM</h1>
    <p>I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
    <img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
    <p>The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
    <p>Montreal is a wonderful city. You should visit it!</p>
</body>
</html>

A screenshot showing a CSS file linked to an HTML file.

💡

In the code above, simple.min.css is a minified version of the CSS file. If you open it, you’ll see some CSS code that is very difficult to read. It has been optimized to be as small as possible. Compared to the original CSS, which is easier for humans to read, the minified version is about 30% smaller. It loads faster and provides a better experience for the user. It also uses less server bandwidth, which can reduce costs for large projects with high traffic.

Conclusion

There is much more to learn about CSS and its 200+ properties, which, when combined, can create stunning visuals and even animations.

However, this lesson was just an introduction. With these foundations, you’ll be able to explore more on your own, and we will continue using CSS in future lessons and projects.

Now that we know how to structure a webpage with HTML and style it with CSS, it’s time to learn how to add user interactivity! 🥳

HTML JavaScript

How to use CSS to style a web page

Setup

Inline style

Using the style element

Selecting elements

id selectors

class selectors

More about selectors

Using a .css file

Using a .css template

Conclusion

Using the `style` element

`id` selectors

`class` selectors

Using a `.css` file

Using a `.css` template