CSS Style Sheet - Colors/Images Overwriting


This is my first post. I recently picked up the curriculum and am beginning a simple side project to practice what I’ve learned. I’ve noticed that whenever I resized the image on an external style sheet, my H1 color turns black. Whenever I turn the Body’s background-color from black to white, the H1 color remains green. If I completely remove the image, both colors remain intact. What am I missing in regards to specificity rules? I know that I can use !important, or directly style in-line in order to fix this, but I want to do everything from an external style sheet for learning purposes.

Here is my code:


Goat World
<h1>Welcome to Goat World</h1>

<img class="goatpicture" src="GoatWorld.jpg" alt="A Goat">


h1 { color: green; } .goatpicture { width: 300px; } body { background-color: black; }

Thank you all! I look forward to continuing to ask questions and contribute answers when I have the necessary knowledge.

Hi @CAL90, welcome to FCC.

I tried to replicate the error you were receiving when you were resizing your photo, but I couldn’t get the same results. The only thing that comes to mind is that maybe you started typing the code to resize the image on the same like as the h1 style and maybe you missed a ; or } ? I used to find myself doing that a lot and if you mistype in a code editor it’s not as forgiving as an online editor like CodePen and it will just ignore that line (and if the line is ignored it will go back to it’s default styling).

Regarding your questions about the hierarchy of rules, I think this link and picture will help you tremendously.

When reviewing the picture keep in mind that a higher specificity takes preference.

For example if your HTML code was <h1 id="first_title" style="color: blue;">Welcome to Goat World</h1> and your CSS was #first_title {color: red;}, your title would show in blue because in-line styles are more specific, thus take preference over external sheets.

Another example, both in an external sheet (using the same HTML as above).

h1 {color: black;}
#first_title {color: pink;}

Your h1 would be pink because id’s are more specific than elements.

1 Like