I have a very strange issue I cannot quite figure out with my css style sheets. I have 2 stylesheets, one is from a cdn, one is minified then injected onto my index.html (locally) on my local dev server right now. So just for a quick reference, in my header I have something like this :
<link rel="stylesheet" href="myCDNStyleSheet.css">
<!-- injector:css -->
<link rel="stylesheet" href="css/localMinifiedStyles.css?1474574347809">
<!-- endinjector -->
So that is just using a grunt task with grunt-cssmin and grunt-injector to put that stylesheet with it's own hash on.
Now what's weird is, even though the myCDNStyleSheet is loaded first, some styles from it are taking precent over styles in the localMinifiedStyles, and so currently, I've had to put some !important on the styles in 'localMinifiedStyles', which is very strange to me.
So to be super clear, what I mean is :
myCDNStyleSheet.css has :
.styleMe {
margin-left: 5px
}
and localMinifiedStyles.css has :
.styleThis {
margin-left: 12px
}
And the rendered html looking like :
<div class="styleMe styleThis">
is using the margin-left: 5px instead of the 12. I can see them both in the inspector.
Swapping their load order does not fix this, in fact it breaks it further because there are some styles in localMinifiedStyles that are taking priority correctly.
Even when inspecting the styles in chrome devtools, I see the localMinifiedStyles is below the style that is taking precent. I can't figure out the cause of this, is it possible the grunt injection does something I am not aware of? My assumption thus far in working with css is the last loaded stylesheet takes priority, and I missing something here?
I'm really not sure what caused the behavior you describe (If you have the exact same "priority" of css rule - the latter will win), however a simple way to fix your problem is to duplicate the class in your css definition. If you want the styleThis class to take over you can use:
.styleThis.styleThis {
margin-left: 12px;
}
It's kind of a hack, but it works in up to date versions of chrome, firefox and ie.
.green.green {
color: green;
}
.red {
color: red;
}
<div class="red green">
This text's color should have been red because the red rule is latter in the CSS, however it will be green due to the <code>.green.green</code> in the css rules.
</div>
Related
I am currently trying to change the color of a title by referencing a div's class.
So far I have tried:
.pagetitle-title.heading {
color: purple;
}
<div class="container">
<h1 class="pagetitle-title heading">IT•ONE Method</h1>
</div>
And even:
h1 {
color: purple;
}
As mentioned per my comment, it looks like a classic case of "CSS overwrite". One of the "hacks" to avoid this, is to use the CSS property !important to tell the browser which CSS rule is particularly important, and should not be overwritten.
Example: color: purple !important;
CSS applies the style in the fashion that it is loaded. So if you have 1 CSS file with x rules, and a 2nd CSS file with y rules, and they both target the same elements, then the CSS file that was loaded last will generally overwrite the styles of the one prior.
The order is known as the top-down rule, and is only overwritten by the !important property and in-line CSS. The !Importantproperty will generally overwrite any in-line CSS.
Given the information about the top-down rule, and you have the means to edit the CSS and/or choose the order of how the CSS is loaded, you can make sure that you are able to apply your own CSS rules by having them load as the last included file in your project.
Example:
<head>
<link rel="stylesheet" type="text/css" href="loadedfirst.css">
<link rel="stylesheet" type="text/css" href="loadedsecond.css">'
<link rel="stylesheet" type="text/css" href="loadedlast.css">
</head>
In case these 3 files have rules that applies to the same elements, the loadedlast.css file is the CSS that will overwrite the ones prior, except in the case of the !important property and in-line CSS. By managing the order of your CSS, you can avoid having to resort to such "hacks" as using the !important property.
Check your link "stylesheet" for your CSS
Open you debug console and identify your h2 to see if CSS option are targeted
Try another hexa color code
Add "!important" after touy color code
color: purple!important;
I see your code and it's correct method to modify this color so... Try my checklist first and give us your feedback.
I would avoid adding important as much as I can. I would just go higher up the parents and try to target the div as specific as I can. Instead, I would go
.container h1.pagetitle-title.heading {
color: purple;
}
If that doesn't work only then I would use important.
I include bootstrap link in my website like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
And right below, I include my own css stylesheet like this:
<link href="css/header.css" rel="stylesheet" type="text/css">
But as I included bootstrap, I could no longer edit the website's style through my original stylesheet in header.css. I can still edit the website's appearance through <style="....">, but I'd like to integrate every style in the css file. Does anyone know how to solve the problem? Thanks.
CSS stands for Cascading Style Sheets, which may sound a bit arbitrary, but it's very important to understand that it functions exactly as the name states. The styles "cascade" down the file. You can easily override any attribute you want if you put it further down the file. If you don't want it overwritten, you give it more weight, or more accurately, more Specificity.
Many bootstrap styles are notoriously specific, and require heavier selectors to overwrite.
So first of all, make sure you're loading you header.css file _after your bootstrap.min.css, and make sure you're using specific enough selectors.
Take a look at this snippet: If you want the .alt div to be black, you'll need to make sure you're using a heavier selector if your library is using a really specific one, even if your selector comes afterwards.
/* Library.css */
div {
background: #0095ee;
color: #fff;
}
div + div.alt {
background: #ee3d96;
}
/* Custom.css */
.alt {
background: #000
}
<div>I'm the first div</div>
<div class="alt">I'm the second div</div>
<div>I'm the third div</div>
In a post of mine in wordpress I'm posting source code as described here.
An example of the code goes like this:
[code language="csharp"]
// Code goes here
[/code]
The result looks like this:
What I want to do is change the font size and make it smaller.
I've inspected the element of the code which gives the following:
I've tried adding custom css using the Simple Custom CSS plugin to change the font size but to no avail.
The CSS that I've tried is the following:
code {
font-size: 10px;
}
.csharp plain {
font-size: 10px;
}
.csharp keyword {
font-size: 10px;
}
How can I change the font-size of the code?
Your element seems to be part of the page therefore custom CSS should work. Most probably it is not working as the CSS rules of another stylesheet (probably the WordPress.com default) are stronger or more specific.
Try with the CSS !important rule:
code {
font-size: 10px !important;
}
.csharp plain {
font-size: 10px !important;
}
.csharp keyword {
font-size: 10px !important;
}
If this still does not work use more specific CSS selectors with the important rule.
If this still does not work your custom stylesheet is not applied yet and you have to check your configuration.
You are trying to style elements based on their css classes, but your code doesn't have the "." before their names. Based on the example of the link:
.syntaxhighlighter { font-size: 10px; }
should do the trick.
Changing the font size of your code on WordPress is pretty easy. This is what you need to do.
1. Switch from the Visual tab to the html tab in the editor
2. Surround your codes with these tags:
<pre><code><span style="font-size: small;"> YOUR CODE GOES HERE</span></code></pre>
for example:
That's it.
This was what my code looked like in preview mode BEFORE I used those tags (While I used [language= "java"])
And this is what it looks like AFTER using the tags:
The available font sizes are xx-small, x-small, small, medium, large, x-large, xx-large.
If you are not familiar with html, it is advisable to switch back to the visual tab. Hope this was helpful
I am sorry beforehand if question is stupid, but this is my first project.
I got html.css layouts from HTML/CSS-coder, and for each view they made separate html and separate CSS file.
But I am developing SPA, so there will be one page as an entry-point. Obviously, it should contain all CSS files for all views. The problem is that some of the CSS files contain classes with the same name, but different content. So if I just put list of CSS files in the entry html, some views become a mess, because they use wrong classes.
Thanks a lot.
As I see that my question is not being understood, I decided to give example:
File1.css, used in view1:
.class1 {
cursor: default;
}
File2.css, used in view2:
.class1 {
cursor: pointer;
}
Obviously, I need both as is and cannot use !important; as this will make a browser to use only one of them in both view1 and view2.
What is correct approach to solve this? Ask html coder to re-name classes, or do it myself? Or is there some tool that can somehow consolidate CSS files automatically?
Also, how usually html/css layouts should be coded for SPA to avoid this situation?
UPDATE 1
I appreciate efforts the SO community made to help me though question is indeed could seem vague. I've already learned a lot from all answers.
The situation is much clearer for me now.
The problem in many projects such as yours is that developers do Not do what they are supposed to be doing in standard manner. The correct approach to manage CSS Files in more than 500 lines of CSS Code is to follow Modular, Structured Patterns such as BEM. These Standards guid you through the right choice for the naming conventions and writing Css Components.
For example in Twitter Bootstrap they use components and utilities to manage large projects and avoid such collisions.
Your way to get out of it
You have always the chance to write your styles inline inside the html code. This would bring a high specificity and will override Clas Based CSS of the files included.
You could provide a .css file of your own and include it after all that developre's css and !important all the mess or with the help of high specificity like ids make your CSS win!
Forget about the whole CSS They provided you and start using a framework like Twitter Bootstrap or Zurb Foundation.
Yes you are going to have to go in by hand and re-code the classes. Additionally You can add id's or an extra class to whatever section you are currently styling.
For example: <div class="CSS-coder" id="myExtraStyles"> or <div class="CSS-coder myExtraStyles">
!important will override most styles. But it would be better to edit the current classes that wont be sharing style attributes.
Additionally remember that "Cascading" means from top to bottom. So any styles loaded after the default styles will override the styles loaded before it.
I agree with the other poster in that a "framework" is the way to go.
Good luck with your project.
If I understand correctly, it seems as though you need to use parent / child selectors depending on which view it is:
file1.css:
.view1 .class1 {
// Styles
}
file2.css:
.view2 .class1 {
// Styles
}
To achieve this, look at each view and see if there's a top-level element you can append a class to, such as the <body> tag:
<body class="view1">
<div class="class1">
AND
<body class="view2">
<div class="class1">
This removes any need for !important (stay away from that as much as you can!)
EDIT
Re-reading your question I think I have a better idea now as to what your actual problem is.
What you can do is to find or add a parent element that you can use to filter out the styles.
Let's say you link to those 2 CSS files and both of them define a style like so:
/* First CSS file */
.sub-div {
background-color: red;
}
/* Second CSS file */
.sub-div {
background-color: blue;
}
On your HTML, look for a parent element that you can use.
<div class='red-only'>
<div class="sub-div"><p>View 1</p></div>
</div>
<div class='blue-only'>
<div class="sub-div"><p>View 2</p></div>
</div>
Create a custom CSS (you should link to the file last).
.blue-only .sub-div {
background-color: blue;
}
.red-only .sub-div {
background-color: red;
}
When working with css, the order is important.
The file that is declared last will have the highest precedence.Now with that in mind if you have
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
Then the code specified in file2 will override the code in file1, only if they have the same specificity. Meaning that the more specific declaration will trump even if it is declared in file1. So if you want to override a rule in file1 you will need the exact same declaration in file2.
When working with files created by others like bootstrap or similar it is preferable to create a new file.
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
<link href="myStyle.css" rel="stylesheet" type="text/css">
This will help you avoid trouble that might arise from modifying the originals.
The code inspector in chrome and firefox will be helpful when you need to check wich classes are applied to a certain element.
It might be that your element is applying a class that overrides the one you are trying to apply to the element. For example:
<div class="class1 class2 class3" ></div>
Class3 might override parts of class1 and class2, because it is the class applied last. Like i said, in CSS order is very important.
Do not use !important if possible. You might want to override values later on, and with !important will become difficult to do so. Verify if there are !important declarations in file1, because these might be the ones causing you trouble.
Are you using a programming language? Or just CSS/HTML markup? If you use a programming language (what I suppose, as you got one entry point) you could simply make a big switch statement, check the current view and then inject accordingly the appropriate css file.
We have had a site re-designed by a company who also maintains and hosts it, as well as providing us with our CRM system. The issue I am facing is they add a bit of a backlink to the footer, which I am unable to edit as its not part of the page until the server generates it.
I would like to use On Page CSS to style this to white, or completley remove it. Either is fine
<span style="width: 100%; text-align: center; display: block; color: #999999; font-family: verdana; font-size: 7pt;margin-bottom:4px;">Powered by <a style="color: #999999;" href="http://www.prospectsoft.com/ecommerce" target="_blank">ProspectSoft eCommerce</a> and <a style="color: #999999;" href="http://www.prospectsoft.com/crm" target="_blank">CRM</a></span>
The above is the code I can see when I look at the source of the page in Firefox. I cannot see this code in the editor they provide, however I can edit the css files.
Is it possible to use on page CSS to style this out?
Well in my mind with pure CSS, no since there doesn't seem to be something unique to reference it by.
Alternate Solution:
If you can use Jquery it should be relatively easy though.
Do following in head:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$().ready(function () {
$('footer').child().hide();
});
</script>
Depending on the build of the page you should be able to isolate that HTML element. For instance, if that span is the only element in the
<footer>
tag, you could simply use:
$('footer').hide();
Note: They may already be referencing jquery, which means you could just do the code.
One More:
$().ready(function () {
$("a:contains('ProspectSoft eCommerce')").parent().hide();
});
Will delete all parents of anchor tags that contain that text though, so be careful.
EDIT:
$("span:contains('Powered by')").hide();
In line CSS will typical override stylesheets declared in the document head.
If you find certain properties remain stubbornly unaffected, try using the "!important" modifier.
Example:
color: #ff0000 !important;
Beyond this, I can't give you any further advice given that you haven't specified exactly what your problem is.
Not good looking but works:
div span, span a { color: #FFF !important; }
Bad thing is you would have to set the color to all other similar nests "div span" and "span a"