I am trying to style my hyperlinks but Bootstrap 4 "Reboot" overwrites my css and changes the styling of my links to this:
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
Other than copying the reboot css, modifying and hosting it locally, is there any way to prevent reboot from styling the links? It does not matter if you load your custom css last, reboot always writes over the top of it.
Adding !important at the end of style is the easy way but, that triggers a waterfall where you will need to add more !important in your styling files.
This is why you should learn tree structure of styling.
What I recommend is add a class name to your body tag and override reboot.css or whatever like
<body class="body-class-name">
and then go into your css file which has the highest priority and put
body.body-class-name .a{text-decoration: none}
Happy coding!
It looks, that you load your CSS in the wrong sequence.
Put the bootstrap CSS above your own CSS.
Then you can overwrite bootstrap-settings without !important (which should still be the very last option).
try !important at the and of the style.
a {
color: #007bff !important;
text-decoration: none !important;
background-color: transparent !important;
-webkit-text-decoration-skip: objects !important;
}
Related
I have a form with mat-errors that I'm trying to space out. I know I can simply space out the form fields themselves, but I've been trying to add margin/padding/border to mat-error elements, and they all get applied, but they don't move.
As far as the CSS goes, I've tried most things I can think of to force it to move. The styles are applied but nothing is actually changing.
mat-error{
display: block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 40px !important;
z-index: 999;
}
Why is this happening?
Change your css to class: .mat-error instead of mat-error.
In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file. and custom all mat styles within.
In Styles.css:
.mat-error {
color: aqua;
}
The result will be:
Please read Customizing Angular Material component styles article for better explanation.
I'm using Bootstrap 4 and I'm trying to set padding for nav links inside navbar in my custom CSS file:
.nav-link {
padding: 0.15rem;
}
And the style that is used is this:
As you can see, the custom.css is nowhere to be seen. The css file where the current style is from is inside bootstrap.css.map.
Why is it reading the style from bootstrap.css.map and not from my custom CSS file? I bundled all styles together, the bootstrap.css is loaded first and my custom CSS is loaded last.
You need to understand how specificity is calculated in css, it is an easy topic.
If you want a quick solution, you can use !important next to your css styling like so :
td { height: 50px !important; }
Sorry, my original answer I looked at the debugger output.
If you need an overwrite. In one of my projects I gave the surrounding tag an id.
<ul id="myNavBar">
Then the following CSS worked for me
#myNavBar .link-item {
padding: 0.15rem;
}
I'm using ui-bootstrap-tpls-2.5.0.min.js. I changed dropdown-menu's backgorund color like this in specific html.
.dropdown-menu {
background-color: transparent;
box-shadow: none;
}
But it makes datepicker's background transparent too. I know why it happened, so I cleared that line but nothing changed.
So I want to change datepicker popup's background using CSS selector like this,
.datepicker .ul{
background-color: white;
}
//this is an example code.
what selector do I have to choose to change datepicker's background?
If this is what you require, you need to add these two styles that are highlighted.
Happy coding :)
The thing is that I want to override the CSS classes of primeng and change some colors. No matter how I do it it doesn't change. If change the ViewEncapsulation to none the component doesn't even appear. I've tried something like this:
.ui-chkbox-box.ui-state-active, .ui-radiobutton-box.ui-state-active {
border: 1px solid red !important;
background: red !important;
color: #FFFFFF;
}
Trying to override the properties in the component css but it still doesn't work.
I know other people have asked the same question but none of the answers has helped me so I'm a little bit desperate.
Add ::ng-deep
::ng-deep .ui-chkbox-box.ui-state-active{...}
I added the classes to the app.less file and it worked like a charm. The component .css was not working.
I am starting a new project, so i thought to start using Reset.css in my projects. i got the concept of using Reset.css, but one thing is bothering me is that does if affects my other style applied on the same element.. like in reset.css div have 0 margin and 0 padding... and if i apply margin to some of the divs in my stylesheet, wont it get disturbed?
Please clear my this doubt
Not if the style applied to your other divs is more SPECIFIC.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
In general any style applied using a class, or an id in the selector is going to take precedence over one which doesn't. But there are many other rules in this area you should become aware of.
i.e.
div.myStyle {...}
will always overrule
div {...}
You have to include reset.css first and then include your own stylesheet file. and be sure that your styles wont be overwritten by reset.php.
What you neeed to do is load reset.css as a first style sheet.
Anything else loaded after it will be overriding reset.css
e.g if you specify in reset css: p { margin: 0px; padding: 0px}
and than load style.css with style: p {margin: 2px; padding: 2px}
The style load as last one will be used.
I personaly use technic with
* { margin: 0px; padding: 0px; border: 0px; outline: none; list-style: none;}
Put it at the top of css file and job done:) No need for extra .css fil.