Internal Stylesheet NOT overriding External stylesheet?

Question

I'm trying to add some custom styles to a few tags but finding it difficult to override the external CSS file. Adding styles inline seems to work fine, but using an internal page stylesheet is not working out. Tags are still using external styles.

For example, this is not working

<link rel="stylesheet" type="text/css" href="styles.css" />

<style type="text/css">

    h1 {
        font-size:36px;
    }

  </style>

I even tried creating a custom style

<style type="text/css">

    h1.heading {
            font-size:36px;
        }

 </style>

And there is no change.

This JSFiddle demonstrates the problem.

Are there any `!important` rules in your external `styles.css` file? — PaulProgrammer, Sep 09 '13 at 17:22
Yes, I found one: .products li p.red { font-size: 1.1em; color: #ff6666 !important; } — Mark, Sep 09 '13 at 17:27
Sorry I don't know how. The external CSS file is over 1750 lines. — Mark, Sep 09 '13 at 20:06
You can link the external CSS in to the jsfiddle as an external resource, if the external CSS is available on the web (or if you can make it available publically. — PaulProgrammer, Sep 09 '13 at 20:27
Here it is Paul, thanks for the help http://jsfiddle.net/monmart/p2M7r/ — Mark, Sep 09 '13 at 21:25

score 2 · Answer 1 · answered Sep 09 '13 at 22:28

I see at least one issue. If you're interested in finding out what happened to this: <h1><a href="#">xx</a></h1>

Here's your problem. In your external CSS:

#header h1 a {
    display: block;
    width: 273px;
    height: 51px;
    background: url(images/cap-logo.png);
    text-indent: -9999px;
}

The use of the ID is the most specific version of h1 with an a inline child to a #header element, so this is what gets used. As you can probably tell, this is moving the header outside the visible area.

There's a couple ways to bring this back on the screen. The easiest way is to change the <h1> to a span with an id:

<span id="big-x"><a href="#">xx</a></span>

And then it's relatively trival to do what you need with this element.

Other options are to change the CSS rule, or be at least that specific in your inline rule. I did that in an updated fiddle: http://jsfiddle.net/p2M7r/1/

#header h1 a {
    font-size:96px;
    text-indent: 0;
}

Thanks Paul, this is great. I was particularly looking at changing the text "Thank You" (it uses H1) and the link styling for "view the blog". As for the H1 going off the page, this is something I didn't think about. — Mark, Sep 09 '13 at 23:06

Internal Stylesheet NOT overriding External stylesheet?

1 Answers1

Linked