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>
Related
I am using a template (A). This has some CSS files and I want to inlcude an other template (B) in this template and the other template has also some CSS files. By including the css of template B in A, some forms are looking different because of the new CSS of template B.
How can I inlcude all CSS files of both template without replacing some forms.... Can I set a priority to one CSS? Or is there a tool where I can put more CSS files which will compress all CSS files to one?
Or can I use one CSS file to only one DIV?
CSS means "Cascading Style Sheets". Here "Cascading" means that If something is found two times than the last has priority. So link the CSS file at last which you want to give priority. You can also use !important to give priority. For instance:
color: red !important;
Here red will be used overall.
I’m not completely sure what you are trying to do.
However assuming you want to link more than 1 css file to page. You could play with priorities of CSS selectors. An ID for example has more priority than a Class. You could also make them more specific.
For example:
body ul li span {
Color: red;
}
Span {
Color: blue;
}
Here the span should be red
You should try to include the CSS you want for your login page only (template (B)) into your login page HTML only, like for instance:
index.html file :
<link rel="stylesheet" href="templateA.css">
login.html file :
<link rel="stylesheet" href="templateB.css">
The objective if simply to avoid conflicts between both template, you cannot use both of them on the same page it will cause a lot of bugs and slowdown your website a lot.
Please feel free to ask me in the comment if I'm not clear about anything.
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 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>
I read an article online for tips using CSS and one of the pointers was:
Use a master stylesheet. “One of the most common mistakes I see
beginners and intermediates fall victim to when it comes to CSS is not
removing the default browser styling. This leads to inconsistencies in
the appearance of your design across browsers, and ultimately leaves a
lot of designers blaming the browser. It is a misplaced blame, of
course. Before you do anything else when coding a website, you should
reset the styling.”
Could anyone point me to any tutorials (or even help on here) as to how I can setup a Master CSS Page for my website, and also how I can call classes from the Master CSS Page to objects in my webpages.
For example if I set some styles in my Master CSS page,
I could set class on a div to class="main-header-blue" and it would call that style from my Master CSS Page and apply it to my div (and I could call this class from any of my web page)
Any help or advice is appreciated. Thank you in advance.
I think what you're looking for is Normalize.css. By including this asset prior to your own custom styles, it will help to remove browser inconsistencies with things like margins and padding on the document.
Otherwise, just style as you would normally and you should just be fine. Let me know if you have any other questions!
I hope my interpretation is your answer:
CSS is applying styles from a top-down perspective. This means, if you insert two stylesheets, the top one is applied first and then the second one overrides the first stylesheet
That means that:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="mystyle2.css"> // this one overrides the first
That applies to styles too:
div {
background-color:green;
}
div {
background-color:red;
}
// the background color is red.
That could mean that the first stylesheet is the master stylesheet. That one is containing the 'master styles' and the second one is for 'overriding the defaults'. This is useful when you import a stylesheet from 3rth parties (e.g. Bootstrap).
A second interpretation is SASS. Within SASS you can create a master stylesheet containing the variables that will be applied in the other stylesheets. So, in the master stylesheet you say this:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
Then in your other stylesheets you use those:
body {
font: 100% $font-stack;
color: $primary-color;
}
The basic way of setting a "master" stylesheet is the following:
Assume you have a folder structure like this:
webpage (folder)
css (folder)
style.css (file)
index.html (file)
Lets say you have a file called index.html at the root of your project folder. You need to include/reference the stylesheet (style.css) in the index.html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mydiv">Your content</div>
</body>
</html>
Then you can have this in your style.css file:
.mydiv {
width: 300px;
height: 300px;
background-color: red;
}
This will make the <div>inside the <body>to have a width and height of 300 pixels and a background-color of red. And you can call this style anywhere inside the webpage by giving a <div> the class mydiv.
That is it simply put.
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.