Styling Text on Chapter 7

thuyhoang · September 25th, 2013, 01:22 AM

This:

#navigation a {
color: #3399cc;
text-decoration: none;
}

doesn't seem to be working at all. It doesn't seem to get selected. The links are still underlined as usual.

roblarsen · September 25th, 2013, 08:11 AM

Can you show me the HTML you're trying to apply it to?

thuyhoang · September 25th, 2013, 09:16 AM

<nav id="navigation">
HOME
<a href="menu.html">MENU</a>
<a href="recipes.html">RECIPES</a>
<a href="opening.html">OPENING</a>
<a href="contact.html">CONTACT</a>
</nav>

roblarsen · September 25th, 2013, 09:20 AM

That should work. Unless the style sheet isn't attached to the document, that's all you would need. There is an example of that code working in the code downloads, so you can compare what you've done to that.

thuyhoang · September 25th, 2013, 09:49 AM

Nope, doesn't work. I even copied the html and css code over from your sample_application_one and inserted it into my code. It works in your code but not mine for some reason.

I copied the html and css code snippets to a new html file and it works.

roblarsen · September 25th, 2013, 10:03 AM

If it works in the example code and not in your version, it's not an issue with your browser or with the technical aspects of the code. You've got a bug somewhere in your implementation. A big part of programming is finding out where the bugs are. The good news for you is that you can compare a working example with one that isn't working.

What browser are you using to test?

thuyhoang · September 25th, 2013, 10:12 AM

I'm using Chrome.

roblarsen · September 25th, 2013, 10:21 AM

So if you hit F12 and then right click on the menu you're trying to style, you can click "inspect element" which will open the developer tools with that element selected. It will tell you, in the right hand pane, where it's styles are being inherited from.

You can also look at the the Network tab to see if the style sheet is being properly loaded. There's a lot there that can help you figure out what's wrong with your implementation.

thuyhoang · September 25th, 2013, 05:08 PM

The only difference I see using F12 is that there are quotes around the HOME word. Like this:

Code:

   <nav id="navigation">
    	" HOME "
        <a href="menu.html">MENU</a>
        <a href="recipes.html">RECIPES</a>
        <a href="opening.html">OPENING</a>
        <a href="contact.html">CONTACT</a>
    </nav>

Quote:

Originally Posted by roblarsen

So if you hit F12 and then right click on the menu you're trying to style, you can click "inspect element" which will open the developer tools with that element selected. It will tell you, in the right hand pane, where it's styles are being inherited from.

You can also look at the the Network tab to see if the style sheet is being properly loaded. There's a lot there that can help you figure out what's wrong with your implementation.

roblarsen · September 25th, 2013, 08:35 PM

What does the rest of your HTML file look like?