Related
I tried to solve this but I'm still blocked on an error like this lol.
I don't understand why my CSS does not apply to my HTML elements.
a{
text-decoration: none;
}
.test{
text-decoration: none;
}
<a href="#" class="test">
<div id="blue-card" class="card h-150">
<div class="card-body">
<p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
<p class="sub-info-card">Utilisateurs actifs</p>
</div>
</div>
</a>
I first tried with only the balise in CSS and after it doesn't work I tried with the "test" class. But it still doesn't work.
The other CSS of my page work. It is only on my balise ..
if anyone have an idea on how to solve my problem pls!
Thanks,
So, the behavior you experience is that defining CSS rules separately, based on the tag name or class name are not applied, yet, if you specify your CSS as an attribute value, then it's applied. Let's think together:
Rule by tagname
a{
text-decoration: none;
}
You reasonably expect this rule to be applied on the anchor, but it's not the case. This evidently means that some other CSS rule (or Javascript) overrides it. Browser Dev Tools can aid you, just right-click anywhere on your page and click on Inspect (or a similar choice). Inside the Dev Tools panel you should see an Elements tab, which shows the HTML and clicking on elements you should see CSS rules on the right-hand side, like on the picture below:
So, I advise you to click on the anchor where you expect your rule to be applied and see what CSS applies there. The rule that you intend to specify here will appear striked through, because something with higher priority overrides it (another case is that a rule with similar prio level is evaluated later and overrides this one). You should be able to see which text-decoration rule is applied and you can gently hover on that rule and click on its checkbox to disable it for now. This will enable the rule applying on this attribute with the second priority level in the hierarchy and so on. This process is not yet a solution, it's exploring the problem. After this exploration you will know what the problem is.
Rule by class
.test{
text-decoration: none;
}
The situation is either similar with the one described in the previous section (rule override due to higher priority or similar priority but later in the code), or, it's possible that for some reason the test class is removed from the tag. So, in the Elements tab of the browser console you will see whether that element still has the class. If not, then experiment by editing the tag and writing that class into it and see whether your rule applies or not. If the tag has the class, but the rule does not apply, then we have a similar issue as the one described in the previous section.
Solution
The best solution is to find out what the problem is, why are there other rules applied on this element and act accordingly. For now, you can apply a rule like
a.test#test {
text-decoration: none;
}
and of course add test as an id to your tag, as below:
<a href="#" class="test" id="test">
and if this still doesn't work, then there is a high chance that the other rule which causes you trouble has !important. If that's the case, then try removing the other rule. If that's not an option, then look at what the selector of the other rule is and make sure that the selector of your tag contradicts it.
It wasn't immediately clear from your initial post exactly what display problem was occurring. But in your comments you indicated an undesired text decoration is showing up, presumably in one of the html elements. Your initial post appears to show your initial efforts to correct the undesired decoration by re-defining the a element's css in your style.css sheet, which is intended to override the bootstrap css.
But your problem really appears to be related to which css is most specific to the element being displayed. The closer a style is to an element, the more precedence it has.
Each of the html elements within your a element have classes applied to them "card h-150","card-body","info-card","sub-info-card". That's a lot of classes to sort through.
<a href="#" class="test">
<div id="blue-card" class="card h-150">
<div class="card-body">
<p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
<p class="sub-info-card">Utilisateurs actifs</p>
</div>
</div>
</a>
How those classes interact will take precedence over your a definition because they are more specific, in other words, closer to the element.
Trying to correct the problem by redefining the a element with an override like text-decoration: none!important will certainly work, but it is not good practice (see first answer here). You should look closely at what the invoked classes in your html elements do. If those classes aren't what you need, use a different class, or this could be a good opportunity for you to write your own custom class in the style.css. However, writing your own class if you're just beginning to get familiar with css may prove challenging. Probably better to find the class you really want from within bootstrap. That's the value of bootstrap.
To answer your original question which is basically why doesn't your css apply to your html elements, it's because a class is applied on the element and that takes precedence. CSS is tricky with specificity and it's hard to learn at first. See some of the answers in this post, and also this link mentioned in that same post.
Try accessing the 'link' attribute of the anchor tag as below and setting the value as none, also add !important to it, this worked for me.
a:link {
text-decoration: none!important;
}
I originally noticed this problem when working with CSS in an SVG file, and thought it was rendering error, but after trying it in HTML, the same situation occurred.
Take the following code:
.example {color:green}
.example {color:blue}
In this case, as expected using normal class selectors, the value of color is initially green, though later in the file it is redefined as blue, thus the resulting color of elements in the class are blue.
Now take this example:
div[class='example'] {color:green}
.example {color:blue}
In this case, now initially defining the color value for divs in example using attribute selectors, when the value is redefined using normal CSS class selectors, the change from green to blue is ignored in the divs, and the value set by the attribute selector takes precedence, despite the blue color value for the whole class being redeclared later in the file.
According to Mozilla documentation on CSS class selectors, it says normal selectors and attribute selectors are "equivalent", though that doesn't appear to be the case in this situation. What is the cause of this?
I'd originally posted this as a comment, but perhaps I should've made it answer.
Let's look at the actual conditions of your two CSS rules:
div[class='example'] {color:green}
Element must be a <div>
Element must have class "example"
.example {color:blue}
Element must have class "example"
Because your first CSS rule has two conditions, whereas your second rule only has one, the first rule is more specific - therefore it will take precedence.
If you were to remove the div portion from your first rule, it would be considered equivalent (as MDN states), at which point the text would be blue.
Mozilla documentation is correct.
But when considering specificity, you need to take in to the account div and [class='example'].
These two combined are stronger than .example.
Here is an nice representation of specificity:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
If you go and open smasingmagazine.com articele, you will conclude that:
.example has power of 10
Whereas div[class='example'] has power of 11
I have constructed a mock-up of a hierarchical menu system, where the main menu (#moduleMenu1) has a sub-menu (#moduleMenu2), and they both share a CSS class. When I use ID selectors on the menus, all is well (http://jsfiddle.net/stamminator/pwnuymd2/1). However, when I switch to using a class selector, which would be much more elegant (especially if I add a third hierarchy to the menus), the selectors are being overwritten (http://jsfiddle.net/stamminator/pwnuymd2/).
I suppose I can use !important on every property in my styles, but assuming I'll need to have a page which overwrites those styles on an as-needed basis at some point, this isn't a great solution either. Is there a third option besides id selectors or !important that is available?
I'm not sure if this is related, but I've noticed a second problem as well. When I have the HTML files open locally and do a selector in Chrome's JavaScript console on their shared class, I would expect to get back both elements. Instead, I only get back one.
//what I typed into the console:
$(".moduleMenu");
//my result:
<div id="moduleMenu1" class="moduleMenu">
<div>
Proposal
Browse
Financial
Documents
</div>
</div>
//where's #moduleMenu2? They both have the same CSS class
Here is a link so you can download the files and run it in your own debugger if you'd like: https://onedrive.live.com/redir?resid=9F7FCE5CCA52BABF!33812&authkey=!ANi0Ivf0BbmVbGk&ithint=file%2czip.
The JavaScript console issue is a non-issue I suppose, but I figured I'd mention it in case it's related. Any help I can get in getting my CSS working properly would be much appreciated!
ID selectors are of higher importance than class selectors. You should almost never use IDs in CSS. Change your ID selectors to class selectors (even if they're unique) and be happy.
<div id="moduleMenu1" class="moduleMenu moduleMenu1">
Demo
Of course, some of your listed selectors can now be combined.
Demo 2
As mentioned by isherwood, ID selectors take priority over class selectors. This is due to CSS specificity, which is the way CSS determines which rules are applied to an element.
The simplest way to explain CSS specificity is:
!important > inline > ID > class > element > universal & inherited
For a slightly more in-depth explanation, CSS specificity is stored as four separate integers. When no styles are applied to an element (or only universal and inherited rules are applied), the values for that element are 0,0,0,0.
The first value represents inline styles
The second value represents ID style rules
The third value represents class or attribute style rules
The fourth value represents tag style rules
1,0,0,0 overrides 0,1,0,0: an inline style will always override an ID style rule. Likewise, an ID will always override a class. However, 0,1,1,0 overrides 0,1,0,0, so a class and an ID in a rule will override the ID rule.
With the exception of some older browsers that roll over values after 255, there is no number of classes that can override an ID: the only way to override an ID style rule is with an ID, inline styles, or the !important flag.
Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.
I have a css file that defines style for all <p> tags.
like this
p { ......... }
How can I write a <p> in a page where the stylesheet is included that has default styling?
There's no easy way to do this.
There a some common tricks to simulate that behavior though. The best one to use would vary based on how complex the overridden region is, and how often you want to do this.
Method 1 (for simple overrides):
Add an extra class definition in the statement similar to the one where you clear the default styling (such as is discussed at http://www.wordpress.darfuria.com/blog/clear-css-defaults). You might have to arrange the declarations carefully to prevent the 'normal' style from taking precedence.
.override {/*Your default style overrides, color: white;
margin: 0; background:none; etc */}
<p class="override">foo</p>
Method 2 (clunky, but good for complex regions):
Use an iframe to pull the whole region from a separate .html file hosted elsewhere on your site. The content inside iframes respects the CSS of the page inside the frame, and generally ignores the CSS from the surrounding page.
Method 3 (good for one-shot overrides):
Use inline styles, as others have described here.
Edit:
Not Really a Method, But Probably The Most Correct Way
Also probably not what you want to hear
Re-think your how you've arranged your classes.
For example:
If the overridden <p> is special in some way, it probably deserves it's own class that describes what it's purpose is. <p class='override'> doesn't help people who will be looking at your design after you're done, since it doesn't tell them what the overridden text is for or why it's styled that way.
Are the overrides coming in a specific region? If so, them a style definition like div.left_nav p {/*styles*/} might be a better fit.
Lastly, Is your default <p> styling not really default? Maybe a more loosely specified p style might be in order, with additional p.foo and p.bar definitions later on.
This doesn't fix your immediate problem, but it might be worth chewing on before you start your next project.
You can use inline styling to override the default styling.
<p style="background-color: #ffffff">white bg</p>
Inline styles have the highest precedence. The only styles that have higher precedence than inline styles are user styles applied by the readers themselves.
Just to check. For all the talk of "default styles", if you set the style for a type of element in a CSS file, e.g.:-
li {...}
Then you also include a css file that contains a class definition and apply that class to an individual instance of that element type, e.g.:-
<li class="myLiClass">Some Text</li>
From what I understand it is impossible to get the class myLiClass to override any attribute of the style specification "li {...}" for the element by providing that overriding style in a css class.
Therefore I assert that this means:-
"If you specify a style attribute for any html element type (element type, not a class) in a css file, then all pages that use that css file cannot show that element type attribute using any different styling, where that different styling is stated as a css class."
Can anyone confirm this with an absolute yes, or a working example of why this assertion is not true.
You can apply the style for your tag from your stylesheet like this:
CSS
p.first{ color: blue; }
p.second{ color: red; }
HTML
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
</body>
</html>
I would agree that there isn't really a "Default" style for a tag since each browser has significant freedom on how to display it.
I think the easiest answer is to rethink the problem - define a class that you use for all P tags and then if you fail to use the class it will give you the default styling.
<style>
p.all {margin.top:9px;}
</style>
<p>This would be default style</p>
<p class="all">This would have your style</p>
Alternately, if you wrapped all of your stylized content in a div or some other tag, you could nest the styles like this:
<style>
div.foo p{border:1px solid black;}
</style>
<p>normal</p>
<div class="foo">
<p>abnormal</p>
</div>
Hope this helps.
What makes this impossible is that there is no "default style".
Default styles come from the browser's internal style sheet and the user's preferences. So different browsers and different users have different defaults.
You could assume that white/transparent background, black foreground and Arial font were going to be most people's default styles, but you couldn't be sure.
So, like other people are saying, you have a fundamental problem because you've got a style for all P elements, and there's no way to code a P which doesn't inherit from that style, you can only over-ride it using CSS of greater specificity.