Is There a Shortcut for Setting !Important on Every Property in a CSS File

Is there a shortcut for setting !important on every property in a CSS file?

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.

How to add !important to every element in a CSS file

Probably your new selectors doesn't have enough priority over the ones you have on mystyle.css?

CSS/Training/Priority level of selector

CSS: Understanding the selector's priority / specificity

!important override these calculations, buts a hack that should be avoided if possible in favor of the standard way.

Applying CSS styles to all elements inside a DIV

You could try:

#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}

Etc, etc... Is that what you're looking for?

Extracting only the css used in a specific page

I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.

The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).

Best practice: How to use (repeat) CSS style attributes correctly?

Your aim in writing CSS should be the readability and maintainability of your stylesheet. Usually that means writing as few rules as possible, a goal that is helped by using as many shortcuts as possible, and taking advantage of the CSS initial values and the browser stylesheet defaults that are reliable.

(Occasionally you may want to duplicate rules a little because you've got two parts of the page that you want to style similarly by coincidence, and you want to split those styles into different sections of the stylesheet so you can manage the sets of rules in groups.)

Not all browser stylesheet defaults are reliable, which is why people use CSS resets. (Although personally I find most of them much too heavyweight and intrusive. Most modern browsers agree on the important stuff, needing just a few hints here and there to fix particular sore points. The overhead of setting a dozen rules like margin: 0 on every element in the document just seems way over the top.)

A lot of the properties in your example are the initial and/or default-stylesheet values anyway, so you gain nothing by including them. (border-width: 0 is not technically the initial value, but since border-style: none is, you won't notice the difference.) Your rules would be much easier to cope with written minimally:

body { margin: 0; }
#someID { width: 720px; margin: 0 auto; }

what do you think about defining a class like

.foo {background:transparent; border:0; margin:0; padding:0;}

Well, it depends what foo is. If you have many elements on the page that represent the same thing you should certainly mark them up with a class and style them all in the same way.

But if you just want to apply some styles to a load of unrelated elements, you should target them separately (using , in the selector). Don't pollute the content markup with style concerns by adding bogus classes like class="red_thing big_border".

However as it stands, with those rules which are the same as the defaults for most elements including the <div>, .foo would be useless anyway.

How can I set multiple CSS styles in JavaScript?

If you have the CSS values as string and there is no other CSS already set for the element (or you don't care about overwriting), make use of the cssText property:

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

You can also use template literals for an easier, more readable multiline CSS-like syntax:

document.getElementById("myElement").style.cssText = `
  display: block; 
  position: absolute;
`;

This is good in a sense as it avoids repainting the element every time you change a property (you change them all "at once" somehow).

On the other side, you would have to build the string first.

Is There a Shortcut for Setting !Important on Every Property in a CSS File