Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Selectors Descendant Selectors

I'm still not sure what a span element is used for. Can someone explain here?

Watching the video on descendant selectors, I see what happened to the span element to turn it white. However, I'm not recalling what a span element is used for. Can someone explain?

3 Answers

It's used to group elements together for styling/formatting purposes. It doesn't have any inherent ramifications. It can be used just to display content. You might be wondering how it differs from a div... The span tag is used with inline elements whilst the div tag is used with block-level content

Hi Hannah,

The span tag "spans" areas of text in your html to your specification. So, using the CSS commands assign a class. Then use the class in the html to change styles at the precise location desired.

For example, say you want to make a section of your <p> tag bold. Start by creating a class and making the font-weight bold. Your code would look something like this:

.make-bold {
font-weight: bold;
}

Then in your html <p> tag, specify where you want the bold to start and place the closing tag where you want the bold style to end. Something like this:

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Duis <span class="make-bold">aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 

pariatur</span>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 

laborum.

</p>

Does this help?

Cheers!

Yes thank you! :)

Hi there, <span> element is inline container for phrasing content used to group elements for styling purposes with class or id attributes. <span> tag is much like the <div> element, but <div> is a block-level element (for paragraph or multiple lines) and <span> is an inline element.