Skip to content Skip to sidebar Skip to footer
Home / Angular / Bootstrap 4 / Css / Html

Override CSS From External Resource

Post a Comment
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

Solution 1:

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.


Post a Comment for "Override CSS From External Resource"