CSS Selectors & Layout

Welcome back! In Lesson 3 you learned how CSS can change the colors, fonts, and appearance of your HTML. Now it is time to go deeper. In this lesson you will learn how to target exactly the elements you want to style and how to control where things appear on the page. These two skills together are what make you feel like a real web designer. Let's dive in!

1. Element Selectors

The simplest kind of CSS selector is the element selector (sometimes called a "type selector"). You just write the name of the HTML tag you want to style — no special symbols needed.

For example, if you want every paragraph on your page to have dark gray text, you write:

p {
  color: #333;
}

That rule says: "Find every <p> element on the page and set its text color to dark gray." Here are a few more examples:

h1 {
  font-size: 32px;
  font-weight: bold;
}

li {
  margin-bottom: 8px;
}

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

2. Class Selectors

A class selector lets you style only the elements that have a specific class attribute. In your CSS, you write a dot (.) followed by the class name.

First, add a class attribute to the HTML elements you want to target:

<p class="highlight">This paragraph stands out.</p>
<p>This paragraph is normal.</p>
<p class="highlight">This one stands out too!</p>

Then, in your CSS, target that class with a dot:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

Only the two paragraphs with class="highlight" will get the yellow background. The middle paragraph stays unchanged.

The best thing about classes is that they are reusable. You can put the same class on as many elements as you like — paragraphs, headings, divs, links — and they will all share that style. Think of a class like a sticker you can place on any element that says "style me this way."

<style>
  .fancy {
    color: purple;
    font-style: italic;
    border-left: 4px solid purple;
    padding-left: 12px;
  }
</style>

<h2>My Favorite Things</h2>
<p class="fancy">I love learning to code.</p>
<p>Lansing has great coffee shops.</p>
<p>The river trail is beautiful in fall.</p>

3. ID Selectors

An ID selector uses the hash symbol (#) followed by the ID name. IDs work a lot like classes, but with one important rule: each ID can only be used once per page.

<h1 id="page-title">Welcome to Coders Farm</h1>

#page-title {
  color: #16825d;
  text-align: center;
}

So when should you use an ID versus a class?

• Use a class when you want to style multiple elements the same way (buttons, cards, highlighted text).
• Use an ID when you want to style one unique element (the main page title, a specific navigation bar, a particular section).

4. Combining Selectors

Once you are comfortable with element, class, and ID selectors, you can combine them for more precise targeting.

Descendant Selectors

A descendant selector targets an element that is inside another element. You write the outer selector, then a space, then the inner selector:

/* Only style links that are inside a nav element */
nav a {
  color: white;
  text-decoration: none;
}

/* Only style paragraphs inside a div with class "card" */
.card p {
  font-size: 14px;
  line-height: 1.6;
}

This is incredibly useful. It means you can have links in your navigation bar styled differently from links in your main content, even though they are all <a> tags.

Multiple Classes

An element can have more than one class. Just separate them with a space in the class attribute:

<button class="btn btn-primary">Sign Up</button>
<button class="btn btn-danger">Delete</button>

Here, both buttons share the btn class (which might set the font size, padding, and border radius), but each also has a second class that sets its own color. This pattern is used everywhere in professional web development.

5. The CSS Box Model

Here is one of the most important ideas in all of CSS: every single element on a web page is a rectangular box. Whether it is a heading, a paragraph, an image, or a button — the browser treats it as a box. Understanding how these boxes work is the key to controlling your page layout.

Every box has four layers, from the inside out:

1. Content — The actual stuff inside the element: your text, your image, your button label. This is the innermost layer.
2. Padding — A layer of transparent space between the content and the border. Think of it like the foam padding inside a shipping box that keeps the item safe.
3. Border — A visible (or invisible) line that wraps around the padding. Think of it as the cardboard walls of the shipping box itself.
4. Margin — A layer of transparent space outside the border. This pushes other elements away. Think of it as the empty space you leave between boxes when you stack them on a shelf.

Imagine you are mailing a gift to a friend in Lansing:

• The gift is the content.
• The bubble wrap around the gift is the padding.
• The cardboard box itself is the border.
• The space between your box and the next box on the shelf is the margin.

<style>
  .box-demo {
    background-color: #e0f5ec;
    color: #1a3a2a;
    padding: 20px;
    border: 4px solid #16825d;
    margin: 16px;
    font-family: Arial, sans-serif;
    font-size: 16px;
  }
  .box-demo-small {
    background-color: #ffeeba;
    color: #6b5900;
    padding: 8px;
    border: 2px dashed #d4a017;
    margin: 16px;
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
</style>

<div class="box-demo">
  I have 20px of padding, a 4px green border, and 16px of margin.
</div>
<div class="box-demo-small">
  I have 8px of padding, a 2px dashed border, and 16px of margin.
</div>

6. Introduction to Flexbox

Now for the exciting part: Flexbox (short for "Flexible Box Layout") is the modern way to arrange elements on a web page. Before Flexbox existed, laying out a page was surprisingly difficult. Flexbox makes it straightforward and even fun.

To use Flexbox, you set display: flex; on a parent container. The children of that container then become "flex items" that you can arrange in rows, columns, and more.

The Basics

.container {
  display: flex;
}

That single line changes everything. By default, all children of .container will line up in a horizontal row instead of stacking vertically.

Key Flexbox Properties

Here are the most important Flexbox properties you will use. All of these go on the parent container (the element with display: flex):

• flex-direction — Controls the direction items flow. Use row for left-to-right (the default) or column for top-to-bottom.
• justify-content — Controls how items are spaced along the main axis (left-to-right if direction is row). Common values: flex-start, center, space-between, space-around.
• align-items — Controls how items are aligned along the cross axis (top-to-bottom if direction is row). Common values: flex-start, center, stretch.
• gap — Adds space between flex items without needing margins. For example, gap: 16px; puts 16 pixels of space between each item.
• flex-wrap — By default, flex items try to fit on one line. Set flex-wrap: wrap; to let items wrap to the next line when they run out of room.

<style>
  .flex-demo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }
  .flex-item {
    background-color: #16825d;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    font-weight: bold;
  }
</style>

<div class="flex-demo">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

7. Interactive Exercise: Create a Card Layout

Time to put it all together! Cards are one of the most common patterns on the web. You see them on social media feeds, product listings, blog pages, and more. A "card" is simply a box that groups related content together — usually with a title, some text, and maybe a button.

In this exercise you will build a row of three cards using everything you have learned: class selectors, the box model, and Flexbox. The editor below has a working example. Read through the code, then try making changes:

• Change the card colors or border styles.
• Add a fourth card.
• Change justify-content to space-between or center.
• Try adding flex-wrap: wrap; to the container and making the cards wider.

<style>
  * {
    box-sizing: border-box;
  }
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  /* Flex container for the cards */
  .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  /* Each card uses class selectors and the box model */
  .card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 24px;
    width: 220px;
  }

  .card h3 {
    margin-top: 0;
    color: #16825d;
  }

  .card p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
  }

  .card .btn {
    display: inline-block;
    background-color: #16825d;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
  }
</style>

<div class="card-container">
  <div class="card">
    <h3>HTML Basics</h3>
    <p>Learn the building blocks of every web page. Tags, elements, and structure.</p>
    <a href="#" class="btn">Start Learning</a>
  </div>

  <div class="card">
    <h3>CSS Styling</h3>
    <p>Make your pages beautiful with colors, fonts, and layouts.</p>
    <a href="#" class="btn">Start Learning</a>
  </div>

  <div class="card">
    <h3>JavaScript</h3>
    <p>Add interactivity and logic to bring your web pages to life.</p>
    <a href="#" class="btn">Start Learning</a>
  </div>
</div>

Quick Recap

Let's review what you learned in this lesson:

• Element selectors (like p or h1) style every instance of a tag.
• Class selectors (like .highlight) style only elements with that class. They are reusable.
• ID selectors (like #page-title) style one unique element per page.
• Descendant selectors (like nav a) target elements nested inside other elements.
• The Box Model says every element is a box with content, padding, border, and margin.
• Flexbox uses display: flex on a container to arrange its children in rows or columns with properties like justify-content, align-items, and gap.

Test Your Knowledge

Great work completing this lesson! You now have the tools to select exactly the elements you want to style, understand how every element is a box with layers, and arrange elements on the page using Flexbox. In the next lesson, we will start learning JavaScript to add real interactivity to your pages. See you there!