I'm finding very random when I can or cannot override Bootstrap classe/ id with a custom .css
For example, to change default navbar-dark, Background and font-style overriding is acceptable.
But font colour and size cannot change unless I force a change applying "style" inside of element or as an "id" linked to an external css file.
What does not works:
<nav class="navbar navbar-dark"style="background: red; color:
yellow; font-family: cursive font-size: 50px;">
<a href="" class="navbar-brand" style="color: yellow; font-size:
50px;">PATTERN</a>
</nav
Applying style on element works, such as:
<nav class="navbar navbar-dark"style="background: red; font-family:
cursive;">
<a href="" class="navbar-brand" style="color: yellow; font-size:
50px;">PATTERN</a>
</nav
Being able only to use id inside of each element becomes a problem when I have a big navbar and I want to apply a class to all of them.
What can I do to customize or how can I learn about those limitations?
Thank you :)
Well it depends if the color style is set in Bootstrap on parent element and then it descends or it is set directly on child... And it is set on the child... so you need to set it directly on that child.
But use CSS, or LESS, SASS etc.. dont use inline classes, set it globaly for all children you want to target.
Like that:
.navbar-dark .navbar-brand {
color: yellow;
}
The problem you are facing is directly related to CSS Specifity. CSS specifity applies when there are two or more conflicting CSS rules that point to the same element.
The specifity of the CSS rules determines which one of the conflicting rules will aply to your html element. In general, more specific CSS rules go over less specific ones. This is, from more specific to less specific:
Inline styles: styles defined in the "stype" attribute, inside the html tag.
ID: a CSS rule that references an element by its id instead of a class (for example #navbar).
Classes, attributes and pseudo-classes: most common css rules. In example:
.blueBackgroundClass {
background: blue;
}
Elements and pseudo-elements: usually only used to make site-generic styles, such as:
p {
font-family: "Times New Roman", Times, serif;
}
a {
color: blue;
}
For more information about it I strongly recommend you to see the CSS Specifity documentation.
Related
I know that inline has more specificity than external but does internal have more than inline? Or is it the other way around?
Internal:
<style>
p{
color: red;
}
</style>
Inline:
<p style="color:blue">
External:
p{
color:green;
}
No, internal does not take over inline. Inline styles are always the highest priority. From Mozilla Docs:
Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
These "external stylesheets" also include style tags in the head or body. See for yourself:
p {
color: red;
}
<style>
p {
color: red;
}
</style>
<p style="color: blue">
Hello!
</p>
<style>
p {
color: red;
}
</style>
Whether it is before or after, the only thing that will override an inline style is !important, which you should shy away from using. Refer to the MDN link above.
Finally, be careful when you say,
I know that Inline has more specificity than external [...]
since specificity is a special CSS concept. Yes, inline styles will override external styles (when not using !important), but don't confuse specificity with precedence. CSS rules are ranked in two ways:
Specificity
and Order.
This includes order across separate files. If you put your style tag before your link tag, then the external styles will overwrite the internal ones (if they are of the same specificity).
Again, this doesn't apply much to internal styles, and this is mostly a semantics clarification for "specificity," but it doesn't hurt to point out.
I have the following problem:
I have a font with a given style in a css class:
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
And now I have a css that gives me the size of a div in a given situation:
.a_div_test {
width:300px;
max-width:350px;
}
I want the a_div_test to have the properties of the font_arial_36, like an inheritance.
Somethin like (this is wrong just posting what I wanted):
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
.a_div_test extends font_arial_36 {
width:300px;
max-width:350px;
}
and now the .a_div_test should also have the font_arial_36 properties.
Is it possible with css?
PS: I do not want to add multiple classes to an Html Element like that:
<div class="font_arial_36 a_div_test"></div>
Because I should rewrite my code in many places where .a_div_test appear.
This is not possible in CSS. What you do is you assign the 2 classes to the element you want.
<div class="font_arial_36 a_div_test"></div>
CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.
That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.
That is, the inheritance is defined by the HTML structure, not the CSS itself.
why you need to extend when you can add multiple classes with space on HTML element.
<div class="font_arial_36 a_div_test">Like this</div>
As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:
<button class="uiButton disabledButton">Click Here</button>
For below CSS:
.uiButton {
background-color: gray;
color: lightgray;
font-size: 20px;
font-family: "Segoe UI", Helvetica, sans-serif;
text-align: center;
text-decoration: none;
padding: 10px 10px;
border:none;
display: inline-block;
margin: 5px 5px;
cursor: pointer;
}
.disabledButton
{
background-color: gray;
color: lightgray;
cursor: not-allowed;
}
In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).
But, there is a better way:
Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide
Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).
if you don't want to add multiple classes to html element then
.font_arial_36, .a_div_test {
font-family:Arial;
font-size:36px;
}
.a_div_test {
width:300px;
max-width:350px;
}
other than this no other possible way seems to be there for inheritance in css, we have to use sass
In the following example I have a Bootstrap button style which is hijacked by the color: inherit entry set by .k-grid of Kendo-UI:
.k-grid a {
color: inherit;
}
<div class="k-grid">
<a class="btn btn-secondary" href="#">Button</a>
</div>
Demo here: http://jsfiddle.net/aq9Laaew/299912/
You can observe that the inherit property of .k-grid a bypasses any other classes passed to the a tag. Eventually the Bootstrap Button is displayed with the wrong color inside a Kendo-grid table.
What is the correct way to fix this? I am not sure that adding a !important to the SASS of Bootstrap is the best solution.
After taking a look at your fiddle, I can see in the inspector that Bootstrap's reset applies the following: a:not([href]):not([tabindex]) {color: inherit;}
On top of this, the anchor in your fiddle doesn't have an href so the above CSS applies.
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="k-grid">
Button
<a class="btn btn-secondary">Button</a>
</div>
So trying to style your button (without a href) with:
.btn-secondary {color: white;} will not work due to CSS specificity.
If you are still confused about CSS specificity, find yourself a specificity calculator like this one and paste both selectors in.
You will find that .btn-secondary is not specific enough to override this rule coming from Bootstrap's reset that applies styles for your button.
Given that kendo-ui is also affecting your button styles with: .k-grid a {color: inherit;}, the best way to solve your issue is by targeting the button with (you guessed it) a selector of higher specificity.
.k-grid a {
color: inherit;
}
.btn.btn-secondary {
color: white;
}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="k-grid">
Button
<a class="btn btn-secondary">Button</a>
</div>
I recommend you to understand the css specificity
For example: http://cssspecificity.com
In your case .one-class is less specific than .on-class and an element
The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand all.
For inherited properties, this reinforces the default behavior, and is only needed to override another rule.
This would help you :
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
If you want to dig in more :
https://developer.mozilla.org/en-US/docs/Web/CSS/inherit ,
https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value
I can't figure out the way how can I change font color of h1 to pre-defined class text-primary. Is there any way that I can assign text-primary to h1 class?
something similar to this:
h1 {font-size: 28px !important;
font-weight: normal;
color: text-primary;
}
just add that class to h1
<h1 class="text-primary">your title</h1>
Is text-primary a class? If yes:
.text-primary, h1 {
...
}
You can add it to class attribute inside h1 tag as in below way :
<h1 class="text-primary">Some heading</h1>
It depends whether you use LESS and Bootstrap's LESS sources or not.
You have to search for the definition of the style of class text-primary in Bootstrap's sources. If you use LESS, you will want to look in the LESS sources, otherwise in the resulting complied CSS sources of the Bootstrap frame work.
In LESS in v3.3.4 the style is:
.text-primary {
.text-emphasis-variant(#brand-primary);
}
Copy that style into your h1 style and compile again:
h1 {
font-size: 28px !important;
font-weight: normal;
.text-emphasis-variant(#brand-primary);
}
The mixin text-emphasis-variant creates several style rules. You do not have to take care about it because LESS does it for you.
If you work with CSS directly, you simply search for the style definition of text-primary in the CSS and copy all styles to your h1 style definition.
I don't know what this technique is called, I've only seen it used. It's a way to repurpose the same selectors with CSS.
For example if I create
h1 {
font-size:18px;
color:#FFFFFF;
font-family:Arial, Helvetica;margin:0;
padding:0;
}
h2 {
font-size:18px; color:#000000;
font-family:Arial, Helvetica;
font-weight:normal;margin:0;
padding:0;
}
I can repurpose the h selectors with something like
.whatever h1 {
color: #000;
font: 2.0em arial, sans-serif;
background-color: #fff3ea;
margin: 50px 0px 0px 50px;
}
.whatever h2 {
color: #000;
font: 1.7em bold arial, sans-serif;
background-color: #fff3ea;
margin: 25px 0px 25px 75px;
}
If h1 and h2 appear inside of a div called whatever, then they will assume those properties. You can do this with ID tags and class tags but I can't for the life of me remember how this is done.
Any thoughts?
This is called specificity.
It's a key feature of CSS which means properties in the more specific selector (.whatever h1) will override properties in less specific ones (h1). It allows you to set general styles for most of the elements on the page (e.g. all h1 elements), and then change the properties of a small subset of those elements using a more specific selector that identifies, for example, only the h1 elements inside another element whose class is whatever:
HTML
<h1>I'm green with envy</h1>
<h1>And so am I</h1>
<div class="whatever">
<h1>Because I'm rather special</h1>
</div>
CSS
h1{
color: green;
}
.whatever h1{
color: blue;
}
RESULT
The CSS selector .whatever h1 means "any h1 element inside another element with a class of whatever". You could also give the h1 element its own class to achieve the same effect; you just write the CSS slightly differently to reflect the fact that the h1 element you're targeting now has its own class:
HTML
<h1 class="whatever">I'm special</h1>
CSS
h1.whatever{
color: blue;
}
Always try to give your classes and IDs meaningful names that refer to the element's role within the page, rather than its colour or other attributes. i.e. It is much better to use ".introduction" instead of ".bigredtext" or ".whatever". That way, if you change the colour of your intro text to bright blue, you don't have to rename the class in your CSS and HTML, and everything in your HTML will read better too. (This is what people are talking about when they mention "semantics" and "semantic naming conventions".)
How specificity is determined (simple rules to remember)
User agents (web browsers) use a formula to calculate how specific each selector is and which should take precedence over the other. In very simple terms, from less specific to more specific:
Selectors with only the name of the element (e.g. h1) are the least specific of all
Selectors with a .class are more specific than selectors with no class
Selectors with an #id are more specific than selectors with a .class
Selectors lower down in a stylesheet take precedence over earlier identical selectors
Those are the four main rules worth learning about specificity, and they will cover most simple use cases. These two additional rules aren't related to specificity, but they're worth knowing too:
Inline styles such as <h1 style="color: blue"> will take precedence over external rules declared separately in external stylesheets or inside <style> tags. You probably shouldn't use inline styles, but it's worth knowing this just in case you come across them.
Properties within a selector that use the !important flag "trump" everything and can't be overruled. Likewise, you probably shouldn't choose to use the !important flag, but there are times when you may be forced to.
How specificity is really determined (how to calculate it precisely)
Of course, it gets a little more complicated than the above (but not by much) when you start chaining classes, IDs, and elements together, which is why it can be helpful to learn how to calculate specificity precisely rather than working on intuition alone, as it will save you a lot of time when your stylesheets get bigger and more complicated.
If you'd like to learn more, Smashing Magazine has a piece titled "CSS Specificity and Inheritance" that's worth a look. They reference Andy Clarke's famous Star Wars Chart, which might be an easier way to visualise specificity if you're familiar with Star Wars, but it will probably just make things even more confusing if you're not! (Click the image below to read more on Andy's site.)
You faced overriding the selectors.
example:
<div class="one">
<div id="two">
<h1> This is H1 text </h1>
</div>
</div>
so you have set H1 to FFF - white color by:
h1 {
color:#fff;
}
now we do first override ( using ID ):
div#two h1 {
color:#888;
}
and the third, notice you don't have to put current element, you can set it for each element with given class:
.one div#two h1 {
color:#000;
}
so in the end we have black text color.
The raw ones are to set "global" styling. The nested ones are to give exac styles to given elements.
Also you can use chaining class/id selectors for <div id="one" class="two three four"> you can select it using div#one.two.three.four - without spaces