If I have two different stylesheets and a class name that is being shared on both of them, something like this:
Home.css:
.myClass{
color: red;
}
Sales.css:
.myClass{
color: blue;
}
And now I would like to be able to to something like this:
<div class = "Sales.css.myClass" >....</div> <!--Here I am calling the blue color from Sales.css-->
Is there any way to specify from what stylesheet is the class I want to call?
CSS file priority depend on the sequence of files you have defined in the header, having the last one picked up, unless your rule has higher specificity.
However, what you are trying to do is a bad practice, leading to reduced readability and maybe conflicts.
Why don't you just put your rule to different rules in each file:
/*Home.css*/
.myHomeClass{
color: red;
}
/*Sales.css*/
.mySalesClass{
color: blue;
}
And then put the one you want to your element?
<div class = "mySalesClass" >....</div>
Simple CSS rule: later rule extends previous rules for same class.
That is
.myClass {
color: red;
font-size: 14px;
}
.myClass {
color: blue;
}
.myClass will be blue 14px font size.
Also you specify .myClass in CSS but your class in HTML Sales.css.myClass and that's different classes. Do you mean Sales css myClass?
Related
For example, say I want to create text in HTML with the color blue and a size of 13px.
Is there any way I can do something like:
<h1 class = "blue 13px">Hallo</h1>
And then use CSS to make it blue and 13 px without doing:
.blue 13px {
color: blue;
font-size: 13px;
}
Instead of using CSS classes, you could use inline styling in your HTML elements:
<h1 style="color: blue; font-size: 13px;">Hallo</h1>
Because of its poor maintenance and reuse qualities, this styling strategy is generally not advisable though. Use with caution. ;)
Also note that the CSS code that you provide in your question is invalid. CSS class names have to be valid CSS identifiers. This would be more correct:
<h1 class="blue-13px">Hallo</h1>
.blue-13px {
color: blue;
font-size: 13px;
}
And also note that you can include CSS rules inside your HTML page as well (without using a separate CSS file):
<style>
.blue-13px {
color: blue;
font-size: 13px;
}
</style>
<h1 class="blue-13px">Hallo</h1>
CSS
:root
{
--css_h1_color: rgba(204,204,204,.2);
}
h1 {color: var(--css_h1_color);}
JavaScript
getComputedStyle(document.documentElement).getPropertyValue('--css_h1_color');
HTML
<div data-countdown="2016-12-10 01:17:26">
<div class="countdown-text">noch</div>
<div class="countdown-val">2</div>
<div class="countdown-text">Tage</div>
</div>
CSS
.countdown-val {
color: red;
}
.countdown-text {
font-size: 13px;
}
Values from .countdown-val class are not applied. When I change the order of classes within the css file the same thing happens vice versa. I am using a bootstrap built theme, but I cannot explain this behaviour. Can anybody else please?
you just try this.
.countdown-val {
color: #ff0000;
}
otherwise.you can add !important
.countdown-val {
color: #ff0000 !important;
}
CSS is fine.
Check your closing brackets {} in your code.
In your bootstrap file, make sure your classes aren't nested under another class.
seems like some other css is overriding yours
use
.countdown-val {
color: red !important;
}
.countdown-text {
font-size: 13px !important;
}
or change the class names to some other unique names to be sure that the divs style is not affected by other css
When I want to apply a certain style to a div (specially using bootstrap 3), I create my own class like this:
.myClass {
width: 30%;
padding-right: 0px;
}
<div class="myClass"></div>
But sometimes the div style is overwritten by the bootstrap classes or another inherited properties (I don't understand completely the inheritance in CSS3), but if I apply directly in the div:
<div style="width: 30%;padding-right: 0px;"></div>
2 ways to force CSS on an element in this case :
You have you custom CSS located in a local .css file : put the <link> tag for this custom stylesheet after the Bootstrap css file.
Set the CSS rule !important after each properties so they will get an extra authority upon others
CSS inheritance
.myClass is less than div.myClass which is less than body div.myClass.
The Bootstrap is using usually more than one identifier. Like .ourClass.theirClass.yourClass which is hard to overwrite. Inspect your element in your browser to see the inheritance and try to overwrite it the css way before using any !important attributes.
The last rule defining a style of the element will be aplied to it.
So if you have various stylesheets in your page, the order of the files should be in the order you want them to be applied. example:
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="secondStyle.css">
Every style rule(not an entire block) that is written in the second file will be the definitive one in the website.
the same rule apllies within files, for example:
.ClassOne {
color: red;
}
... othes styling ...
.classOne {
color: Black;
}
In this case the color in the browser will be Black because it was the last one and it overwrites the first one.
There is another rule that can affect styling - The more specific rule will be the definitive one, example:
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green;
}
<div class="one">
<div class="two">
<div class="three">
some text
</div>
</div>
</div>
Question: In which color will the text show?
Answer: red.
Why? because in the case above, we call the .three element in a more specific way when we declared the red color.
check it here:
https://jsfiddle.net/wxaw3205/
The same example with more elements:
https://jsfiddle.net/wxaw3205/1/
The last way is using the !important declaration, it provides a way for You to give a CSS value more weight than it naturally has.
For the last example, lets assume that we have the same html markup of the example above, which will be the color now?
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green !important;
}
Answer: green.
Link to live example: https://jsfiddle.net/wxaw3205/2/
And just a little tip: never style the element using the style="" attribute, unless you have too! and either the !important.
Most of the time when you have to use them its because you'r stylesheet needs to be reordered.
That's all, I hope it helped you understand.
I have been searching the web to try and find an answer to my question but cant seem to find a direct answer. I use article classes a lot in my work, however never really needed to know whether they load in order i.e what comes first on the page.
Example
<div id="example" article class="example1 example2 example3">
Here's the div.
</div>
Additionally I would like to ask, if I set a background in example 1 and set a background in example two, would the background of example 1 be there underneath example two. I guess I am asking if it would be like stacking divs on top of one another.
The reason I ask is because I have an article class with a background of an ajax loader. However I need to load an image directly ontop of the ajax loader. Its my idea of making a budget preloader without all the scripting hastle.
Thanks again!
What you're asking about is the order of precedence of applying CSS rules. Simplified:
It does not matter in which order you specify the classes on an element (class="foo bar baz").
It does matter in which order you write the CSS declarations in your CSS file.
foo { ... }
bar { ... }
baz { ... }
Later rules override earlier rules.
You are applying properties specified in these CSS rules to an element. An element can only have one such property, they do not "stack". If two CSS rules specify the same property, later rules overwrite that property on the element.
Example:
<div class="baz bar foo">
.foo {
color: blue;
border: 1px solid green;
}
.bar {
color: black;
border-color: orange;
}
.baz {
color: red;
margin: 10em;
}
Again, the order of the classes in the class="..." attribute is irrelevant. All three classes are applied to the element. First, .foo, then .bar, then .baz. The element will have the following properties, which are the result of merging the above rules:
color: red; # from .baz
border-color: orange; # from .bar
border-style: solid; # from .foo
border-width: 1px; # from .foo
margin: 10em; # from .baz
(Note that rule precedence is actually a little more complex than that and actually depends on the specificity of the selector, but the above goes for equally specific selectors.)
How can I make multiple H3 tags using different text style & font size inside post body?
My H3 CSS is look like this
.post h3{
border-top:1px dotted #84ce31;
border-bottom:1px dotted #84ce31;
font-size: 10pt;padding:3px;
}
Any ideas?
Give each one of them a class:
.post h3.class1 { color: white; }
.post h3.class2 { color: black; }
.post h3.class3 { color: red; }
there can be done by either adding the id or the class like
.post h3.#hea1{ color: white; }
.post h3.#hea2{ color: black; }
.post h3.#hea3{ color: red; }
or as class explained above
not point is that what should be use ..to know that you must know
difference between id and class
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
note : There are no browser defaults for any ID or Class
Adding a class name or ID to an element does nothing to that element by default.
This is something that snagged me as a beginner. You are working on one site and figure out that applying a particular class name fixes a problem you are having. Then you jump over to another site with the same problem and try to fix it with that same class name thinking the class name itself has some magical property to it only to find out it didn't work.
I would give them all ID's. ID's are meant for special Identification of elements that only exists once and use classes for more common recurring styles with just the h3 style at a default that will be appearing most often. All that said the answer is not wrong either, I am just considering design styles.