CODEWITHSUNDEEP
htmlcss
equanimity
equanimity

Reputation: 2533

Remove underline from href attribute that reference a Django template

At the top of one of my website pages, I have some text representing the name of my company. When the user clicks the text (a link in this case), they are redirected to the index route via the Django template.

Currently, the text is decorating. It's always the traditional blue color of a hyperlink and it's underlined when the user hovers over it. I'm trying to turn off this text decoration. Here is my attempt (which doesn't work):

layout.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="{% static 'my_app/styles.css' %}" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
    </head>
    <body>
        <div id="logo">
            <a href="{% url 'index' %}">ABC Company</a>
        </div>
    </body>

CSS

#logo {

    font-family: 'Pacifico', serif;
    text-align: center;
    font-size: 60px;
    font: 400 100px/1.5;
    color: #2b2b2b;
    text-decoration: none;

}

#logo:hover {
    text-decoration: none;
}

If I remove the href, the text goes back to the color specified in the #logo id in the CSS.

Any ideas why the text-decoration isn't being turned off?

Thanks in advance!

Upvotes: 0

Views: 924

Answers (1)

SANGEETH SUBRAMONIAM
SANGEETH SUBRAMONIAM

Reputation: 1074

set the decoration of the hyperlink to the anchor tag of the div logo

   #logo a {
        color: #FFFFFF;
        text-decoration: none;
        and your other decorations
    }

Upvotes: 2

Related Questions