CSS CSS Basics Basic Selectors Descendant Selectors

Hannah Douglas
seal-mask
.a{fill-rule:evenodd;}techdegree
Hannah Douglas
Full Stack JavaScript Techdegree Student 1,365 Points

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

joelearner
joelearner
48,727 Points

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!

Muhammad Khan
PLUS
Muhammad Khan
Courses Plus Student 2,398 Points

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.