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

Posted by Jason Ladieu
Jason Ladieu
10,635 Points

Text decoration issue

I can't seem to remove the text decoration from h1. Where did I go wrong?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Square Water Proofing</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
    <div class="container">
        <header>
            <div class="nav">
                <a href="index.html" id="logo" class="selected home" class="title">
                    <h1>Square Water Proofing</h1>
                </a>
                <nav>
                    <ul>
                        <li><a href="our_story.html">Our Story</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="beforeafter.html">Before & After</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                    </ul>    
                </nav>
            </div>
        </header>    
    </div>
    <div>
        <section>
            <banner>
                <img src="" class="banner-image">
            </banner>
        </section>
        <section>
            <h2>About Us</h2>
            <p>Something something something about us</p>
        </section>
        <section>
            <ul id="main-services">
                <li><a src=""></a></li>
                <li><a src=""></a></li>
                <li><a src=""></a></li>
            </ul>
        </section>
            <footer>
        </footer>
    </div>    
    </body>
</html>

/**********************
***Body***********/

body {
    margin: 0 5% 0 5%;
}


/**********************
***Header***********/


.title:link {
    text-decoration: none; 
    color:black

}

.title:active {
    text-decoration: none; 
}

h1 {
    text-align: center;
    margin: 0 auto;
    padding-left: 50px;
    font-size: 50px;
}


/**********************
***Navigation***********/


nav {
    text-align: center; 
    margin: 0 auto;
    font-size: 25px;
}

nav ul li {
    margin: 0 auto;
    display: inline;
}







/**********************
***Our_story***********/

.column {
    text-align: center;
    font-size:0;
    margin-top: 150px
}
.our-story-div {
    width: 43%;    
}

#primary {
    display: inline-block;
    padding-left: 5%;
    padding-right: 2%;
    font-size: 20px;

}

#secondary {
    display: inline-block;
    padding-left: 2%;
    padding-right: 5%;
    font-size: 20px;

}

4 Answers

Niilo Smeds
Niilo Smeds
12,540 Points

Try grouping your class names on line 12 into one class declaration instead of two, like so:

            <div class="nav">
                <a href="index.html" id="logo" class="selected home title">
Esbjörn Stenberg
Esbjörn Stenberg
7,420 Points
Esbjörn Stenberg
Esbjörn Stenberg
7,420 Points

You're using two class attributes. Combine the two different attributes two one, like so:

<a href="index.html" id="logo" class="selected home title">
    <h1>Square Water Proofing</h1>
</a>

Now the link tag will have three classes: selected, home and title.

HTML will only listen to the first class attribute and will therefor ignore the class title.

Jason Ladieu
Jason Ladieu
10,635 Points

Thank you for the help. I must have added that second class by accident.

Jason Ladieu
Jason Ladieu
10,635 Points

Thank you for the help. I must have added that second class by accident.

Jason Ladieu
Jason Ladieu
10,635 Points
Jason Ladieu
Jason Ladieu
10,635 Points

I changed the CSS to this, but now all h1 displays the text decoration at all times. I want to completely remove it. How would you suggest I got about doing so?

/**********************
***Body***********/

body {
    margin: 0 5% 0 5%;
}


/**********************
***Header***********/






.title:active {
    text-decoration: none; 
}

h1 {
    text-align: center;
    margin: 0 auto;
    padding-left: 50px;
    font-size: 50px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Square Water Proofing</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
    <div class="container">
        <header>
            <div class="nav">
                <a href="index.html" id="logo" class="selected home" class="title">
                    <h1>Square Water Proofing</h1>
                </a>
                <nav>
                    <ul>
                        <li><a href="our_story.html">Our Story</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="beforeafter.html">Before & After</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                    </ul>    
                </nav>
            </div>
        </header>    
    </div>
    <div>
        <section>
            <banner>
                <img src="" class="banner-image">
            </banner>
        </section>
        <section>
            <h2>About Us</h2>
            <p>Something something something about us</p>
        </section>
        <section>
            <ul id="main-services">
                <li><a src=""></a></li>
                <li><a src=""></a></li>
                <li><a src=""></a></li>
            </ul>
        </section>
        <footer>
            <a href=""><img src="" alt="" class=""></a>
            <a href=""><img src="" alt="" class=""></a>
        </footer>
    </div>    
    </body>
</html>
Jason Ladieu
Jason Ladieu
10,635 Points
Jason Ladieu
Jason Ladieu
10,635 Points

That did the trick! I must have added the second class by accident. Thanks for the help!