CODEWITHSUNDEEP
htmlcss
Karnivaurus
Karnivaurus

Reputation: 24111

h1 properties being overridden

I am taking on somebody's ASP.NET MVC 5 project, and playing around with some of the HTML and CSS code. In Site.css, I have the following code:

h1
{
    color: rgb(255, 0, 0);
    font-size: 100pt;
    font-family: 'Baskerville Old Face', Garamond, serif;
    font-weight: bold;
    font-style: italic;
}

However, when I run the program and inspect the elements, I notice the h1 that I have in my HTML file is not displayed as I have defined above. Instead, the color and font-size properties seem to revert to their default. In the inspector in Firefox, these properties are crossed out as in this screenshot: inspector

What could be the cause of this? I'm assuming that it is something which the previous owner of the project has set up, but unfortunately he is now unavailable. So I'm just looking for ideas as to what may be the root of this behaviour?

Upvotes: 3

Views: 2800

Answers (5)

Pete
Pete

Reputation: 58422

Your css code is in the wrong order - as your style is before the other style (yours is on line 17 and the other styles are on line 70 and 77), the second lot will override the first lot. Put your style after the h1 style on line 77 in the site.css and yours will take precedence.

This is a good article about css precedence and specificity - in your case, see the cascade section (point 4):

If two rules are equal, the one declared last wins. CSS embedded in the html always come after external stylesheets regardless of the order in the html

Upvotes: 2

Omar Sedki
Omar Sedki

Reputation: 608

If you want to override the others CSS add !important in your Code like this

h1
{
    color: rgb(255, 0, 0)!important;
    font-size: 100pt!important;
    font-family: 'Baskerville Old Face', Garamond, serif!important;
    font-weight: bold!important;
    font-style: italic!important;
}

Upvotes: 2

Omar Sedki
Omar Sedki

Reputation: 608

Remove Properties color & font-size from H1 statement from line 70 & 77 ( site.css) yo will find something like

h1,h2,h3,h4{color:#000...

convert to h2,h3,h4{color:#000....

Upvotes: 0

Bernardao
Bernardao

Reputation: 500

you can do 

body h1 {
    color: rgb(255, 0, 0);
    font-size: 100pt;
}

You need to reach a higher herarchy in the css. So adding a parent to the h1 you want to change it will work. Or another way to achieve it is pasting your h1 code after the h1 that is overwriting your h1 code. Paste it after line 77 and will work.

Upvotes: 0

radekpakula
radekpakula

Reputation: 109

this is because css in casscade stylesheet. So you new h1 should be on the end of file.css First style h1 from line 17 will be overridden by the last from line 77

Upvotes: 4

Related Questions