I am building a pagination from NG-Bootstrap pagination component. In that I want to change (actually remove) some CSS which is declared in NG-Bootstrap library. How can I do that without changing the NG-Bootstrap style sheet.
As shown in the above picture I want to ignore padding-left:0 which is declared in .pagination. I don't need to add another value for it.I just want to ignore it. Is it possible ... ?
To answer your question, no, you can't ignore a CSS styling rule. But you can override it without altering the NG-Bootstrap style sheet.
You can attach CSS rules to HTML documents in a few different ways, here are the most common:
Link to an external stylesheet by adding a <link> tag to the <head> section of your HTML document:
<head>
<link rel="stylesheet" href="mystylesheet.css" />
</head>
Embed the CSS into your HTML document with a <style> tag:
<style>
background-color: blue;
</style>
Add the CSS inline to individual HTML elements directly with the style attribute:
<div style="background-color:gray;"></div>
And depending on which way you do it, different styles will be applied depending on their precedence. Inline takes precedence over embedded, and embedded takes precedence over a linked stylesheet.
For example, if you specify a gray background on a particular element inline, and specify a blue background on that same element in the embedded style section, inline wins and the background will be gray.
So for your situation you could either embed the CSS or put it inline on the elements you want to change. Doing either of those will override what's in the NG-Bootstrap style sheet without altering it.
Related
I'm trying to recreate this table in HTML5. It doesn't have to look perfectly like this, just close enough. I don't have access to the CSS file. Grateful for any advice on best practice.
Thank you.
Options you have:
Three options, from worst to best:
Style all HTML <table> elements manually using inline styles such as
<table style='width:80%;margin:auto;'>
This is not at all recommended but will overwrite almost all CSS defined styles.
Use a <style> tag to set styles in the header of your HTML file, which in effect is having an inline-CSS stylesheet within your HTML document.
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
table tr th {
color: orange;
font-weight: bold;
}
</style>
You should note that the <style> markup should come after the styles sheets have been defined (see example above) otherwise the external stylesheets will overwrite your <style> elements (because they're loaded after it).
Use another style sheet for this specific table element. In order to minimise overwrite and maximise focus you can define the table with an id and your style sheet will simply use that id reference.
HTML Body:
<table id='mytable'>....</table>
CSS Stylesheet file:
#mytable tr td{
background-color:#ccc;
}
etc. etc.
HTML Head:
<link rel="stylesheet" type="text/css" href="existingStyleSheet.css">
<link rel="stylesheet" type="text/css" href="myTableStyle.css">
As long as your own style sheet is applied last, (as exampled) after the current style sheets, it's rules will usually overwrite the already set inherited rules. More so if the styles are applied via an id reference (rather than a class).
Recommended: Make a new Style sheet and attach it last to your HTML document.
Best practise is NOT to use inline styles and to use external style sheets uniformally, referencing elements as specifically as possible.
Response to Question comments:
If you can't access the <head> of the HTML document then you have to use style inline tags. If these tag effects are being overwritten then you should check the exact rules that are over writing them, check for the !important marker and apply this same marker to your own inline CSS styles:
<table style='border: 1px solid #000 !important;'></table>
The above should not be able to be overwritten by anything, but other CSS rules can interfere, such as !important border declarations for <tr> or <td> elements can look like they're messing up the table border, etc.
This may also be a very useful read for you
Use <style> tag to write CSS inside your HTML, or use inline CSS (paragraph 'Inline Styles')
How do I disable all css styles from the parent site inside an iframe, so it remains completely unstyled of the parents css.
You can't do this with parent site
Assuming that iframe content coming from your domain, and you can change in that.
So you can do this with Css reset
You have to include css file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.17.2/build/cssreset/cssreset-min.css">
And add your CSS after the user's CSS, so that yours is evaluated last. Then, reset the CSS on your elements by giving them a class attribute like this:
class="yui3-cssreset"
If it's on the same domain (cross-domain security will prevent you from making any changes otherwise), you could use jQuery to select the style blocks and links to CSS:
Just point the selector at your iFrame and remove the style and links from the document:
$('#myFrame').contents().find('head link').remove();
$('#myFrame').contents().find('style').remove();
In a single line:
$('#myFrame').contents().find('head link, style').remove();
That should clear up any CSS styles. If there are inline styles though - that will require more work.
Here's a working example:
http://jsfiddle.net/JohnSReid/qv6q6ed8/1/show/
Is there any way of overriding all other CSS on a page and applying a different stylesheet. I have a file with H1,H2,P tags specified in stylesheet but in a modal window I want to apply separate styles but the styles are being ignored in place of the site styles. Is there anyway of stopping the initial site styles being applied
The simplest way would be to remove all stylesheet tags from the HEAD element of the page using JS, except the sheet you want (or then add in that sheet).
If you use jQuery,
$('link[rel=stylesheet]').remove();
Or to target specific sheets:
$('link[rel=stylesheet][href~="whatever.css"]').remove();
Though this, as noted by #Olly Hodgson would be overkill and destroy the styling you'd rely on for the page.
Realistically, place your preferred stylesheet below all others (and any inline CSS), it will override any rules not using the !important demarkation. Alternatively, if you are writing CSS and the specific style is not being enforced, use !important, eg:
div{height:99px!important;}
Write your new styles just below to the ones that you need to override. This will work for you.
You can add another stylesheet to the page after any others already loaded. Then make sure the rules you write in it are of a higher specicifity than the ones you wish to override.
So if your main page's CSS has something like this:
p { color: #000000; }
You could override it in your modal like this (assuming your modal has class="modal"):
.modal p { color: red; }
Another option is the load the modal content into an iframe, using a page which only has your styles supplied.
I have a div located on a page. The issue is that it inherits global styles form a style sheet (Stylesheet A) such as global ul and table styles however, I would like this single div not to do so. I require the div in question to only obtain its styles from another stylesheet (stylesheet B). Currently they are clashing.
Is there any way to do this without having to touch stylesheet A in any way? This is because stylesheet A controls all the major styles of my site and the site is big enough that a change is likely to break something. The div in question holds unrelated data to the site and therefore does not require stylesheet A.
I am using javascript Prototype if that helps? No Jquery please :)
What about using an iframe? is this a valid solution and how would it work?
All help is greatly appreciated.
Perhaps the easiest way to do this would be to simply figure out every style attribute that div inherits from stylesheet A, then manually override those styles with stylesheet B.
If you wanted to put the div into an iframe, that should work as well. You'd need that div to have its own HTML file, hosted on the same domain as the main page (otherwise you'll run into security issues). Link to stylesheetB in the div page, and it would work. You'd run into a few problems, though, in styling the iframe. Since you can't read CSS properties in child documents from a parent document, you'd have to make the iframe a fixed width and height, which is limiting in many scenarios. I guess you could let the iframe scroll, but that might not be want you want either.
I think the best way to do this is to use Chrome Inspect Element, or Firebug in Firefox to look at the CSS inheritances the div is receiving, then
Any repeated styles will always apply the last one read.
Suppose you have this style: .class { background-color: red; } in your stylesheet A, and this one in B: .class { background-color: blue; } .
So, if you are calling your stylesheet A before B:
<link href="sheet_a.css" rel="stylesheet" type="text/css" />
<link href="sheet_b.css" rel="stylesheet" type="text/css" />
Then the style applied will be .class { background-color: blue; }, because it's the last one the browser read.
Now, if this is not working (if your stylesheets are being called in a different order, or the style in A is more specific than the one in B, so A is still being applied), you can use the !important tag.
.class { background-color: blue !important; } will overwrite the style in A, as long as it doesn't have !important also in the original one.
If it's only one element you want to change, you don't necessarily need a new stylesheet. You can have the new style between <style></style> tags in the html head, or inline in the element ( <div style="background-color: blue;"></div> ). Inline elements have more relevance than those on external sheets.
You can use inline styles on the html structure or you can add !important on the rules that you want on stylesheet b to override styles on stylesheet a.
For example on stylesheet b you would do the following:
.element {background:red !important}
So I'm working on a project that accepts HTMLs as inputs and returns them as outputs. All of the HTMLs I get as inputs have all of their text in divs and style sheets that dictate the style for each div based on the class attribute.
To better visualize things, and to see how my project is coming along, I would love to output the input HTMLs color coded to specifications I give them. It's really easy for me to modify the body of the HTML, but difficult to deal with the style sheet. All I'm looking for is something simple to override the color property of the style sheet. It can be hacky, as this is just internal code for temporary use. I just want something simple that works. Is there an easy way to override aspects of CSS classes in the body of a file?
[EDIT] I want to provide an example to better explain what I'm looking for. An example of the style sheets I have at the top of my page (that I want to override) is:
.style21{vertical-align:top;font-size:13px;font-family:Helvetica;color:#000000;}
An example of a div whose color I'd like to change is:
<div style="position:absolute;top:432;left:422;color:#ff0000;"><span class="style21">relating to</span></div>
My problem is that I can't override the color specified in the css. As you can see in the above example, I'm trying to do it in the specific style within the div, but that isn't working. [/EDIT]
Either use the style attribute to add CSS inline on your divs, e.g.:
<div style="color:red"> ... </div>
... or create your own style sheet and reference it after the existing stylesheet then your style sheet should take precedence.
... or add a <style> element in the <head> of your HTML with the CSS you need, this will take precedence over an external style sheet.
You can also add !important after your style values to override other styles on the same element.
Update
Use one of my suggestions above and target the span of class style21, rather than the containing div. The style you are applying on the containing div will not be inherited by the span as it's color is set in the style sheet.
Id's are prior to classnames.
Tag attribue 'style=' is prior to CSS selectors.
!important word is prior to first two rules.
More specific CSS selectors are prior to less specific.
More specific will be applied.
for example:
.divclass .spanclass is more specific than .spanclass
.divclass.divclass is more specific than .divclass
#divId .spanclass has ID that's why it is more specific than .divClass .spanClass
<div id="someDiv" style="color:red;"> has attribute and beats #someDiv{color:blue}
style: #someDiv{color:blue!important} will be applied over attribute style="color:red"
you can test a color by writing the CSS inline like <div style="color:red";>...</div>
You can put CSS in the head of the HTML file, and it will take precedent over a class in an included style sheet.
<style>
.thing{
color: #f00;
}
</style>
Have you tried using the !important flag on the style? !important allows you to decide which style will win out. Also note !important will override inline styles as well.
#example p {
color: blue !important;
}
...
#example p {
color: red;
}
Another couple suggestions:
Add a span inside of the current. The inner most will win out. Although this could get pretty ugly.
<span class="style21">
<span style="position:absolute;top:432px;left:422px; color:Red" >relating to</span>
</span>
jQuery is also an option. The jQuery library will inject the style attribute in the targeted element.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("span").css("color", "#ff0000");
});
</script>
Hope this helps. CSS can be pretty frustrating at times.
if you can access the head add
<style>
/*...some style */
</style>
the way Hussein showed you
and the ultra hacky
<style>
</style>
in the html it will work but its ugly.
or javascript it the best way if you can use it in you case
Eli,
it is important to remember that in css specificity goes a long way. If your inline css is using the !important and isn't overriding the imported stylesheet rules then closely observe the code using a tool such as 'firebug' for firefox. It will show you the css being applied to your element. If there is a syntax error firebug will show you in the warning panel that it has thrown out the declaration.
Also remember that in general an id is more specific than a class is more specific than an element.
Hope that helps.
-Rick