Tribute Project Trouble (Borders and Coloring)

#1

Hello all, I’m having a really hard time with CSS during the first project. I can’t seem to get the border around my image to increase in thickness, I have no idea why. It’s there but it’s tiny and nothing I do seems to change it.

I’m also having trouble adding color to the body of my work and also keeping the page body white at the same time so it looks similar to the tribute page you are given as an example. Can anyone help me with this? I’ve embedded the project here. Thanks in advance!

See the Pen First Project by Chad Shelton (@xxRideTheBullxx) on CodePen.

#2

I think the issue here is specificity, a CSS subject that is confusing. I don’t claim to understand it completely, but…

I think what is happening is that you are giving image a class of img which is a Bootstrap class. Since that has a high specificity, it is difficult to override. But since you want to manually control the borders, I would remove this class entirely.

But now I see that you are editing your pen as I am writing this, so you seem to have figured it out. Putting it under the warren-photo class has a higher specificity. I think it is id > class > element. And it is cumulative. And Bootstrap classes have a high specificity.

It is a confusing subject, but whenever I can’t control something that I know I should be able to, specificity is often the cause.

I would also suggest that you not worry too much about pixel perfect CSS for your first project. CSS is a complex subject and FCC only gives you the bare basics. I would take advantage of the Bootstrap styling and let that be good enough. You can go back later and study for a year and become a CSS wizard.

1 Like
#3

Thanks for the help, that’s all great information to know! I messed around with the code and the border seemed to start working. I did go ahead and remove “img” as a class and renamed it to something else to try and clean up my code (among other things). I’ll definitely keep specificity in mind from now on and look more into it. Thanks!

#4

I agree with @kevinSmith.
Also, <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> in your CSS needs to be in your HTML header to work

#5

Thanks! The little differences in placement are really messing with me, lots to learn!

#6

I also forgot to point out that the </img> tag is not needed - img tags are self closing.

Also I would suggest developing good indenting habits while you’re learning. They make it easier to understand your code. Codepen makes it easy - select all the code and do shft-tab.

1 Like