i am using a definitive style for my tags. now there is one tag that i do not wish to appear that way. how do i do it?
Give that one tag an ID, and then make a style for that specific ID. It will override the style you set for the "a" tags.
First, figure out the class or id of the element you want to change the style of using tools like firebug. Once you have found its class or id, search for it in the style sheet and modify the style as you like. If it still does not work, try appending the !important to your style, for example:
.myelement
{
color: #ff0000 !important;
font-size: 14px !important;
}
The !important will override any pre-defined styles.
You can't always reliably "unstyle" an element. For some style properties setting the value to auto, default or none will work:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style>
a { background: pink; }
a.normal { background: none; }
</style>
</head>
<body>
<p>link1
<p>link2
<p>link3
</body>
</html>
But not for example color. Replace background in above example by color. It won't work. You'll really need to force the color yourself, e.g. color: blue.
Related
I try to write some css code. Unfortunately I can't change the html code
, only the style part. In my project I have the style in a css file.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<style>
h1.my_class {
visibility: visible !important;
}
</style>
</head>
<body>
<h1 class="my_class" hidden>This is a heading</h1>
</body>
</html>
Can I override the "hidden" that's written in the html code with my css code. What is already written doesn't change anything.
Use display:block instead of visibility. Please see the below code
h1.my_class {
display:block;
}
<h1 class="my_class" hidden>This is a heading</h1>
h1.my_class {
display: inline;
}
Try this instead of what you've written, it should work.
I wonder why the element is hidden in HTML if it's supposed to be shown with CSS anyway? Of course the HTML markup might be something that comes from another source and you have no control over it.
So if you just change you're CSS to this:
h1.my_class {
display: block;
}
That would do it, no need to use !important here either. Here's a fiddle if you want to experiment with it: https://jsfiddle.net/27q7d157/
Well I tried your ideas. I can use
display: block
or
display: inline
but I must use
visibility: visible
too.
For just a text or image just the "display" is good. But for more like a hidden span inside a hidden div I have to use also
visibility:visible
This is more of a theoretical question.
Is the stack of overrides for CSS ad-infinitum? For instance, is there always a CSS override for every override?
Lets say I have written this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.a {
color: red;
}
/* Override it again */
div.a {
color: blue;
}
/* Again! */
body div.a {
color: yellow;
}
/* Again!! :) */
html body div.a {
color: yellow;
}
/* AND AGAIN!! */
html body div.a {
color: pink !important;
}
</style>
</head>
<body>
<div class="a">a</div>
</body>
</html>
Is !important combined with html body div.a the absolute highest level override for div.a?
Must there always exist something with a higher override?
In theory you can simply repeat a rule to increase the specificity.
.foo.foo.foo { }
In practise, browsers eventually treat a selector as having too many components and ignore it.
(There is also the style attribute, which is more specific than any selector)
inline styling with !important applied is the highest override I've ever used.
Example:
<div class="a" style="color: blue !important">a</div> Will override all other css applied
If you declare an inline style rule for div.a with the !important declaration it'll still override the rule declared in the <style> tag.
Any inline rule generally over-qualifies internally or externally declared styles, regardless of the number of selectors used to specify that rule. The only time an inline rule is over-qualified by internal or external styles is when the !important declaration is used - but if that declaration is used on an inline style you want to overwrite you'll be cursing.
In this case you'd need to apply some javascript to reset the attribute.
<head>
<link href="index.css" rel="stylesheet">
<style>
#amor_di_mundo{
color:#ffffff;
}
</style>
</head>
<body>
<div id='divL'>
<div id='amor_di_mundo'>Amor di Mundo</div>
<div id='quem_boe'>Quem Boe</div>
</div>
index.css
#divL div{
color:#800000;
}
In index.css a div (#amor_di_mundo) is styled with color:800000
In a specific file I need to overwrite it with color:#ffffff but it's not overwritten !
The problem is with css specificity: a inline style has more power than an external file. Use the same selector, and move the inline styles in a default stylesheet, then add your new styles in a desired file and load first the default stylesheet, then the second stylesheet that you want to overwrite with
The css would need to follow the same rule. So it would need to be
#divL div {
color: #ffffff;
}
You could mark it as important to get around this:
#amor_di_mundo {
color: #ffffff !important
}
As #divL div is more specific than #amor_di_mundo.
You need to apply either color: #ffffff !important to or write css like this:
#divL #amor_di_mundo{
color:#ffffff;
}
I think you need to put the syle attribute not in header but where the element is in the body itself. The syntax to follow is:
Style="color:#ffffff;"
Add it to the opening tag of the element.
I want to overwrite background and font color of a link.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link href="index.css" rel="stylesheet"/>
<style>
#abc{
background:#ffffff; // doesn't work
color:#008080; // doesn't work
}
</style>
</head>
<body>
<?php include 'inc/menum.php';?>
menum.php
<div id="divL">
<a href='abc.php' id='abc'>ABC</a>
<a href='universe.php' id='universe'>UNIVERSE</a>
<a href='strel.php' id='strel'>STREL</a>
</div>
index.css
#divL a{
background:#008080; // works
color:#ffffff; // works
}
You have a specificity issue.
The #divL a selector is more specific than #abc.
You could easily use #divL #abc and that would make the embedded rule more specific.
Use background-color and :link
#abc{
background-color :#fff;
}
#abc:link {
color:#008080;
}
instead. :link is the appropriate subclass here. color will only change the general color of the <div>, eg the content that is not anchor text..
Yeah! you have said that #divL a{....} works because it is selecting more specificity by selecting parent div if you can't override by just #abc{....} then you could place !important at last like this
#abc{
background:#ffffff !important;
color:#008080 !important;
}
Even if it is not working you should try by selecting more specificity div that is you have declared that #divL a is works
and if anytime if selecting even parent div doesn't work then you could use body selector like this
body #abc{
background:#ffffff;
color:#008080;
}
Also one hint for you if you would like to set background color then use background-color than background
In this case You have to use !important
#abc{
background:#ffffff !important;
color:#008080 !important;
}
use !important to force the browser to give this value priority
E.g. background-color: red !important;
The W3C Recommendations defines the ability to select any anchor which has a defined class by using A[CLASS]{/*Code*/}, but is there an antecedent?
Can I select all anchors that do NOT have a class?
My instinct is to use A[~CLASS]{/*Code*/}, but that isn't documented, and A[CLASS=]{/*Code*/} selects all anchors which have a class name which is an empty string (for instance, <A CLASS="" HREF="http://example.com/">This anchor has a class, but it's empty.</A>).
Example usage
In this code, I only want classless links to be green.
<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="http://example.com/externalUneditableStyles.CSS" />
<STYLE>
A.deadLink{
color:#FF0000 !important;
}
A{
color:#00FF00;
}
</STYLE>
</HEAD>
<BODY>
This link is red, as specified by the CSS above.
This link is green, as specified by the CSS above.
This is a link to a child page, and is styled by external uneditable CSS. That CSS doesn't specify a color, so it is green, even though that might not be the intended effect.
</BODY>
</HTML>
Use something like this:
a:not([class]) {
/*some styling here*/
}
Little demo: little link.
That's exactly what cascading is for, if you do:
a { color: #000; } /* this targets all anchors */
Then after this in your stylesheet you can do
a.classname { color: #ffcc00; } /* to override the color for the once with the classname class defined. */
I hope that's clarifies your question.
Try to play with the .foo:not(.bar)-pseudo selector. I also advise you not to code tags in caps. I believe it is allowed in HTML5, but not in XHTML. Even so, the practice is frowned upon.