?What is the difference?

Tell us what’s happening:
Describe your issue in detail here.
I done this part but i want to done it with understanding it.

What is the difference between:

<h2 style="color: red;">CatPhotoApp</h2>


  {  color: red;}
<h2 class="red-text">CatPhotoApp</h2>

Your code so far

.red-text {
  color: red;

<h2 class="red-text">CatPhotoApp</h2>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
    <li>cat nip</li>
    <li>laser pointers</li>
  <p>Top 3 things cats hate:</p>
    <li>flea treatment</li>
    <li>other cats</li>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

Challenge: Use a CSS Class to Style an Element

Link to the challenge:

It didn’t show my codes.
I am asking the difference between using CSS selectors and using a CSS class to style an element.

The main difference between inline styles and selectors is specificity, maintainability, and shareability.

Specificity example:

<p style="color: red" class="color-class" id="color-id">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem impedit sit aliquid vel aut aperiam tempora voluptates, doloribus error quidem, libero facilis quam debitis. Dolorem eligendi quam odio in.</p>
/* non of the selectors can overwrite the inline style of color: red */

p {
  color: blue;

.color-class {
  color: yellow;

#color-id {
  color: green;

Your styles will also be much harder to maintain if they are inline and you can’t share the styles so you have to add the inline styles to every element you want the style on, as opposed to having a selector that targets all the elements (either using element type selectors or classes/ids).

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

i recall it was well explained in the lessons and it becomes more clear as you go on and from experience working with the two(and the likes).
The first is called inline style. It was priority over classes(and id), i.e. if you have an element which has inline style of color red and a class that sets its color to green, the color will be red.
Commonly style sheets and the html content are split into separate files and its perceived more comfortable to keep your styles in the css file, instead of write them inline in the html file. It can be harder to scroll around your html document and correct classes on the elements directly, much easier to go at the css file and edit the particular class(or another selector). Classes are also shared style rules. When you create a style to set an element color to red, you can then apply this style to many elements. Using classes over inline styling, makes the code less repetitive and one of the features of well written code, is to avoid repeat yourself

1 Like

Its been late but thanks for helping anyways

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.