Override and reset all the specifications in a CSS rule

Question

Bootstrap defines a set of rules for the <pre> tag. However, I do not want any of the rules it defines for the pre selector.

Bootstrap defines the following rules:

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

However, I want a clean way by which to reset all of these to "factory default" and ignore the bootstrap styles, without manually writing it out the rules.

Is this possible?

Carrie Kendall · Accepted Answer · 2014-11-03T20:32:02.887

4

You can create a bootstrap reset rule for each of the elements you'd like to reset. So with <pre>, you'd create something like:

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');
 pre.reset {
  /* defaults */
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0px;
   
  /* bootstrap overrides */
  padding: initial;
  line-height: initial;
  color: initial;
  background-color: initial;
  border: initial;
  overflow: initial;
  word-break: initial;
  word-wrap: initial;
  border-radius: initial;
}

<pre>
    With bootstrap
</pre>

<pre class='reset'>
    Without bootstrap
</pre>

Alternatively to having a .reset class, you can use scoping, although I'd strongly suggest against it as it is confusing and has spotty browser support.

edited Nov 03 '14 at 20:32

answered Nov 03 '14 at 20:07

Carrie Kendall

11,124
5
61
81

This does not set factory defaults as requested, or browser defaults for that matter. It just sets specific values (which may or may not be used as factory defaults). – Jukka K. Korpela Nov 03 '14 at 20:24
@JukkaK.Korpela you're right, my example was put together without regard to details, this should be fixed. – Carrie Kendall Nov 03 '14 at 20:29

score 2 · Answer 2 · answered Nov 03 '14 at 19:51

Unfortunately this is not possible due to the way CSS works. Once Bootstrap defines those styles, you are stuck with them until another style of higher importance overwrites them.

Your only options are:

Look up the styles in the user agent stylesheet of the browser you are targeting and then manually write them in after the bootstrap styles
Go into the bootstrap styles and comment out the styles targeting <pre>

I would suggest going with option 2 after making a copy of bootstrap and renaming it (so that there is a clear indication that you have made adjustments to the library).

Override and reset all the specifications in a CSS rule

2 Answers2