I need to overwrite the header style from style.css.
Here's the style that I need to overwrite.
.t_header{
text-align: center;
background-color: #bfd4f0;
color:#15428b;
white-space:nowrap ;
margin:0px 10px 0px 10px;
height:1.5em;
}
Now I created another css file name black.css and I need to create a different background color for .t_header
.t_header{
text-align: center;
background-color: white !important;
color:#15428b;
white-space:nowrap ;
margin:0px 10px 0px 10px;
height:1.5em;
}
I already used !important to overwrite the style from style.css but its not working but for some reason, the other style class and id that I overwrite using !important worked well.
I hope someone can give me another way to overwrite the style aside using !important. Thanks
Try to clear your browser cache, then add the files in your code in the following sequence -
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="black.css">
The overriding css doesn't need to have all properties -
This much code will be enough -
.t_header{
background-color: #fff;
}
Using !IMPORTANT is generally not recommended. Try increasing specificity
body div.theader { background: white; }
Also keep in mind that it's generally frowned upon to use more than four selectors.
you get the idea...
Related
I have drop-down in vue component and class of that element is "form-control" and it has it's own styles. I need to override the styles of that class. for that I have done coding as follows (in vue component),
<style scoped>
.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
but this one didn't work for me. so, how to override it?
Thank you!
Using unscoped style can be very dangerous especially general class names like form-control.
I think it's a better way to use deep styles in your parent component:
<style scoped>
>>>.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
but if you can refactor your child component and add a props like formControlStyle with your CSS styles would be the best solution to avoid side effects. You can add a default value to this prop that is your styles in your child component.
You should remove scoped. If you leave scoped it will not apply on other components including those you import.
Or move that css in app.css or app.scss.
Use Deep Selector, ie, :deep(.whatever-style-name) you want to override in your current component
<style scoped>
:deep(.form-control) {
border-radius: 50px;
color: #823F98;
border: 1px solid #3FA294;
}
</style>
by doing this, you can remove the need to use '!important' in every line of css codes that needs overiding.
Refer here in the Vue official docs for more info.
I've been working on a project at work where the each page has its own css file. However, these pages share some css classes' names, .PSBOTTOMLINE, but each script has different properties for it depending on the page.
However, I've been getting some problems because my pages are getting properties from similar classes from other scripts, besides using <link rel="stylesheet" type="text/css" href="/Content/Project/styles/ProjectCss7.css">
to specify what script should be used.
For example, in that one script, i have this class:
.PSBOTTOMLINE {
vertical-align: bottom;
margin-left: -2px;
background: url(/Content/Project/images/PT_TAB_BOTTOM_LINE_SD_CSS_1.JPG) repeat-x scroll bottom left transparent;}
However, this is being imported from script Css2:
.PSBOTTOMLINE {
border-bottom: 1px solid black;
height: 2px;}
How can I prevent properties from being "imported", and make sure my page use only the properties from the appropriate script? I've been renaming the classes but was hoping for a more intelligent way.
You can overwrite some properties in the page css file like this
margin-left: 0px !important;
How can I use different CSS in the same page?
For example I have two primefaces header in the same page and I want to apply different CSS for them.
Is there a way to do this? When I try to add below lines inside head tags, just one of them is working.
<h:outputStylesheet library="css" name="myheader1.css" />
<h:outputStylesheet library="css" name="myheader2.css" />
CSS files:
.ui-layout-unit-header{
font-size: 20px;
border: none;
text-align: center;
background-color: buttonface !important;
}
.ui-layout-unit-header{
font-size: 10px;
border: none;
text-align: center;
background-color: buttonface !important;
}
Any idea how to resolve this problem
If you two CSS rules with the same selectors, the second one loaded in the second style sheet is the one that will be used.
This concept is known as the cascade, and described in the CSS specification:
http://www.w3.org/TR/CSS2/cascade.html#cascade
You can't , All CSS on page will be applied (the HTML "knows" nothing about this process), and the individual rules with the highest specificity will work. Specificity is determined by the selector and by the order they appear in the document. This is part of the cascading.
I'm new to CSS. Ive created a Drupal site and playing with the theme.
I have some breadcrumb stuff that I would like to theme. If I go into Firebug and turn off the CSS properties
background
border-color
border-style
in the below code
.breadcrumbs .inner {
background: none repeat scroll 0 0 #EFEFEF;
border-color: #929292 #E2E2E2 #FFFFFF;
border-style: solid;
border-width: 1px;
color: #8E8E8E;
}
I get the text looking exactly how I want it.
If I now go into my style.css which is inheriting the code and post
.breadcrumbs .inner {
border-width: 1px;
color: #8E8E8E;
}
The formatting I don't want is retained. If I specify .breadcrumbs .inner in the style.css does that not set it up again and override what was specified higher up the cascade?
If that is not the case how do I stop the inheritance without changing the other style sheet?
Thanks,
Andrew
Additional Info
Here is what I have at the moment
This is what I want to have
You're overriding CSS does not replace the 3 styles you want to change, so the original ones are maintained. What you likely want to do is have your style.css set something like this:
.breadcrumbs .inner {
background: none;
border-color: transparent;
border-style: none;
}
If you specify the CSS styles for same classes twice the resulting style is a union of the attributes defined in both classes. To remove the previous styles you have to redefine the attributes.
If for example you have these css attached to your html document
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/posts.css">
if you have the same class say .color defined in the both default.css and posts.css files, you would imagine that that last css file will be used, but it can be ignored if you write it like so:
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green;
}
// In this example the colour would be blue.
Using !important on inherited style forces inherited style to be used, if you want to override the inherited style then you can simply add !important to post.css
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green !important;
}
// In this example the colour would be green.
Now both are viewed as important and the last one will be used.
Why does the following anchor tag has text underlined?
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none;
}
<a class="pagerLink" href="#">test</a>
Probably because another style block has better precedence than your pagerLink class. Try:
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none !important;
}
use text-decoration:none for a in your styles
Ex:
<head>
<style>
.pagerLink
{
background-color: #E4F5F8;
border:1px solid #C0DEED;
}
.pagerLink a
{
text-decoration:none !important;
}
</style>
</head>
<body>
<div class="pagerLink">
test
</div>
</body>
You can use firebug(a firefox plugin) to findout which style is being used for the element now and whether its being overwritten by some other style definition
http://getfirebug.com/
I cant yet leave comments and I respect this is an old question but be extremely careful when using !important in your declarations:
text-decoration: none !important;
You'll probably get away with it in smaller projects but with any non-trivial project that involves collaboration from multiple sources this sort of thing can be incredibly annoying when it over-rides a property I need to set further down the line. Not only do I have to change this to make my fix stick but I also have to check that changing it does not break anything else, which it probably will.
Better is to refactor your declaration or restructure your code so that you dont need to use !important and only fall back to !important when you cant.
To remove underline you need to follow following style code snippet.
.pagerLink{
background-color: #E4F5F8;
border:1px solid #C0DEED;
text-decoration:none !important;
}