Use Spans for Inline Elements (Challenge 74 question)

1

Here are the instructions for challenge 74:

By using the span element, you can put several elements together, and even style different parts of the same element differently.

Nest the word “love” in your “Things cats love” element below within a span element. Then give that span the class text-danger to make the text red.

Here’s how you would do this with the “Top 3 things cats hate” element:

<p>Top 3 things cats <span class = "text-danger">hate:</span></p>

Here is my code for the challenge and the result (see line 35):

image.png1389×840 388 KB

I don’t understand the use of span in this challenge. It’s supposed to somehow effect the width I think? All it’s doing in this case is changing the color of the text to text-danger, which I could have done without using span.

Is there something here I’m missing?

3

<span> is useful for styling only certain parts of text, without changing or introducing any semantics. It’s like a <div>, but whereas <div>s are block elements, <span>s are inline elements.

Also, challenges are not numbered. The 74 is your brownie points (sort of like your fCC score) and completing challenges isn’t the only way to get brownies.

4

basically kevcomedia summed it up; the effects one would normally apply with a span element could be achieved by using inline styling in the HTML code itself, but it’s cleaner code to do such inline styling by using the span.

5

Okay I think I understand. Thank you.