[Solved] CSS code works if put in style=””, fails if put in external css file

Applying CSS via the style attribute always* trumps styles provided via stylesheets, due to specificity, as @Kirean mentions.

That means that when you move your CSS to an external stylesheet, it has to compete with other defined styles.

You can make your style selector more specific than the other definition, but you have to know what you are competing with.

.fooLink is more specific than a

a.fooLink is more specific than .fooLink

span a.fooLink is more specific still, etc, etc

According to the W3C specification, your .fooLink selector can be trumped by any selector with: more class selectors (.foo .fooLink), the same number of class selectors and more type selectors (.foo a), or any selector with an ID (#foo *), assuming the selector applies to the same element.

Now, the caveat (as implied by the asterisk above) is that you can override this behavior using !important. !important trumps other defined style attributes. If there are multiple !important declarations, they are resolved according to standard specificity rules.

So, the best solution is to make your style as specific as possible, and edit other styles which may be conflicting.

If, however, those other definitions are out of your control (site-wide CSS stylesheets or something like that), use !important:

.fooLink
{
    padding-left: 20%; 
    padding-top: 0px;
    display:block !important;
}