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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

id tags

my id tags are simply not working in css. please help :(

27 Answers

Id tags? Tags are things like <p> and <body>. Think you mean the id-selectors? Those #id things?

id selectors sorry ie. <div id="wrapper">

Maybe you can post your code (html & css)?

<div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a>
</li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playin with blending modes</p> </a>
</li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 1970's style</p> </a>
</li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using photoshop</p> </a>
</li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a>
</li> </ul> </section> <footer> <a href="https://www.facebook.com/danny.mckenna2?ref=tn_tnmn"><img src="img/facebook-wrap.png"></a> <a href="https://twitter.com/dannymc1985"><img src="img/twitter-wrap.png"></a> <p>© 2014 Danny Mckenna.</p> </footer> </div>

lol well that didnt work too well. Is there somewhere I can post the code?

Try codepen.io or check the markdown cheatsheet under the textarea for a new form comment to upload code to the forums. :-)

Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,702 Points

Look just above the Post Answer Button for the small text that contains bold lettering that says Markdown Cheatsheet

This shows what characters to wrap around your HTML snippet of code, links, pictures, etc. so you are able to post it with your messages. The one you are looking for is Code and you use "backticks" which is the keyboard button just under the ESC key on your keyboard.

code  <div id="wrapper">
     <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>        
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playin with blending modes</p>
            </a>        
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 1970's style</p>
            </a>        
         </li>
         <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using photoshop</p>
            </a>        
         </li>
         <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition</p>
            </a>        
         </li>
        </ul>
      </section>
      <footer>
          <a href="https://www.facebook.com/danny.mckenna2?ref=tn_tnmn"><img src="img/facebook-wrap.png"></a>
          <a href="https://twitter.com/dannymc1985"><img src="img/twitter-wrap.png"></a>
        <p>&copy; 2014 Danny Mckenna.</p>
      </footer>
   </div>

oh dear, im having a nightmare arent i

<div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playin with blending modes</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 1970's style</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using photoshop</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a> </li> </ul> </section> <footer> <a href="https://www.facebook.com/danny.mckenna2?ref=tn_tnmn"><img src="img/facebook-wrap.png"></a> <a href="https://twitter.com/dannymc1985"><img src="img/twitter-wrap.png"></a> <p>&copy; 2014 Danny Mckenna.</p> </footer> </div>

CSS - ``` body {font-family: 'Lobster', Cursive; font-size: 1.2em;

}

a { text-decoration: none;}

img {max-width: 100%;}

wrapper

{max-width: 22px; margin: right; padding: 5%; }

logo

{text-align: center; margin: 0; }

h1 {font-family: 'Oxygen', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }```

the highlighted wrapper text has a hashtag in my CSS

I've putted it into a codepen: http://codepen.io/arthur_versch/pen/Jlvyf And it looks like the styling for the id's are working.

Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,702 Points

All of your Id tags are not working or is it only a select few?

If all of them arent working, Is any code from your CSS code working?

try doing a simple

``` body{ background-color: black; } ```

in your CSS and make sure the stylesheet is being applied to your HTML.

Thats what I thought but, its only a select few that dont work ie wrapper and gallery. everything on my css is working apart from when i use the id selector of wrapper and gallery

Actually, none of my id selectors are working ??

Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,702 Points

Hmmm. Your wrapper and gallery id have a hashtag before the w and the g with no space or any other character before or between it correct? 1 missed typo can mess up entire code segments. Or even missing a closing semi-colon.

Look on this: http://codepen.io/arthur_versch/pen/Jlvyf

When i apply a really simple style to the #wrapper, it works! Your id selectors are working.

Is your css-file correctly linked?

Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,702 Points

Are you using inline styling (that is where your css is on the same page as your HTML just in between style tags. Or are you using one of these in the HEAD section?

<link rel="stylesheet" type="text/css" href="someFile.css">

Chris - Yes I am typing both with a hashtag before the W and the G. And I am using a different file to write my css.

Arthur - All of my other css works fine so I imagine that the file is linked properly.

I will copy and paste the entire html and css.....

<!DOCTYPE html>
<html>
  <heac>
    <meta charset="utf-8">
    <title>Danny Mckenna | Entrepreneur</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Lobster|Oxygen:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">

  </heac>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Daniel Mckenna</h1>
          <h2>Creative genius</h2>
        </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected"> Portfolio</a></li>
          <li><a href="about.html"> About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
     <div id="wrapper">
     <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>        
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playin with blending modes</p>
            </a>        
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 1970's style</p>
            </a>        
         </li>
         <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using photoshop</p>
            </a>        
         </li>
         <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition</p>
            </a>        
         </li>
        </ul>
      </section>
      <footer>
          <a href="https://www.facebook.com/danny.mckenna2?ref=tn_tnmn"><img src="img/facebook-wrap.png"></a>
          <a href="https://twitter.com/dannymc1985"><img src="img/twitter-wrap.png"></a>
        <p>&copy; 2014 Danny Mckenna.</p>
      </footer>
   </div>
  </body>  
</html>
Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,702 Points

I contacted Treehouse support about the backticks issue. Use 4 spaces on each of lines you want to appear as code. Backticks seem to let some code be displayed sometimes.

4 spaces makes it look like this.

<div>I used 4 spaces before the start of this code.</div>

Thanks Chris

Ive corrected the head tag. Still cant find out why my selectors arent working though

Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,702 Points

Could you explain what your ID selectors aren't doing. What you are seeing? CodePen seems to be reflecting your CSS on all of my browsers. (Firefox, IE 11, and Google Chrome).

I also saved your code to a file and placed the CSS in a css subfolder within the same directory as the html code and it is working and reflecting the changes.

I am typing attributes to the selectors ie. align, color, padding etc. and nothing is happening when i refresh the browser. I was saving and refreshing. I am only a few hours into the track I may start again. I suppose that way, the method will stick in my mind. Thanks for your help guys, didnt expect such a quick/great response, it seems the development community is a very helpful one.

Danny

Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,702 Points

Hey Daniel,

So I think I found your problem, I just did some skimming and seen what we missed.

The CSS sheet is the problem.

So if you take a look at your CodePen link again, you will notice that you are defining multiple colors for different selectors in the same area.

For example: Your header tag wraps around the logo ID selector which is setting the selector of the a tag that states your name which is inside an h1 tag.

In your CSS you are setting these

    header{ background:#6ab47b; border-color: #599a68; }
    h1, h2 { color: #fff; }
    a { color:#6ab47b; }

since some are HTML elements and id selectors they are very general and apply to everything on your page. So they basically are fighting and 1 of them wins. All you have to do really is clean up the code a little bit. Combine the multiple occurrences of the same selectors or elements and combined them.

Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,702 Points

Here is another example.

because you set a tag to the following:

a { color:#6ab47b; }

this sets any text between ANY a tags anywhere on your page. This is handy if you want to change the color of how ALL links appear on your page. But if you go to the div with id wrapper you will see that it too has a tags. Now if you go in your CSS and try to set some color to the div with id wrapper.

#wrapper { color: #000000; }

this will change the text color to black AS LONG as it is NOT inside of an a tag.

#wrapper a { color: #555; }

this will change all text color to a dark gray within ALL a tags INSIDE of the div with id wrapper.