I have included first Materialize's CSS and then I have linked my css file.
In which I have an example class that sets background-color property to red, but that doesn't override the default color (that's set by materialize-css).
Here's an example:
https://jsfiddle.net/79ss2eyr/1/
I'd like not to change anything in materialize's source files, instead I want to add additional classes and set my additional colors.
Here's what the inspector says:
How should I do that and why my css properties do not override materialize's since it's linked after the framework?
Inn Materialize's the rule is set by footer.page-footer {}, but you're wrote just .app-bg. So you can't override the Materialize's rule.
If u want to override that class you can use footer.app-bg or use !important:
footer.app-bg {
background-color: red;
}
or
.app-bg {
background-color: red !important;
}
Make the css selector more specific, like this:
footer.app-bg {
background-color: red;
}
If your css is not applying to the element because of other applied css just use !important to specify that your css is important.
.app-bg {
background-color: red !important;
}
Example : https://jsfiddle.net/79ss2eyr/2/
Related
First time here, and was hoping that someone would be able to help with an issue I’ve been dealing with. I’ve had specific details not to modify the original CSS, and instead told to create a new CSS that contains specific overrides for the original CSS. How would I go about doing that efficiently?
Any help would be appreciated. Thanks!
css are applied is a given order. Here are few examples
Case 1: overide default color for a div
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
Case 2: css which is loaded at last will be on top.
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
case 3: important takes first place
div {
color: red !important;
}
case 4: multiple important
div {
color: red !important;
}
div {
color: yellow !important; /* This will be applied */
}
Include your css file after original css file. Add your custom class in html and use it to override original code.
Don't use !important property it create issue in responsive style.
I am using Bootstrap.css, and there's a class named "form-control".
I am using this class to style my aspx controls. The problem is that its textbox font color is grey and I want it to be black. I have no clue about CSS. Is there a way I can change that from grey to black?
Thanks.
You can reset the text color of class - 'form-control' by adding
.form-control {
color:#000000;
}
Add this property in a separate css file and include it just below bootstrap.min.css in head tag.
If you want all the textboxes font color to be black, add this:
input[type="text"] { color: black }
in your CSS file.
Otherwise, create a class:
.black-input {
color: black
}
<input type="text" class="black-input">
Go to http://getbootstrap.com/customize/ and select the colors you want, then Compile and Download at the bottom.
use this:
.input-black {
// this is the one can change the color of a text even if its a placeholder
color: black;
}
<input type="text" class="input-black">
You would need to add some code like this to your CSS file.
.form-control {
color: #000;
}
Keep in mind that you may have some specificity declaration issues. For example, if the color is set in bootstrap.css as a child of another element, you may not be able to override the color change unless you declare it with the parent as well. For example:
.parent .form-control {
color: #000;
}
You shouldn't be scared to learn some CSS though. It's very easy to grasp (you'll literally get the basics in less than an hour).
I search for all solutions but nothing help me.
my simple problem is to set a style for a link ( a Tag ) with a class:
<a class="logo"></a>
I don't want a general style for links or for active ones but for a selected Class.
Thank you.
I think you're looking for the CSS class selector.
To apply a style to just a single class you should prefix the class name with a dot (.) in your CSS selector.
In this particular case you would do it like this:
.logo {
/* Styles here */
}
You can also ensure that only link elements are affected by adding the element selector:
a.logo {
/* Styles here */
}
PS. The CSS id selector is # and it works in a similar manner.
There are three different ways to solute this. Since you do not want a global styling for a link this example will not be it:
a{
/* STYLE HERE */
}
Since you simply want to style a link with a surtain class use this example:
a.logo {
/* STYLE HERE */
}
or
logo {
/* STYLE HERE */
}
or
a[class="logo"] {
/* STYLE HERE */
}
The last example is a new way of making this happen, some very old browser wont understand this, so you better stick to the first or second example.
Use like this
<style>
a[class="logo"] {
background-color: yellow;
}
</style>
<a class="logo">test</a>
you can add style rules by targeting class :
a.logo { color: #aeaeae; }
How can I override an inline CSS rule with using an external stylesheet file?
This is my HTML code:
<div class="mydiv" style="background:#000"> lorem ipsom</div>
I want to change the background color using CSS. This is my CSS code:
.mydiv {background:#f00; color: #000;}
But this is not working, but I this is possible.
Is there a way to change the background color in Internet Explorer?
This is very simple. Use !important after your rule style. Here is the example:
.mydiv {background:#f00 !important; color: #000;}
URL: http://jsfiddle.net/msJxL/
And for Internet Explorer, check out How To Create an IE-Only Stylesheet | CSS-Tricks.
Inline style is treated as having a higher specificity than any rule-set.
The only ways to override it are to change it on the element or use an !important rule.
!important rules are a sledgehammer of a solution and only work once (if you want to override again, you are stuck; there is no such thing as a double !important rule), so changing the style attribute value (preferably removing it entirely in favour of a stylesheet) is the best option.
If you really want to use !important then the syntax is:
.mydiv {
background:#f00 !important;
color: #000;
}
Use the !important for this. It will override other CSS. Try the following code:
.mydiv {background:#f00 !important; color: #000;}
Use this:
.mydiv {
background: #f00 !important;
/* This will increase the rule score */
color: #000;
}
Detailed information: Stack Overflow question How can I override inline styles with external CSS?.
You can use the CSS attribute selector:
<style>
div[style] {
background: blue !important;
}
</style>
<div style="background: red;">
The inline styles.
</div>
I have a div with classes of A B C
I added a style to c to show the color as "Red";
The problem is it's overridden from the styles of A and B.
I read that !important only prevents the css being overridden by the inline style but does not prevent the override by other css.
How do I mark the style of C as the strongest?
Increase the specificity of rule C above that of rules A and B. Normally I would include some explanation here, but the one over at the linked site is superb.
An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added.
Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.
div.a, div.b {
background-color: #00f;
}
div.c {
background-color: #f00 !important;
}
The !important will up priority of rule and inheritance will be ignored.
div.a, div.b, div.c {
background-color: #00f;
}
div.c {
background-color: #f00;
}
should work, CSS is sequential. This means the last style for that element is applied of no more specific style is available. More specific would be for example
body div.c {
background-color: #f00;
}
!important should work just fine, but if not you can chain your classes in your declaration like so:
div.a.c,div.b.c,div.a.b.c
{
color:red
}