Using span with id selector


Can anyone explain color will be blue in the output? i dont understand this

This is the nature of CSS (Cascading Style Sheets). CSS is read from top to bottom, so the color property of all span elements is set as blue inside the HTML style tags.

If you add an id selector which sets the background-color as lightpink, this overrides the same property which was previously set in the span selector, for this specific id selector only (i.e. for this particular span element). All other span elements will still have the background-color property set to lime (unless overridden separately).

1 Like

ok but how is the width is not affected?

Hey yukta!

Can you please copy/paste your code here so its easier for others to help you

1 Like

Sorry, my initial explanation wasn’t the clearest, so I have edited it.
However, I actually don’t know why that given answer is ‘correct’ as the width property should be applied to that span element.

Hey!

span is an inline element and inline elements do not respect the width property. They are as big as the content in it (Imagine an element’s width set to max-content)

You can only apply width to it if you set the display property of the span element to either block or inline-block.

1 Like

Every day is a learning day, thanks @staranbeer!

1 Like

okay got it thanks! :slight_smile:

@igorgetmeabrain @yukawa.x
Here’s a great video if you guys want to learn more about it.

1 Like

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