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) Understanding Values and Units Styling the Intro Paragraph

Bryan Walton
PLUS
Bryan Walton
Courses Plus Student 952 Points
Posted by Bryan Walton
Bryan Walton
Courses Plus Student 952 Points

I don't understand the idea of a span element 'inside' a class - can you point me to some content that explains this?

Just need direction to some content that explains the span element.

index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>
    <div class="primary-content t-border">
      <p class="intro">
        Lake Tahoe is one of the most <span>breathtaking attractions</span> located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
      </p>
      <a href="#more">Find out more</a>
    </div>
    <footer class="main-footer">
      <p>All rights reserved to the state of <a href="#">California</a>.</p>
      <a href="#top">Back to top &raquo;</a>
    </footer>
  </body>
</html>
style.css 
/* Complete the challenge by writing CSS below */

.intro {
  font-size: 1.25em;
  line-height: 1.6;
}

3 Answers

Matthew Rigdon
Matthew Rigdon
8,223 Points
Matthew Rigdon
Matthew Rigdon
8,223 Points 
<header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>

The ID and class of a header modifies the header itself, and all of its children (the children being anything wrapped inside of the header). So lets say that the class of header makes the font size 50 px. The header serves as a sort of container, imagine a box, and anything wrapped inside this box also has the same attributes. So by default, the "span" class also will have 50 px as well. Now lets say we make the span's text color red by using the "title" class in <span>. Since "span" is already inside of the header, only span's color will change to red.

An analogy could be a bundle of paper. The box (header) contains the span (paper) and h1 (different colored paper). Now, just because the paper (span) is colored red doesn't mean that the box (header) also has to be red. Matter of fact, the box is brown. However, if you dipped the box in blue dye and let it sit there for a long time, it could dye the box and the paper blue.

So applying CSS to big containers like boxes make all of the things inside the box the same. However, if you only want something inside the box to change (the span), you would create a new class ("title") to modify that item so that it is separate and unique from the box and all other things inside the container.

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Bryan,

As usual, the Mozilla Developer Network breaks it down for easy comprehension.

Check out their explanation on the span element.

Bryan Walton
Bryan Walton
Courses Plus Student 952 Points
Bryan Walton
Bryan Walton
Courses Plus Student 952 Points

Thanks for the link Rich! I'll be visiting MDN more often.

Miguel Machado
Miguel Machado
21,673 Points
Miguel Machado
Miguel Machado
21,673 Points

I don't know what you have to do in this project, but a span is a tag that we can use small modifications in text without change a lot of things. Imagine that you want to change the text color, or font size for the text inside "span". Using span you just need to do "span{text-color: blue;}", or .intro span{...}. Now try to do the same using a new class or id. Basically a see a <span> like a tag to do some changes in text, without messing with the box model.