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!

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

Nuri Amari
Nuri Amari
8,212 Points
Posted by Nuri Amari
Nuri Amari
8,212 Points

Text-Decoration: None doesn't work

I am trying to remove the text-decoration on my navigation links. Text-decoration: none successfully removes the underline but not the colour.

Here is my HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Sodium Dev | Home</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic,700italic|Open+Sans:400italic,700italic,400,700,800,300' rel='stylesheet' type='text/css'>
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
            <a href = "index.html"><h1>Sodium Dev</h1></a>
            <nav>
                <ul>
                    <li class = "selected"><a href="index.html">Home</a></li>
                    <li><a href = "about.html">About</a></li>
                    <li><a href = "contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

Here is my CSS:

/***********************
GENERAL
***********************/

a {

    **text-decoration: none;**
}

/***********************
HEADER
***********************/

header {

    background: #66d6f7;
    width: 100%;
    margin-top: -25px;
}

h1 {

    font-family: "Ubuntu", sans-serif;
    text-align: center;
    color: white;
    padding-top: 20px;
    font-size: 3em;
    font-weight: normal;
}

nav li {

    list-style: none;
    display: inline-block;
    font-family: "Open Sans", sans-serif;
    color: white;
    padding: 10px 20px 10px 20px;
}

nav {

    text-align: center;
    background: #51abc5; 
}

nav a.selected, nav a:hover {

    color: #387789;
}

/***********************
HEADER
***********************/

body {

    font-family: "Open Sans", sans-serif;
}

2 Answers

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

The behaviour of the text-decoration property is not to remove color values. The none value just means that there is no decoration it's normal text. Have a read of this http://www.w3schools.com/cssref/pr_text_text-decoration.asp

Your code is working as expected http://jsbin.com/lareb/3/

If you want the link color to be something other than default blue you need to set it

a {
   color: red;
}
Nuri Amari
Nuri Amari
8,212 Points
Nuri Amari
Nuri Amari
8,212 Points

The issue is not the selector, it removes the underlines from all links. However, it does not change the colour. If I change the selector to have that pseudo class hover it only removes text-decoration from the link I hover on and only changes the colour because of the following css:

nav a.selected, nav a:hover {

    color: #387789;
}

The issue is with the text-decoration: none property. It fails to remove the colour alterations. I should mention that I also used the normalize.css file which if I'm not mistaken should remove such defaults as well.

Nuri Amari
Nuri Amari
8,212 Points
Nuri Amari
Nuri Amari
8,212 Points

Thank you very much, I believe I have solved my issue