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.
Converting comments to answer:
Using this, you can specify styles within a given container:
#logo a {
color: red;
/* ... */
}
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;
}
If the HTML is like this;
<div id="logo">Banner Text</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;}
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;
}
Related
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I define a css file my_style.css and use it in my page.
body {
background-color: linen;
}
.myClass1 a:link,
a:visited {
color: orange;
margin-left: 40px;
}
.myClass2 a:link,
a:visited {
color: green;
margin-left: 40px;
}
<html>
<head>
<link href="my_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a class="myClass1" href="http://www.youtube.com">Link1</a>
<a class="myClass2" href="http://www.youtube.com">Link2</a>
</body>
</html>
Why are both links green?
Both links are green because:
.myClass2 a:link,a:visited { /* foo */ }
reads as:
.myClass2 a:link { /* foo */ }
a:visited { /* foo */ }
and not as:
.myClass2 a:link { /* foo */ }
.myClass2 a:visited { /* foo */ }
You need to put the full selector in each part of the group.
.myClass2 a:link,
.myClass2 a:visited { /* foo */ }
Additionally, since the links themselves are members of the class, you don't want the descendant combinator in there.
a.myClass2:link,
a.myClass2:visited { /* foo */ }
You forgot the class selectors before the a:visited selectors
a.myClass1:link, a.myClass1:visited{
color: orange;
margin-left: 40px;
}
a.myClass2:link, a.myClass2:visited{
color: green;
margin-left: 40px;
}
You are applying stiles to a:visited, two times. The first time you're setting color: orange, the second one color: green.
Obviously both links are already visited since both are the same.
CSS stands for "cascading style sheets", that essentially means that the last properties override the first ones.
Your confusion might be in regards of how the , (comma) works. It means that the styles are to be applied to both selectors (what's before and what's after the comma).
Also, on your CSS the classes are applied to a parent of the a tag instead to the a tag itself. Here's an approach to a solution (since I don't know what you're trying to achieve:
/* this will apply to all <a> tags with class myClass1 */
a.myClass1 {
color: orange;
}
/* this will apply to all <a> tags with class myClass2 AND to all visited a tags even if they are of class myClass1 */
a.myClass2,
a:visited {
color: green;
}
/* This is so you don't write the same twice (DRY principle) */
a.myClass1,
a.myClass2 {
margin-left: 40px;
}
Essentially on your posted HTML, both links will be green. If you change one of them to a page you haven't visited, it will be orange.
your current css of:
.myClass1 a:link,
a:visited {
color: orange;
margin-left: 40px;
}
.myClass2 a:link,
a:visited {
color: green;
margin-left: 40px;
}
reads as the following:
for myClass1's descendant a anchor tag that hasn't been visited (link), and for a anchor tag that has been visited make text color orange and make its left margin 40px.
then for myClass2's descendant a anchor tag that hasn't been visited, and for a anchor tag that has been visited, make the text color green and make its left margin 40px;
as the others have said before, the , a:visited css is changing all the anchor tags to green because css applies its styles top down and green is the last reference of the element type.
you have to reference the full selector. that being said, the previous answers include the descendant selectors (which will not work) since the anchor element is the same as the class element. therefore something like this is what you're looking for
body
{
background-color: linen;
}
a.myClass1:link, a.myClass1:visited{
color: orange;
margin-left: 40px;
}
a.myClass2:link, a.myClass2:visited{
color: green;
margin-left: 40px;
}
<a class = "myClass1" href = "http://www.youtube.com">Link1</a>
<a class = "myClass2" href = "http://www.youtube.com">Link2</a>
by not leaving the space between a and .Class1, the css denotes that they are the same element (versus the space in between them denoting descendant of)
hope this helps
I have hyperlinks that i want to change color on Mouse hover to show that they are responsive and get rich user interface but i am not able to achieve this..
Here is the fiddle..
Fiddle
And Here is the HTML...
<div id="footer" class="footer-shadow">
<div style="margin-left:auto; margin-right:auto; width:960px; ">
<div id="footerAboutUS" style="float:left; width:150px; position:relative; margin-left: 10px; margin-top: 7px;">
<label style="font-size:18px; color: #6c3f00;">About US</label>
<br/> Our Delivery Model
<br/> Solution Area
<br/> List of Industries
<br/> IT Management
<br/> Lines of Business
</div>
</div>
try to remove the a lement style attribute that overriding your css
then then use tag as below
<style>
a {
color: gray;
text-decoration: none;
font-size: 11px;
}
a:hover {
color: red;
}
</style>
You can set a different color on mouse over using 'hover' pseudo class of CSS.
Example:
.footer-shadow a:hover {
color: red;
}
Fiddle: http://jsfiddle.net/z45Xz/1/
Use class in place of style
like :
.class1{
color: gray;
text-decoration:none;
font-size: 11px;
}
and change color on hover like
.class1:hover{
color: blue;
text-decoration:none;
font-size: 11px;
}
First, remove color gray from your a elements (In you html file). Then insert this into your css:
a {
color: gray;
}
a:hover {
color: red;
}
With demo: http://jsfiddle.net/RubberPoint/d9n79/
First, Don't use inline style for <a> tag as color: gray;. because if you use inline style ,you can't override the another style (internal,external).
a{
color: gray; //you can add your more style here
}
and for mouse change over use this.
a:hover{
color: blue; //you can add your more style here
}
Otherwise, use some ID or class for html element to avoid generic changes for all <a> tag
Just add :hover selector and add !important rule to override the current style
Check this link: http://jsfiddle.net/z45Xz/4/
.footer-shadow a:hover{
color: red !important;
}
First thing as mentioned in above answers Don't use inline style.
And just
a{
color:grey;
text-decoration:none;
}
and for changing the color when u hover the mouse use psedo class "hover" like
a:hover
{
color:green;
}
I am trying to simplify my CSS and can't get my head around why I can't apply styles to different element types with the same class.
For example, the below will only style all the .forum elements navy, but the other more specific styles are ignored. Is there a way around this?
EDIT http://jsfiddle.net/fWvxs/
HTML
<h1 class="forum">Forum Header</h1>
<p class="forum">Forum Content</p>
<small class="forum">Small deets</small>
CSS
.forum {
color: navy;
}
.forum h1 {
text-decoration: underline;
}
.forum small {
font-size: 2em;
}
Try this:
.forum {
color: navy;
}
h1.forum {
text-decoration: underline;
}
small.forum {
font-size: 2em;
}
Note that you used the wrong selector, .forum h1 means selecting the h1 which is one descendant of the .forum while h1.forum means selecting the h1 element having class forum.
it should be like this
h1.forum {
text-decoration: underline;
}
.forum h1 { //this applies to a h1 inside the .forum class element
text-decoration: underline;
}
this should work
.forum {
color: navy;
}
h1.forum {
text-decoration: underline;
}
small.forum {
font-size: 2em;
}
You have problem in Css Style,
Correct CSS is:
.forum {
color: navy;
}
h1.forum {
text-decoration: underline;
}
small.forum {
font-size: 2em;
}
It depends also what you want to achieve. In case you want to have define a forum style. You better add the class for example to the div instead of each element individually. You would otherwise repeatedly adding the class forum to each element.
<div class="forum">
<h1>Forum Header</h1>
<p>Forum Content</p>
<small>Small deets</small>
</div>
.forum {/* PUT HERE THE FORUM DEFAULT STYLES WHICH ARE COMMON LIKE IE. COLOR, FONT-SIZE */}
.forum h1 {/* PUT HERE H1 FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum p {/* PUT HERE P FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
.forum small {/* PUT HERE SMALL FORUM STYLES WHICH ARE SPECIFIC -THESE WILL BE OVERRIDDEN IF DECLARED in .forum {} */}
On the other hand if you need to apply a forum style to an individual element like a p and not the other elements you add the class to the element directly.
<div>
<h1>Forum Header</h1>
<p class="forum">Forum Content</p>
<small>Small deets</small>
</div>
p.forum {}
I am trying to create a pure CSS hover effect on a block of text. This is the html..
<p class="background-switch">Ok, <span style="color:red;">now that</span> you've done that, hover me next!</p>
and the CSS..
.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}
.background-switch:hover {
background-color: lightblue;
color: white ;
}
It works fine without the <span> in the <p> tag..but the thing is I need the color of the "now that" to be red before hovering, and white when hovering. This is not the case as the red refuses to turn white when hovering. Is there a way to make the class property applicable to the <span> too?
Because you have:
<span style="color:red;">
Which is an inline style, it's not getting over-ridden.
The best way to fix this is to move that inline style to the CSS
.background-switch span {color:red;}
.background-switch:hover span {color:#fff;}
Or if you want to keep the inline style, then add !important in your CSS, so that the rule overrides the inline rule.
JSFiddle Demo
Add a class to your span
<p class="background-switch">Ok, <span class="random-class">now that</span> you've done that, hover me next!</p>
Then in your css :
.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}
.random-class {
color:red;
}
.background-switch:hover,
.background-switch:hover .random-class {
background-color: lightblue;
color: white ;
}
Try
.background-switch:hover span {
color: inherit !important;
}
You need !important to overwrite the inline styling on the span tag. Best would be if you replaced the inline styling with a class instead, this would remove the need for !important.
Your code does not work because of the selector precedence in CSS. Inline styles trump everything else. So:
<span style="color: red;"> ignores other styles.
Adding a class to your span will fix this:
<span class="something">
Remove the style="color:red;" from your span, and then add the following to your CSS:
.background-switch span {
color:red;
}
.background-switch:hover span {
color:white;
}
.background-switch span {color: red;}
.background-switch:hover span {color: #fff;}
Remove inline style from span
Adding something like this could help
.background-switch > span { color:red; }
.background-switch:hover > span { color:white; }
and remove the style inline style="color:red;