CODEWITHSUNDEEP
cssstylesexternal
Mark
Mark

Reputation: 544

Internal Stylesheet NOT overriding External stylesheet?

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.

Upvotes: 1

Views: 3291

Answers (1)

PaulProgrammer
PaulProgrammer

Reputation: 17690

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;
}

Upvotes: 2

Related Questions