red/pink tags in sublime

Question

Even though I'm following along the code instruction, Sublime is displaying the link tags in red! The page still looks right, but the HTML does not look like the example.

Every tag is red: html, head, meta, title, body, ing, ul, li, div, h1, p, img

Anyone know why this happens?

Answer 1 · 2014-03-22T19:07:49Z

March 22, 2014 7:07pm

You have a few errors in your code.

The first: Take a look at the closing h2 tag.

 <h2>inside the Kitchen<h/2>

The second: take a look at the closing a tag.

<p><a href="#" class="btn-small">"Read More"<a/>

The third: Look at the opening span tag.

<p>Call Us: <spann>1-555-CUP-CAKE</span><br>

If you were to have checked this using the W3 Validator it would have caught them as well. You can find it here Validator

Answer 2 · 2014-03-22T18:31:12Z

March 22, 2014 6:31pm

You have an error somewhere in your code. Can you paste in your code so that we can have a look? :)

Thanks!

Answer 3 · 2014-03-22T18:59:39Z

March 22, 2014 6:59pm

Sure thing! Thanks Adam.

Now the css file can't affect the webpage style. All tags are red. This started when I tried to fix the <meta> line.

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcak Company</title>
  <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
<body>

  <div class="container clearfix">
    <div class="grid_4">
      <img src="img/logo.gif" alt="Smells Like Bakin">
    </div>
    <div class="grid_8 omega"
      <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
      </ul>
    </div>
      <div id="intro">
        <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious deserts.</h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
      </div>

      <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">

      <div id="featured-cupcake">
        <h2>Cupcake of the Week</h2>
        <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavors willkick your tast buds into fiesta mode!</p>
        <img src="img/featured-cupcake.jpg" alt="Avocado Cupcake">
      </div>

      <div id="new-cupcakes">
        <h2>Fresh Out the Oven</h2>
        <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href "#">Jalapeno So Spicy</a>. <p>
        <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy"
      </div>

      <h2>inside the Kitchen<h/2>
      <p>Smells Like Bacon' started out in the garage of the husband wife duo Allison &amp; Joseph. Alisen is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
      <p><a href="#" class="btn-small">"Read More"<a/>

      <h2>Get Bakin' With Us</h2>

      <div id="contact">
      <p>Call Us: <spann>1-555-CUP-CAKE</span><br>
      Email us: <a href="#">bakeon@smellslikebakin.com</a><p>

      <p>We announce all of our flavors first through Facebook &amp; Twitter, and even take requests!</p>

      <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>

      <a href="https://www.twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>

      <div id="copyright">
        <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
      </div>

  </div>
</body>
</html>

Answer 4 · 2014-03-22T19:40:12Z

March 22, 2014 7:40pm

Thanks for the tip. I checked it with Validator and corrected all the errors (lots of closing tag mistakes). Now W3C says it's good, But Sublime shows red tags, and the ccs file does not look like its working.

Any more suggestions?

Answer 5 · 2014-03-22T19:44:23Z

March 22, 2014 7:44pm

Would need to see your corrections. :P

Answer 6 · 2014-03-22T19:50:59Z

March 22, 2014 7:50pm

Oh, of course! :-)

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcak Company</title>
  <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
<body>

  <div class="container clearfix">
    <div class="grid_4">
      <img src="img/logo.gif" alt="Smells Like Bakin">
    </div>
    <div class="grid_8 omega">
      <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
      </ul>
    </div>
    </div>
      <div id="intro">
        <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious deserts.</h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
      </div>

      <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">

      <div id="featured-cupcake">
        <h2>Cupcake of the Week</h2>
        <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavors willkick your tast buds into fiesta mode!</p>
        <img src="img/featured-cupcake.jpg" alt="Avocado Cupcake">
      </div>

      <div id="new-cupcakes">
        <h2>Fresh Out the Oven</h2>
        <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>. </p>
        <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
      </div>

      <h2>inside the Kitchen</h2>
      <p>Smells Like Bacon' started out in the garage of the husband wife duo Allison &amp; Joseph. Alisen is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
      <p><a href="#" class="btn-small">"Read More"</a>

      <h2>Get Bakin' With Us</h2>

      <div id="contact">
      <p>Call Us: <span>1-555-CUP-CAKE</span><br>
      Email us: <a href="#">bakeon@smellslikebakin.com</a><p>

      <p>We announce all of our flavors first through Facebook &amp; Twitter, and even take requests!</p>

      <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>

      <a href="https://www.twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>

      <div id="copyright">
        <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
      </div>

  </div>
</body>
</html>

Answer 7 · 2014-03-22T20:10:00Z

March 22, 2014 8:10pm

It sounds like you know what's going on. What do you mean "Place a space after the HTML"?

Answer 8 · 2014-03-22T20:18:39Z

March 22, 2014 8:18pm

The coding you pasted in the forum is not complete.

Make sure you paste the code correctly so the full code shows. That will allow me to debug it! :)

Thanks!

Answer 9 · 2014-03-22T20:20:49Z

March 22, 2014 8:20pm

That explains why it looked so weird. :-)

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcak Company</title>
  <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
<body>

  <div class="container clearfix">
    <div class="grid_4">
      <img src="img/logo.gif" alt="Smells Like Bakin">
    </div>
    <div class="grid_8 omega">
      <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
      </ul>
    </div>
    </div>
      <div id="intro">
        <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious deserts.</h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
      </div>

      <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">

      <div id="featured-cupcake">
        <h2>Cupcake of the Week</h2>
        <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavors willkick your tast buds into fiesta mode!</p>
        <img src="img/featured-cupcake.jpg" alt="Avocado Cupcake">
      </div>

      <div id="new-cupcakes">
        <h2>Fresh Out the Oven</h2>
        <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>. </p>
        <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
      </div>

      <h2>inside the Kitchen</h2>
      <p>Smells Like Bacon' started out in the garage of the husband wife duo Allison &amp; Joseph. Alisen is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
      <p><a href="#" class="btn-small">"Read More"</a>

      <h2>Get Bakin' With Us</h2>

      <div id="contact">
      <p>Call Us: <span>1-555-CUP-CAKE</span><br>
      Email us: <a href="#">bakeon@smellslikebakin.com</a><p>

      <p>We announce all of our flavors first through Facebook &amp; Twitter, and even take requests!</p>

      <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>

      <a href="https://www.twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"></a>

      <div id="copyright">
        <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
      </div>

  </div>
</body>
</html>

Answer 10 · 2014-03-22T21:01:50Z

March 22, 2014 9:01pm

One error here. No closing p

<p><a href="#" class="btn-small">"Read More"</a>

However everything else looks fine. Make sure that the CSS file you are linking to is inside the css folder as denoted in your link rel.

Answer 11 · 2014-03-22T21:13:52Z

March 22, 2014 9:13pm

Yeah that makes sense. Linked CSS files in css folder as denoted by del link. Got it working now. :-)

Thanks Adam!

Answer 12 · 2014-03-22T21:16:43Z

March 22, 2014 9:16pm

Great! :)

Code well!

Welcome to the Treehouse Community

Looking to learn something new?

James Bush

James Bush

red/pink tags in sublime

12 Answers

Adam East

Adam East

Adam East

Adam East

James Bush

James Bush

James Bush

James Bush

James Bush

James Bush

Adam East

Adam East

James Bush

James Bush

Adam East

Adam East

James Bush

James Bush

Adam East

Adam East

Adam East

Adam East

James Bush

James Bush

Adam East

Adam East

James Bush

James Bush

Adam East

Adam East