I have Bootstrap loaded and working all fine, via CDN, and I'm trying to override the bootstrap default size and color stylings for a <caption> tag. So, I've placed some css in my stylesheets/application.css file:
caption {
font-size: 150%;
color: #000000;
}
My application.html.rb head looks like this:
<head>
<title>Odot2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
Even though bootstrap is listed after the application.css manifest file the font-size css selector i defined in application.css does take effect, yet the color selector will only work if i move the bootstrap link before the application manifest link?
Why does one selector work and not the other and what is the correct way to be doing this? Thanks in advance.
Bootstrap css defines caption as:
caption {
padding-top: 8px;
padding-bottom: 8px;
color: #777;
text-align: left;
}
Note, there is no font-size there, but there is color.
In css, if the same property is defined in exactly same selector more then once, the second definition overrides the previous one. Hence if you define color first in your assets and you load bootstrap later on, bootstrap will override your definition. Since font-size is not used in bootstrap for this selector, order doesn't make any difference.
Thats how CSS works - if two rules have the same specificity than the latter rule always wins:
a.css
p { color: blue; }
b.css
p { color: red; }
--
<html>
<head>
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
</head>
<body>
<p>I'm red</p>
</body>
</html>
That's why you always place libs at the top and your overrides under. That is unless you want to start a specificity war...
The correct way, if you want to override a style defined in a library, is to put your own stylesheet after the stylesheet for the library, as you noticed.
Now the Bootstrap CSS does not define the caption color font size, so it doesn't matter where you put the size in your CSS; that's the size it will take. However, it does define the color, so in that case, the order in which the styles appear is important. The last one takes precedence.
Use the custom style CSS at the last, after bootstrap CSS..it will over write the caption style. Hope it will resolve ur issue
Just add important to your css attribute value to override default bootstrap CSS
caption {
font-size: 150%;
color: #000000!important;
}
Hope that will be quick and work for you well.
thanks
Related
I've searched around a bit and can't find a clean solution.
Bootstrap is overriding my custom css. I have ensured that my custom script file is below the bootstrap css file, but this still doesn't solve the issue.
If i tack the !important tag on to a font-size, that works. I just feel like going through and putting !important after everything is sloppy and time consuming. Thoughts?
I am running a rails app, if that is germane to my issue.
Script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type="text/css">
<link rel="stylesheet" type="text/css" href="style.scss">
CSS
h1 {
font-weight: 600;
color: #fff;
font-size: 5.5em !important;
}
You need to use CSS specificity to override the default Bootstrap CSS without using !important. So your h1 tag could be defined using the following:
CSS
body h1 {
color: #fff;
font-size: 5.5em;
font-weight: 600;
}
Just adding body before any of your CSS declarations should override the Bootstrap CSS. See this Code Pen to see an example with your code.
I have read and learned that internal stylesheets will override external ones. And also, I learned that the stylesheet last to be called will override the previous one.
With that said, when I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal. It would make sense, as the external sheet was called last, but with what I have learned so far about internal CSS as having higher precedence, it shouldn't matter if it was placed before the external one, right?
There are only three types of styles:
Inline
Embedded
External
And the inline styles are very powerful, because, they are included along with the tag:
<div style="/* rules */">
The embedded styles are almost similar to external styles. Embedded styles are defined by using the <style> tag inside the same page. The main difference between embedded styles and external are, embedded are specific to the page, which they are contained, while external are generic to any page that uses it.
<!-- External Style -->
<link rel="stylesheet" href="style.css" />
<!-- Embedded Style -->
<style>
/* Page Specific */
</style>
And specificity matters in the way of how you import the styles. Always load your external styles <link /> first and then your page specific embedded <style> tags.
The specificity is as follows:
* Image credits CSS Tricks.
I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal.
Consider I am using bootstrap library, and Google Fonts. I will load them first, and then override them in my own styles.
<link rel="stylesheet" href="googlefonts.css" />
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="custom-styles.css" />
There's no difference between having your embedded or internal styles in CSS file or using <style> tag. The order of loading precedence matters.
A CSS file, say style.css with the following contents:
* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}
And having a style tag like this:
<style>
* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}
</style>
Both of them have no difference in them. The order you load matters very much.
How do you override bootstrap 3 styles with external custom CSS?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet"/>
<link href = "css/styles.css" rel = "stylesheet"/>
<div class = "navbar navbar-inverse navbar-fixed-top"></div>
CSS
.navbar-inverse {
background-color: #FF0000;
}
There are a few things to consider:
Stylesheet order - The stylesheet you are trying to overwrite should come first.
6.4.1 Cascading order
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
In you case this shouldn't be an issue.
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/overwrite.css" rel="stylesheet"/>
Selector specificity - Read up on specificity (mdn).
Put briefly, you should use a selector with the same specificity (assuming it appears later and will overwrite the initial declaration), or a selector that is more specific.
Bootstrap 3's default styling uses the following for the navbar's color:
.navbar-inverse {
background-color: #222;
border-color: #080808;
}
You could try using a more specific selector:
.navbar.navbar-inverse {
background-color: #FF0000;
}
Stylesheet paths - If all else fails, your stylesheet path(s) must be wrong.
Try this:
.navbar-inverse {
background-color: #FF0000 !important;
}
I like to have the navbar-inner element in my Bootstrap Layout to be customizable by the jQuery UI framework.
<div class="navbar-inner ui-widget-header">
</div>
But the background of the navbar is always black.
How can overwrite the Bootstrap Background with the background from the ui-widget-header class without changing the bootstrap css file?
Create your own CSS file which you will use to overwrite styles from the bootstrap.css and add its reference to your HTML after the reference to bootstrap.css. Also, to ensure that your styles overwrite the bootstrap ones you can use the !important keyword in your css.
So, create a CSS file and call it something like bootstrap-overwrite.css.
Add the bootstrap class you want to overwrite -
.navbar-inner
{
background: none !important;
}
Add the reference to your HTML after the bootstrap reference -
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap-overwrite.css" rel="stylesheet" type="text/css" />
Twitter Bootstrap is a framework that is supposed to be restyled so you shouldn't be afraid of overwriting the default styling.
Make the ui-widget-header selector more specific, so that it overrides navbar-inner in the cascade. For example,
#pageid .navbar .ui-widget-header {
background: red;
}
Is more specific than simply...
.ui-widget-header {
background: red;
}
I'm experimenting with a lot of success with CSS3 Custom Properties (aka CSS Variables). I'm talking about the --black: #000; and background: var(--black); type variables. However, I'm having no luck when variables are declared in separate linked documents.
With CSS Custom Properties being at over 72% browser compatibility (src: https://caniuse.com/#search=css%20variables), I'm keen to start using them in a very specific app where I know my audience are using compatible browsers.
I'm wondering whether these CSS Custom Properties are global in scope across all linked CSS documents or whether they are only global (at the :root element) per document?
I'm not able to find an answer (even in the spec)!
Some of the research I read:
https://drafts.csswg.org/css-variables/#defining-variables
http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml
https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties
https://css-tricks.com/css-custom-properties-theming
https://www.sitepoint.com/practical-guide-css-variables-custom-properties
https://www.toptal.com/front-end/dynamic-css-with-custom-properties
https://googlechrome.github.io/samples/css-custom-properties/
https://tympanus.net/codrops/css_reference/custom-properties/
My specific problem is occurring in a Ruby on Rails application, where I'm including the CSS Custom Properties in a <style> block ahead of an SCSS stylesheet include which when deployed is to be pre-compiled. If I include the variables at the top of the SCSS, everything works just fine. However the <style> block is to contain theme variables and needs to be compiled by ERB at runtime.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
:root {
--primary-color: #000;
}
</style>
<%= stylesheet_link_tag 'application', media: 'all' %>
</head>
</html>
In MDN:
Custom properties participate in the cascade: each of them can appear
several times, and the value of the variable will match the value
defined in the custom property decided by the cascading algorithm.
It works just like any other CSS properties. It should be declared in the ancestor of the target element. So usually it would be declared to the top-level element html or root:.
It does not matter whether CSS custom properties are declared in an external CSS file or the same file.
The following is a sample using two external CSS files. It works on Firefox, Safari and Chrome.
https://thatseeyou.github.io/css3-examples/basics/customproperty.html
variables.css :
:root {
--red: #f00;
--green: #0f0;
--blue: #00f;
}
style.css :
.red {
background-color: var(--red);
}
.green {
background-color: var(--green);
}
.blue {
background-color: var(--blue);
}
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<link href="customproperty/variables.css" rel="stylesheet">
<link href="customproperty/style.css" rel="stylesheet">
<style>
.module {
--red: #800;
--green: #080;
--blue: #008;
}
</style>
</head>
<body>
<div class="red">red</div>
<div class="green">green</div>
<div class="blue">blue</div>
<div class="module">
<div class="red">red in module</div>
<div class="green">green in module</div>
<div class="blue">blue in module</div>
<div>
</body>
</html>