When I add bootstrap on my html link it changes some of my css code.
Pre-bootstrap:
After-bootstrap:
Bootstrap link:
Css code changed:
#bannerRodap{
background-color: black;
position: fixed;
width: 100%;
height:80px;
top: 88%;
}
#bannerRodap p{
position: relative;
top: 25%;
color: white;
text-align: center;
font-family: 'Helvetica',sans-serif;
font-size:0.8em;
}
And besides that, bootstrap also added this little blue thing under my flex-box container.
Yes the CSS change you experience is bound to happen, it is one of the typical disadvantages of using Bootstrap. Like the name itself suggests the framework "Bootstrap" makes its complete CSS available to your entire project. Real problem is the immense code the bootstrap.css contains even though the programmer doesn't even need most of it(more than 3000 lines). I have taken a very small snippet from the file(bootstrap.css) to explain:
a {
color: #337ab7;
text-decoration: none;
}
a:hover,
a:focus {
color: #23527c;
text-decoration: underline;
}
This means all the anchor tag(<a>) in your project would have the color #337ab7 by default UNLESS you override this style to what you need in your own stylesheet. The real problem arises when you see other elements in your project changing its behaviour according to the bootstrap CSS but you really didn't want them to - In this case you need to override the styles coming from bootstrap.css just say in a way to cancel out the bootstrap styles you need to write your own unnecessary styles to make it look normal.
That's the reason when you ask most of the experienced UI devs about bootstrap they would just go ... ** yuck **
Your own stylesheet starts to get really messy.
HTML gets messy especially when you start using the grid structure of bootstrap
Huge unwanted code(from BS CSS/JS) lies in your project even though you will never ever need all of them.
Even the order of the stylesheets included hardly makes any difference. In your case use the Dev Inspector to see whats causing the blue thing(probably a shadow from boostrap) to appear & remove that by overriding the styles in your own stylesheet(in this case, your stylesheet should be included after the bootstrap.css)
Imo, bootstrap should be used mostly by those who need bootstrap to do everything about the look & feel of their project with very little customisation to do on their own. If you have heavy customisation of your own then might as well write you own CSS from the scratch without including BS.
Related
I created a global CSS file. It is working perfectly, except that I am unable to set margins.
For Example CSS:
.update_date {
font-size: small;
text-align: right;
margin: 0;
}
This is a CSS style for class update_date. When I use it, except margin, everything is applied. It's the same case with every other class. None of these classes are overridden in any other place.
Can someone provide a workaround on how I can set margins globally.
Environment:
Angular 10/11
Try using
.update_date {
font-size: small;
text-align: right;
margin: 0 !important;
}
this happens because that style is getting overridden by another
You should avoid "!important" if you can. It can cause unintended styling issues later down the line - see below.
My suggestion: In your browser, use your "Inspect Element" (Ctrl + Shift + I) tool to figure out where in the DOM Tree your styling is coming up and what is overriding it. This will help identify if !Important is truly the only solution you can use.
Inspect Element Tool Picture Example
Hard to say with your code snippet what is actually happening and being this post is 1.5 years old, you may already know this info. But I didn't see any other responses, so just wanted to raise awareness to the "!important" property.
More about !Important
From W3 Schools (I am sure you can find this elsewhere as well): https://www.w3schools.com/css/css_important.asp
"Tip: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to."
I have two CSS from two big projects, whereas I need to merge the two CSS together. Essentially, I just included both CSS in the HTML header of the new project that needs both CSS.
Using WebStorm what is the best way to find and track colliding CSS properties?
For example (note this is just a basic example to express my point):
first.css
.my-class-1 {
background: #eeeeee;
color: #ffffff;
font-family: 'Poppins', sans-serif !important;
min-height: 59%;
}
second.css
.my-class-2 {
background: #000000;
color: #ffffff;
font-family: 'Poppins', sans-serif !important;
min-height: 100%;
}
And given that it is used
<div class="my-class-1 my-class-2" ></div>
From these examples, the background and min-height properties are colliding to each other.
I think your best bet would be to actually load the page in your browser, and use chrome dev tools to inspect the styles. You can do this with most browsers, but I would choose either Chrome or Firefox as they're probably the most refined. This can show you the computed styles and what styles are overwritten by others.
You need to check for these styles manually as your IDE won't have the context to understand that there are conflicting classes being used in the html.
However, if you want to search for duplicate CSS within the CSS file, I would suggest something like http://csslint.net/
The best solution is to use https://stylelint.io/
With this configuration:
{
"extends": "stylelint-config-standard",
"rules": {
"no-duplicate-selectors": true
}
}
It is able to detect similar names which actually help (mostly) finding the colliding CSS properties based on common names.
I am trying to change the color of the banner in the Jekyll leap-day theme, here https://github.com/pages-themes/leap-day/blob/master/_sass/jekyll-theme-leap-day.scss
To do that, I have added an assets/css/style.scss to my github page, with the following contents
---
---
#import "{{ site.theme }}";
#banner {
background: #a90000;
border: 1px solid #3399cc;
}
But nothing changed. How can I overwrite these values of the banner div in SCSS?
There are a number of reasons why this might not be working. Without being familiar with the output and html you are styling here are some things you should check (all of which you can check through browser developer tools. e.g. Chrome DevTools )
The element with id="banner" exists in your html and is visible.
Your additions to the SCSS are actually being included and are being applied to the element. You can check this in Chrome developer tools by inspecting the element. Under styles you should be able to see your style rules alongside the others. If you can't then it you may have a selector issue, likely caused by some earlier nested styles. (If you have also ruled that out, and your additions are not appearing anywhere in the output then something is going wrong with how you are building and fetching your SCSS).
If you can see them but they have a line through them, then they are being overruled by rules with a higher CSS specificity. You can fix this by making your selectors more specific. E.g.
div#banner {
background: #a90000;
border: 1px solid #3399cc;
}
Or perhaps
.someWrappingClass #banner{
background: #a90000;
border: 1px solid #3399cc;
}
Bearing in mind that these will change how they are selected - which could be an issue later if the HTML changed.
Really how you fix specificity issues properly will depend entirely upon your HTML, how you structure it and how you might change it in future. There really is no substitute for just learning how cascade and inheritance works.
I use the 2 ways but I prefer the first due to reuse code. some prefer one or other. But I would like to know if the load in big stylized pages is better in one way than the other.
1)
<style>
.red{ color:red}
.right25{ margin-right: 25px}
.bold{ font-weight:bold}
</style>
<p class="red right25 bold">this is a red text, bold and right margin 25px</p>
2)
<style>
.class1{ color:red; margin-right: 25px; font-weight:bold}
</style>
<p class="class1">this is a red text, bold and right margin 25px</p>
That depends on how much of the code that you can actually reuse, but the performance difference won't be that big.
The biggest difference between the approaches is what the classes mean. Generally you should have classes that represent what you are trying to show, not exactly what styles you use to show it. Names that represent the intent rather than the implementation fares better when you make changes.
For example if you have the class right25 and want to change the margins to 20 pixels instead, then you either will have a class name that doesn't represent what it actually does, or you have to change it to right20 everywhere that you use it.
Two is your answer. The browser reads each class from right to left. Reading one class is faster than reading two classes.
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
http://css-tricks.com/efficiently-rendering-css/
Use the external stlye sheet. The browser can cache that.
http://www.w3schools.com/css/css_howto.asp
You're absolutely talking about the first method that could be slower than the second method?
To answer: There's no difference in speed of styling css.
To illustrate:
div{
color: blue;
padding: 10px;
}
div{
color: red;
font-size: 16px;
padding-left: 5px;
}
When css is applied over the rule, the following css will be applied by the browser:
div{
color: red;/*later one*/
font-size: 16px;
padding: 10px 10px 10px 5px;/*padding-left 5px is taken from later rule*/
}
And which is parsed by the browser at the same time when the div gets styled from the stylesheet.
Why there's no difference?
In any other programming language like JavaScript if one line gets error then another line doesn't run and so from that line of code the interpreter won't go to read the whole code.
But in css language there's no problem even if you write rules whether html has no such classes or id, there's no problem reading next line of code even if you have some mistakes in your stylesheet, whatsoever the browser will load entire stylesheet file and read the code and gives the output in same time (when stylesheet is fully loaded) and both of your code doesn't seem to be any difference in the speed.
By the way, it could be slower (that even you can't catch with your eyes) where there is slower internet connection below 32kbps because of stylesheet downloaded the line by line of code.
Newbie question. I'm trying to use a background image for my site which is built with Bootstrap.
I've added additional body CSS in a separate css file in my asset pipeline, and added a background-image:
body {
font-size: 16px;
padding-top: 10px;
background-image: url("../assets/back14.gif");
}
This changes the background fine but also applies it to other elements like nav units etc that I want to leave with default colours.
Can I fix this behaviour or apply the background in a better way?
Sorry to say, but I think you are correct: those backgrounds are transparent by default. As you can see from the Customize page, although there are variables for the backgrounds of active and hover links in the Navbar section, there is no variable for the background of plain old regular Navbar links. :/
Otherwise, not that hard of an override:
.nav-stacked > li > a {
background-color:#ffffff;
}
But still seems like something that should be in there as an option.
JSFiddle