CODEWITHSUNDEEP
htmlcss
user1125551
user1125551

Reputation:

How to prevent "a" styling from applying to a link?

I am trying to create a banner for my site without using an image. However, that banner is also a link.

Is there a way for me to override the use of the "a" (link) CSS styling from my div?

Assume the CSS looks like this:

a:link, a:visited {
    color: #176093;
}

#logo {
    color: red;
    font-size: 48px;
}

In other words, I'd like the CSS definitions for #logo to override the definitions for links.

Upvotes: 0

Views: 95

Answers (4)

bevacqua
bevacqua

Reputation: 48476

Your issue is the specificity of your selectors :link and :visited, you should override those as well:

#logo {
    font-size: 48px;
}

#logo:link, #logo:visited {
    color: red;
}

Upvotes: 0

earthdesigner
earthdesigner

Reputation: 169

If the HTML is like this;

<div id="logo"><a href="#">Banner Text</a></div>

then use CSS

#logo a:link, #logo a:visited{color:#176093;}

If HTML is like this

<a id="logo" href="#">Banner Text</a>

Then use CSS

#logo:link, #logo:visited{color:#176093;}

Upvotes: 0

Starx
Starx

Reputation: 78981

If you only want to apply your styles to the anchor within the div #logo, you have to use a selector like this:

#logo a { 
    color: red;
    font-size: 48px;
}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

Converting comments to answer:

Using this, you can specify styles within a given container:

#logo a {
    color: red;
    /* ... */
}

Upvotes: 1

Related Questions