Going Further with Styling

Hey there, welcome back to Learn As You Code: HTML & CSS! Today, we’re diving deeper into the world of styling. Up until now, we’ve been styling elements directly. But what if you have two <h2> elements and want each to look different? Enter CSS selectors!

Element Selectors

You’re already familiar with these, but let’s recap:

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

This ruleset targets all <h1> elements, setting their font size, family, and weight. Element selectors are great for broad strokes, like setting a style guide for your whole page. But let’s face it, not all <p> tags should look the same. For more specific styling, we need to up our game!

Class Selectors

Classes to the rescue! Want two <p> tags to look different? Add classes:

<p class="big red">This text is BIG and red.</p>
<p class="small blue">This text is small and blue.</p>

Each <p> tag has two classes. In your CSS, target these classes with a .:

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

Boom! Styles applied. You might ask, “Why not combine styles into fewer classes?” Good question! I like to keep classes flexible. You never know when you might want to reuse small without blue.

Id Selectors

For unique elements, use IDs. Check this out:

<p id="name">My Name is Nolan!</p>

Use IDs sparingly, only once per page. Target them in CSS with #:

#name {
  text-decoration: underline;
}

Simple, right?

Conflicting Styles

Now, what if an element has both a class and an ID? Like this:

<p id="red" class="blue">Will I be red or blue?</p>

It’ll be red! Why? Because IDs are more specific than classes. Here’s a quick example:

<p id="red" class="underline">I’m styled by three rulesets!</p>

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

The text turns red and gets underlined, with a font size of 12px. IDs trump classes, which in turn override element selectors. This cascade of styles makes your page look polished without repeated code.

Challenge

Time to level up your About Me page! Here’s your mission:

• Set default styles for <h1>, <h2>, and <p> using element selectors.
• Add a tagline under your name with a <p> tag and style it using an ID.
• Jazz up other text using class selectors.

Play around with conflicting styles and see which rules win. Can you figure out why?

Thanks for reading! Let me know if there are any other topics you’d like me explore in this series in the comments, or just let me know how you’re enjoying the series!