I know that this question has been asked here before, but none of the answers provided there seem to be working for me.
I have a stylesheet setting the color of all links to, let's just say, red. All the rest of the text on the page is plain 'ol black. I have a particular H1 element that is a link, but I do not want this H1 element to be red, like all other links. Instead, I just want it to be regular black, like all other text. No matter what I seem to try, though, it stays red as all other links.
This is the code I have in my stylesheet:
a:link {text-decoration: none; color: #B83131;}
a:visited {color: #B83131;}
I have tried specific styling for the specific H1 tag, but it doesn't help. I tried giving the H1 tag a class name and styling that class, but it didn't help. I feel like I am missing something here...
Did you set it to the anchor?
h1 a:link { color: black; }
If your markup resembles the below:
<h1>
Bleh
</h1>
Then you should be able to add the CSS rule as:
h1 a { color: #000; }
Related
I'm pretty new to CSS/HTML and I need a little help with styling. So I have a CSS style sheet where I did something like this
p{
color:black;
}
Then in my HTML, inside of my footer tag, I have a paragraph.
The problem I am having is that I want the color of the paragraph inside of my footer to be blue.
I tried doing something like this:
footer{
color: blue !important;
}
but it didn't work so I was wondering how I can get just the paragraph in my footer to be blue because I want the rest of my paragraphs to be black.
If the !important method is the wrong approach I was wondering why? From my research, I thought it was supposed to override any previous styling.
Answer:
Why is !important not working on my stylesheet?
It is working perfectly as it is designed.
How I can get just the paragraph in my footer to be blue
For this, please use the appropriate selector.
footer p{
color: blue;
}
That is a bad practice
Try doing something like this
For your Footer
HTML
<div class="footer">
<p>This is a paragraph.</p>
</div>
CSS
.footer p {
color: blue ;
}
Don't use important tags.
Imagine that I've been creating a website for 2-3 weeks now and suddenly I decide that I don't like the default black color of all text elements which don't have any CSS applied to them and that I want to change their color to something like #333333 which is a less black black.
Is adding color: #333333; to the body tag the correct way to do it? Could that have any negative effects on other elements that I have custom styling?
CSS prioritises the code lower down, for example, this:
<style>
p {
color: blue;
}
p {
color: green;
}
</style>
<p>Hello</p>
Would result in the color of the paragraph element becoming green.
So to answer your question, anything above your CSS properties for body would be overridden.
Also, id and class attributes take priority over position, so if you wanted to give the elements that you don't want to get changed a class and keep it as black that would work also.
Hope it helped.
I don't think it'll have any negative affects on any elements, however i would just reference the tags specifically to be sure like
p, h1, h2, h3, h4, h5, h6 {
color: #333333
}
But like the comment, give it a try and see how it turns out.
This is enough, as it allows for the color to be 'passed down' through the cascade. Place this at the start of your stylesheet:
body {
color: #333;
}
Avoid using inline styles:
<body style="color: #333"> <!-- Don't to this -->
Inline styles have a different specificity than CSS selectors, and it's a whole chapter in itself. Plus, it's easier to separate concerns and have you layout separate from your stylesheets. And have everything grouped together within your styles.
The most simple way to do so is by CSS the following way:
* {
color: #333333;
}
Changing color in HTML with the style attribute is actually never the best practice.
Im using bootstrap 4 if that matters, but I am trying to change the color of the texts within the anchor tags. I am using an external CSS file and can't seem to get it to work. This is probably a dumb question, but hey i'm new to front-end! Teach me wizards!
#home_nav {
background-color: #5680E9;
}
.home_text{
color:#ffffff;
}
<div class="container-fluid" id="home_nav">
<div class="row">
<div class="col-4">
<div class="display-2 home_text">Create</div>
<div class="display-2 home_text">Explore</div>
<div class="display-2 home_text">Your Library</div>
</div>
<div class="col-8">
</div>
</div>
</div>
Welcome to StackOverflow and also welcome to coding frontend!
I'll try to give some explanation.
.home_text {
color: #ffffff;
}
tells the browser to apply a white text color to elements that have the CSS class home-text.
color is also a so-called inherited property which means that child elements will also have color: #ffffff; (short: color: #fff;) unless more specific rules state otherwise.
In your case, the browser has default styles for many elements, including <a>. This is called user agent stylsheet and its rules apply unless overwritten by your css.
To overwrite a rule, your rule needs to be at least as specific as the user agent stylesheet rule.
The user agent stylesheet for anchors in e.g. Chrome looks like this:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
This is using webkit (the engine behind chrome used to be called "webkit", thus the naming) specific syntax which you shouldn't let throw you off. The important part is that it holds a rule for color which you want to replace with your color #fff.
On top of that, browsers also have a different default color for links which have already been visited. You either need to define this for your links too (e.g. #eee for pages already visited) or simply add a second selector (separated from the first by a comma) telling the browser not only to apply your color to a elements, but also a elements in visited state. This is done by adding :visited to a.
To sum it up, if you want all links on your page to be white, you'd go with this:
a, a:visited {
color: #fff;
}
If you want only a inside of elements that have class="home_text" to be white:
.home_text a, .home_text a:visited {
color: #fff;
}
If you have any further questions, or if something is unclear, just ask in the comments!
Happy trip into frontend!
you have to add the style to 'a' specifically
.home_text a{
color:#ffffff;
}
You can try this:
.home_text a {
color: blue;
}
If you don't want the underline then try this:
.home_text a {
color: blue;
text-decoration: none;
}
Use complete selector for css .. Ex. .home_text >a
If still not working ..color must beihg set somewhere else. So check other css or write ! important for color.
Little advice
Use the full path to an ID
#home_nav .home_text a
or
home .home_text a
Sometimes you save your nerves when the element does not want to change.
I have an HTML page where the links are specified blue by default for most of the body. I speficy it like this (using SASS):
a:link {
color: $link_new; // This is a blue colour
}
I have a navigation menu that has a blue background, so just in the header, I want to change the links to white. Up until recently, my header was contained in a DIV tag that had the ID "header". My code is like this:
#header a:link {
color: #ffffff;
text-decoration: none;
}
Recently, I thought I would change the div to be a <header> tag. Just change <div id="header"></div> to <header></header>. So, in my CSS, I have:
header a:link {
color: #ffffff;
text-decoration: none;
}
But, when I do this, the link text stops being white! I change nothing else, so I don't see how this can be. I reverted the <header> back to <div id="header">, and my links go back to being white, as they should be.
I don't get it. Does a <header> tag inherit differently or something? Why would the header tag pull the colour from the a:link declaration, and not the more local header a:link declaration?
Here is what the link element looks like under the ` when using the Firefox developer inspector:
And here is what it looks like with a <header> element:
As you are not using HTML5 (by seeing your Doctype) so you cannot used header element directly . As per HTML5 specification header is treated as HTML element. So simply change your Doctype and use this one <!DOCTYPE html> then you can use <header> element.
You need to add :link after a
Like this
header a:link {
color: #fff
}
You need to change a:link to a.
header a {
color: #ffffff;
text-decoration: none;
}
Please check the Jsfiddle demo
in first code you written code by using selector '#header a' and after you use <header> tag than you give style by using 'header a'
in this case ID's priority is high than class or element selector
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
http://css-tricks.com/specifics-on-css-specificity/
I'm trying to create my website so you can tell where you are just by the colour of the elements in each div. The website is only one page and I'm using jQuery to slide out sections of the website when you click to open that section (As opposed to having seperate .html's).
To show them which section they have open I'm making all links in each section the same colour as the text that opens that section. However I also want to have<a> </a> tags which aren't links to add a bit of colour to the site and to attract viewers to key bits of information. For this reason I want to only apply link effects to <a> </a> tags which are actually links... So I've tried this:
#box1 a{
color: #68cff2;
}
#box1 a:link:hover{
color: #ffffff;
background-color: #68cff2;
}
This works for the background-color as in it only changes the background colour for <a> </a>'s that have a href="..." but it doesn't change the color of the font for such links... is there any way to sort this?
The :link pseudo-class only applies to unvisited links, as opposed to all links. Remember that you have visited links to account for as well. You may need to repeat the selector for visited links, as I notice that you haven't done so:
#box1 a:link:hover, #box1 a:visited:hover {
color: #ffffff;
background-color: #68cff2;
}
(or just use #box1 a[href]:hover instead, more info)
I should add, though, that you shouldn't be using <a> tags to mark up things that aren't links and don't serve as anchors either, just to "add a bit of colour to the site and to attract viewers to key bits of information". That's not what they're designed for. A more semantic alternative would be something like <em> or <strong>, though of course you have to remove the italic or bold style if you don't want it:
#box1 a, #box1 em {
font-style: normal;
color: #68cff2;
}
#box1 a:hover{
color: #ffffff;
background-color: #68cff2;
}
Then you won't need to specify the :link and :visited pseudo-classes, since you can basically guarantee that all your remaining <a> elements are links.
Is there a need for a:link:hover{}? Just try using a:hover {}
a:hover will also affect the anchor tags, which can be confusing to end-users if they behave in the same way as links.