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

JavaScript

Sharina V. Jones
Sharina V. Jones
11,459 Points
Posted by Sharina V. Jones
Sharina V. Jones
11,459 Points

Applying Style to part of a header

I'm trying to apply style to just part of my headers but I'm not sure how. Basically, I want the style applied up to the / on the sidebars. Please help.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sharina V. Jones | Tampa Tramps</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,800,600' rel='stylesheet' type='text/css'>
    <script src="jquery.min.js"></script>
    <script>
      $(function() {
        $('h4.ent').prepend("Places / ").css({"color": "#AE22D1"});
        $('h4.art').prepend("Art / ");
        $('h4.food').prepend("Food / ");
      });
    </script>
    <link rel="stylesheet" href="../css/mag-css.css">
    <link rel="stylesheet" href="../css/mag-responsive2.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>           
      <a href="../index.html">
          <img src="../img/logo.png" alt="text Sharina V. Jones" class="logo">
        </a>
      <nav>
      <ul>
          <li><a href="#">Art</a></li>
          <li><a href="#">Music</a></li>
          <li><a href="#">Food</a></li>       
      </ul>
      </nav> 
    </header>
    <div class="main-wrapper">
      <section class="section-one">
          <div class="sidebar col-one">
          <ul>
            <li>
              <img src="../img/da_vinci.jpg" alt="da vinci" class="thumb">
              <h4 class="ent">In Scene!</h4>
              <p>Bacon ipsum dolor amet ham hock ribeye turkey capicola boudin brisket alcatra landjaeger spare ribs flank.</p>
            </li>
            <li>
              <img src="../img/5music.jpg" alt="digital sound waves" class="thumb">
              <h4 class="art">To my ears...</h4>
              <p>Rump kevin pork belly turducken. Fatback shank sausage, spare ribs pork chop chuck filet mignon salami tenderloin pig t-bone biltong.</p>
            </li>
            <li>
              <img src="../img/candy-image.jpg" alt="candy" class="thumb">
              <h4 class="food">Food Junkie</h4>
              <p>T-bone in meatloaf proident, boudin short loin brisket voluptate fatback eiusmod.</p>
            </li>
            <li>
              <img src="../img/pap.jpg" alt="man taking a photo" class="thumb">
              <h4 class="ent">Celeb Watch</h4>
              <p>Ribeye pastrami shank tail ham hock frankfurter short loin jerky filet mignon bresaola. Short ribs ribeye prosciutto, jerky flank landjaeger sirloin corned beef.</p>
            </li>
            <li>
              <img src="../img/ground_level.jpg" alt="skateboard park" class="thumb">
              <h4 class="art">Ground Level</h4>
              <p>Pork loin porchetta cow beef pork belly pork. Doner t-bone ham chicken sausage pancetta drumstick jowl.</p>
            </li>
            <li>
              <img src="../img/skillet_small.jpg" "a cast iron skillet with food" class="thumb">
              <h4 class="food">Home Skillet</h4>
              <p>Doner ut reprehenderit, esse mollit tempor fatback labore ea chicken excepteur ham voluptate tenderloin leberkas.</p>
            </li>
          </ul>
        </div>
        <div class="col-two">
          <ul class="art-col">
            <li><h1 class="section-label">Arts!</h1></li>
            <li>
              <img src="../img/marquee.jpg" alt="Tampa Theater marquee" class="marquee">
              <div class="event">
                <h4>Tampa Theatre</h4>
                <p class="caption">The convenience of a movie theater with the history of an opera house.</p>
              </div>
            </li>
            <li>
              <img src="../img/StrazCenter.jpg" alt="Tampa Straz Center" id="straz">
              <div class="event">
                <h4>Straz Center</h4>
                <p class="caption">Sometimes it's broadway and sometimes it's <em>way</em> off broadway. Whatever the case, it's always entertaining.</p>
                </div>
              </li>
            <li>
                <img src="../img/photographic.jpg" alt="Picture of the Florida Museum of Photography" id="photo">
              <p class="caption">Where Instagram is put to shame.</p>
            </li>
          </ul>
        </div>
     </section>
      <section class="section-two">
        <div class="col-three">
          <ul class="music-col">
            <li><h1>Florida Night Heat</h1></li>
            <li>
              <iframe width="560" height="315" id="yt" src="https://www.youtube.com/embed/IksgUQ-CTvA" frameborder="0" allowfullscreen></iframe>
            </li>
            <li>
              <img src="../img/FNH.jpg" alt="Florida Night Heat" id="fnh">
              <div class="fnh-caption">
              <h4 class="fnh">Florida Night Heat</h4>
              <h5 class="fnh">Instrumental Band</h5>
              <p class="fnh">Funk? New age? Psychedelic? Awesome!</p>
              <a href="https://www.facebook.com/floridanightheat"><img src="../img/facebook.png" alt="facebook logo" class="social-icon"></a>
              <a href="https://twitter.com/floridaniteheat" target="_blank"><img src="../img/twitter.png" alt="twitter logo" class="social-icon"></a>
                </div></li>
            <li><h1 class="section-label">Music!</h1></li>
            <li><img src="../img/Andre_Jones_FNH.jpg" alt="Florida Night Heat bassist Andre Jones" id="dre"></li>
            </ul>
          </div>

        <div class="col-four">
        <ul class="food-col">
          <li><img src="../img/cafe-hey.jpg" alt="Window of Cafe Hey" id="hey"></li>
          <li><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3524.194107880321!2d-82.46053500000001!3d27.95734100000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c2c463eb3e3b41%3A0x9589c4777076dd92!2sCafe+Hey!5e0!3m2!1sen!2sus!4v1429381299312" width="600" height="450" frameborder="0" style="border:0"></iframe></li>
          <li><h4>Cafe Hey</h4>
          <p>1540 North Franklin Street, Tampa, FL 33602</p></li>
          <li><h1 class="section-label">Food!</h1></li>
        </ul>
          </div>
      </section>
    </div>
    <footer>
      <p>&copy; 2015 Sharina V. Jones</p>
    </footer>
   </body>
 </html>

1 Answer

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi fallencloud,

If I am understanding your question correctly, you want some text in your headers to have a certain style.

Why not just use a span around that specific text?

<h4 class="ent"><span>Places / </span>In Scene!</h4>

You can target that span and give the text a different color.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

Hugo,

I'm trying to build my jQuery skillset. I know there's a way to do this. I'm pretty sure there was something similar in the jQuery course in Treehouse, but it's been a while since I've taken it. I was hoping someone knew without me having to cycle through the videos again.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Well my answer still works. In your prepend method just wrap the text inside a span.

Marcus Parsons
Marcus Parsons
15,719 Points

Hey fallencloud,

Hugo's answer is a best practice way of doing this. Although you can do this with jQuery, I wouldn't recommend it (nor would a lot of others). If a user has JavaScript disabled in their browser, your styles will fail to appear. Instead, if you did a <span> and then target it with CSS, it will be displayed regardless.

h4.ent span {
color: #ae22d1;
}

h4.art span {
/* styles here */
}

h4.food span {
/* styles here */
}

Keep to this methodology: let HTML control what should be originally displayed (and what should be displayed regardless of anything else), let CSS control the styling of elements, and let JavaScript control interactivity.