I have a large CSS file for which I would like to add !important
to every CSS property. Is there one-line shortcut to make a whole .css file !important
No. Using !important should only be in specific no-other-way cases. It is not intended to be applied to a whole stylesheet document.
If you are thinking about overwriting so many rules why not just not include the rules you want to overwrite?
No. Also, don't overuse !important
: it should be a last resort. The effect of applying !important
to all CSS declarations is equivalent to having no !important
added to each declaration.
Use more specific selectors (#id
) instead of adding !important
if you want a certain property to take precedence.
Is it not possible to move the CSS file link to be the last one being referenced and hence takes precedence over all other CSS files above it?
If your goal is to override styles by importing another stylesheet, you should use the order of precedence.
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
Here the style.css
is the original and style-override.css
would contain your new custom css. These styles will override the styles from style.css
. This means you won't need to use !important
because the style is overwritten.
Alternatively you could add in a CSS reset to remove all styles and build on-top of that.
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
Check out a CSS reset at http://meyerweb.com/eric/tools/css/reset/ and add it to reset.css.