CSS

In this session, we'll take our first steps into the world of CSS – Cascading Style Sheets. You'll learn how CSS helps us style and design web pages, from changing colors and fonts to adjusting alignments and spacing. Let's make the web look good!

Preparation

CSS Basics

In the first video, we'll explore the different ways you can apply CSS to your HTML, understand how inheritance works, and get familiar with some of the most common styling properties.

You can read about the concepts in depth here:

Adding CSS to our document
Using common selectors
Inheritance

Colors

Next we'll look at how to work with colors in CSS. We'll cover three popular color formats: RGB, hex and HSL. You'll also get a quick intro to hexadecimal numbers along the way.

If you want to know more, web.dev has a good resource on colors.

The Box Model

Let's explore the CSS box model — a core concept for understanding how elements are sized and spaced on a web page. You'll learn how content, padding, borders, and margins all fit together to shape every element on the screen.

Web.dev also has a good resource on the box model that you can check out.

CSS Selectors & Specificity

Lastly, we'll look at CSS selectors and how they let you target specific elements on your page. You'll also learn about specificity and the cascade — the rules CSS uses to decide which styles win when there's a conflict.

The concepts are also covered on web.dev:

Selectors
The Cascade
Specificity

Exercises

Even More You!

Make your personal website from last session truly your own by styling it:

Set a background color for the entire page.
Change the text color of specific elements (e.g., headings or paragraphs).
Choose a different font by updating the font-family and adjusting the font-size for better readability.
Center some of the content, such as the main heading or introduction text.
Come up with more styling improvements to your site!
Share your updated work in the comment section below.

Box Sizing

The HTML below contains two boxes. Change the width of the second box to match that of the first box.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Sizing</title>
        <style>
            .box {
                text-align: center;
                border: 10px solid;
                padding: 50px;
                margin: 20px;
                width: 400px;
            }

            .alternate {
                box-sizing: border-box;
            }

        </style>
    </head>
    <body>
        <div class="box">I use content-box box-sizing</div>
        <div class="box alternate">I use border-box box-sizing</div>
    </body>
</html>

Solution

.alternate {
    box-sizing: border-box;
    width: 520px;
}

A Taste For Selectors!

To practice your CSS selector skills, try out CSS Diner — a game where you have to select the right elements on a dining table using CSS!

A navigation bar should be a list of links! Build a horizontal navigation bar using the list below. Style the bar with background color, spacing, and hover effects, and create a style that highlights the active page link.

<nav>
    <ul>
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Here is an example of what the navigation bar could look like:

It might be worth noting that you can set the property list-style-type to none on list elements to remove their markers. Also, you can use the display property to set whether an element is treated as a block or inline box.

Example Solution

nav {
    margin: auto;
    font-family: sans-serif;
    font-weight: bold;
    background-color: #2196f3;
    padding-block: 1rem;
}

nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

nav li {
    display: inline;
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
    color: white;
    padding: 1rem;
}

nav a:hover {
    background-color: #1976d275;
}

nav a.active {
    background-color: #1976d2;
}

CSS Zen Garden

In this exercise, you'll use CSS to redesign the CSS Zen Garden webpage. The HTML stays the same — your task is to transform the look entirely through styling. We haven't covered everything yet (like layout techniques), so don't worry if your version isn't as elaborate as the examples on the site. Focus on practicing what you know and exploring what's possible with CSS!

When you're done, host your site and share the link in the comment section below!

Nice Work!

Take a few minutes to browse the work of your classmates. Leave a comment if something catches your attention

CSS