Changing text color "inline" vs. in a style block?

HTML-CSS
1

I’m curious what the advantage is of creating a color class in a style block and then using it in your HTML element…

 <style>
   .red-text {
     color: red;
   }
 </style>

<p class="red-text">Example Text</p>

versus just changing the color inline…

<p style="color:red;">Example Text</p>

To me it just seems like an extra step. If I have to add the class in the HTML element anyway, just like I would with the color style, what’s the point?

2

You can add multiple styles for the same class.

.red-text {
  color: red;
  font-weight: bold;
  /* ... etc ... */
}

You can then use those same styles just by adding a class attributes to different HTML elements.

Even if you don’t plan on using multiple styles for a class, it makes it much easier to change the style in one place vs. looking for a lot of inline styles scattered throughout your page (or pages even).

3

Got it, thank you. I was thinking of a class only in terms of color, but that makes sense and now seems obvious that you can use multiple styles for one class.

4

Also you normally don’t have one element, you normally have tens or hundreds of elements. So, crude example, but you go from this, which is unmaintainable:

<p style="color: red">Some text.</p>
<p style="color: red">Some more text.</p>
<p style="color: red">Some text somewhere else.</p>
<p style="color: red">Some more text.</p>
<p style="color: red">Text.</p>
<p style="color: red">Some more text.</p>
<p style="color: red">Some other text.</p>

To this:

p {
  color: red;
}