CSS Struggles, please Help

So I wanted to make my Den Page pretty with some coding, like many people
I have some experience with HTML and checked out Tetra's CSS Guide, and for the most it worked good.

But there are still a few things I need help with ^^'

1. How do I change the text color of links? The described way in the guide seems to not work for me, I wrote "a color" where I'd use "color" for normal text
2. I still have these gray bars on my sidebar below the cards, how can I access them to change their color?
3. every second wolf in my caves, as well as every second row of my pack information in the lead table are still light grey, how do I change their color?
4. How do I change the color of the explaination row right under the cave names, It's blue
5. How do I change the color of the update row of the Caves? They are light blue rn
6. How do I change the color of the green bar below my lead wolf on the pack information table  Solved!
7. Can I change the color of the green Cave building thingy and the slot upgrade thingies? If yes how  Solved!
8. There is a slight border around the den link box and below that. Is there a way to get rid of those?
9. Is there anything else that looks that I might have forgotten or that I should change?

I just hope there is someone hwo knows how to answer these questions and solve these problems, as well as willing to take the time to tell me how, I'd really appreciate any help

MfG, Zombie

Not using new lines or indents here to make the post shorter, but (as you probably know from the guide) they’re not important in CSS anyway :o Using #fff (white) as a placeholder color, and you can swap out background-color for just background for shorter code. (The background property is a catch-all; more details here.) Let me know if you need any clarification!

1. Links are specified with the a tag and use their own selector, ex. a {color: #fff;}
2. The sidebar cards can be selected with  #sidebar .card, and the color is made with the border-bottom property. You can leave the design alone while only changing the color with #sidebar .card {border-color: 8px solid #fff;}
3. All odd-counted (1st, 3rd, 5th…) table rows are selected with .table-striped tbody tr:nth-of-type(2n+1), so: .table-striped tbody tr:nth-of-type(odd) {background-color: #fff;}
   • 2n+1 and odd are effectively the same; see here for more info on CSS selectors, including the nth ones)
4. These next two are just selectors: .table .subheader {background-color: #fff;}
   
5. .table .bottom {background-color: #fff;}

1. You can get rid of the border on any element with border: 0. The way the border is made is a little weird and uses two elements, the actual link #main a.nav-link.active and the tab row .nav-tabs. To get rid of both in one shot, you can combine selectors with a comma like this: #main a.nav-link.active, .nav-tabs {border: 0;}

Also, I thiink you might be missing a closing tag somewhere? I’d have to look at the code directly to see what’s up, but on my computer your den info kinda D:

Anyway, most of your questions have to do with selectors, so you might want to get familiar with your browser’s Inspect element tool! This is easier to explain with a visual; here’s what it looks like in Firefox:

Look for 1) the property you want to change and 2) the selector it’s defined by. Add that to your code with the value you want, and it should overwrite the default. (Some elements are nested and/or just complicated in general; I definitely recommend looking up how HTML/CSS interact in general if something goes amiss. And as noted in Tetra’s guide, you may need to use !important to force it, although I’d recommend using as few of these as possible. Fewer !important overwrites = less for the browser to process = less code to dig through if something goes amiss later.)

Good luck and hope this helps!

Thank you so much!
I'll try to fix those things in a bit and see how it goes 

Also thank you for showing the expect tool visualy, my browseris in german so it would have been hard to find for me otherwise :'D

I'm not sure though why my den information looks that messy for you, it works on both my pc and my phone, as well as for some friends of mine... strange.

No problem :D About element inspection, HTML and CSS are in English by default, so all the code will look exactly the same no matter what the tool is called.

On the den info… weird, but in that case it’s a problem on my end, yeah. Never mind that part, then!

Ok I tried everything you told me and while doing so a few more quesions came up, as well as the gray border staying (turns out it has to be #sidebar .card {border-bottom-color: #fff;} to work in changing the color).

But, thanks to the element expection, I was able to solve all of those questions on my own^^

Again, thank you so much and I feel like I understand it much better now too