Where and how do I add a custom class like:
.my-custom-class {
color: red;
}
The reason is so it won't change all of the Semantic UI elements too.
In which file do I add it for it to be included in the dist file?
If you don't want to change the Semantic-UI elements, why don't you just have a completely separate CSS file for custom styling?
It's completely fine (and quite common) to have multiple CSS files, such as with the following structure:
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
Then in custom.css, simply include your additional custom styling:
.my-custom-class {
color: red;
}
The order in which the external stylesheets are loaded directly corresponds to the specificity; loading your custom stylesheet after Semantic-UI will give it more specificity in the case of a tie.
Hope this helps! :)
Related
I want to make my buttons inherit from Bootstraps .btn-primary. Do I have to reference or include Bootstrap's less or if I know that my bootstrap.min.css is included before my compiled less file can I just say:
.my-btn {
.btn-primary;
}
In my HTML file:
....
<link href="bootstrap.min.css" rel="stylesheet" media="all"/>
<link href="compiled-less.min.css" rel="stylesheet" media="all"/>
You can't include class within another class once you're working with already compiled css - that only works in less. I'm usually including whole bootstrap less to my custom less, where I alter/overwrite original bootstrap properties, add my custom stuff and compile it to one minimized css file.
How do you override a BootStrap CSS file? I have created another file called site.css and linked it to the index.html file; however, this still does not allow me to override. Is this not a correct action?
If you want to override the bootstrap CSS so you can try this trick.
put your bootstrap css and site.css in head section like below example
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="site.css">
now site.css will be override to bootstrap.css :)
Proper way to override bootstrap is to create your own style class.
<div class="bootstrapclass yourownoverrideclass"></div>
in your css
.bootstrapclass.yourownoverrideclass {
margin: 5px; //override content
}
Suppose we have the following in stylesheets/myFilename.css.scss:
...
.carousel-control.left, .carousel-control.right {
background-image: none;
}
...
This will not perform as intended unless I modify it to:
...
.carousel-control.left, .carousel-control.right {
background-image: none !important;
}
...
However, if instead of having the css in the stylesheets folder, I put it directly into myfile.html.erb, I don't need !important. How do I resolve this issue?
I assume that it has something to do with the ordering/combination of the css from stylesheets, but I'm not certain. If anyone could shed some light, that would be great.
This is because CSS has a cascading hierarchy that it follows. In your case:
Inline styles
Internal stylesheet
External stylesheet
Internal stylesheet is prioritized more than External stylesheets, so if you declare it directly in your html, you won't need !important anymore to override any other external stylesheets that cause this conflict.
Further reading on css hierarchy and specifity:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://www.w3schools.com/css/css_howto.asp
If you need a !important in your external stylesheet, that means you have a css conflict somewhere else. Being more specific in your selector is always better than using !important, so you can do it like so:
/*Use an ID in your html*/
#my_id .carousel-control.left, #my_id .carousel-control.right {
background-image: none;
}
You should add your stylesheets/myFilename.css.scss file after the main stylesheet.
Suppose, your all css style getting from styleshees/style.css
Now your should write (stylesheets/myFilename.css.scss) it after that ( styleshees/style.css) in your index or associate header file.
Example,
<link rel="stylesheet" type="text/css" href="/styleshees/style.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">
not
<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">
<link rel="stylesheet" type="text/css" href="/styleshees/style.css">
Bootstrap includes some (very nice) styling for HTML inputs/selects/etc. However, for the project I'm on, they already have styling for these HTML elements that they want to keep.
Is there a way for me to turn off Bootstrap styles for inputs? Perhaps with some kind of css class? Or, do I have to override them manually?
The order of inclusion of the stylesheets can help you.The inclusion of bootstrap.css followed by your own stylesheets makes elements in your stylesheet to override those in bootstrap.
For example,
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="/static/jquery.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<link type=text/css rel='stylesheet' href=/static/main.css><!-- custom stylesheet -->
For eg,
If the main.css contains
body
{
background-color:red;
}
And bootstrapp.css contains
body
{
background-color:blue;
}
The site will be with a red background.
I imported another stylesheet using #import in the main style sheet file. I would like the changes I have made in the #import stylesheet to override the main style sheet. Is this possible?
If your goal is to override styles by importing another stylesheet, you should use the order of precedence.
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
Here the style.css is the original and style-override.css would contain your new custom css. These styles will override the styles from style.css. This means you won't need to use !important because the style is overwritten.
Avoid !important whenever you can.
To do #import
<style type="text/css">
#import url("style.css");
#import url("style-override.css");
</style>
Also as a side note if you would rather remove all styles from the page, use a css reset.
<style type="text/css">
#import url("style.css");
#import url("reset.css");
#import url("style-override.css");
</style>
Check out a CSS reset at http://meyerweb.com/eric/tools/css/reset/ and add it to reset.css.
#import the second stylesheet at the end of the first.
You're confusing !important and #import
This solution working perfect for me.
Make copy of your main.css and rename it to style.css.
In main.css delete all and past :
#import url("style.css");
#import url("style-override.css");
Thats all.
If your second stylesheet uses the same selectors, then it should override the first without any problem.
CSS has a very strict order of precedence for determining which one should be used, but if all else is equal and two styles have exactly the same precedence level, then it will use the one which was specified last. This allows you to override a style simply by repeating the same selector later on.
The only exception to this is if the first style was specified as !important. In this case, it is much harder to override it. Even specifying another style as !important may not always work (I've seen cases where it worked in some browsers but not others).
So if the previous stylesheet used !important then you may have problems overriding it. But if not, it should be fairly simple.
You can also use more specific class name - for example if you want to change
div#sample {
max-width: 75%;
}
on new css use
body div#sample {
max-width: 75%;
}
Just keep in mind, that overqualified selectors are not the best idea ;)