CSS selectors to apply multiple link styles

So I’m working on the product landing page project and I want to change the styles of some links for my page.

I thought:

body a:link {
  color: yellow; 
}

Should target only the links in the body, but it also targets the links in my header. I think I’m using the wrong selectors or something. If anyone could point out why it behaves this way, I’d be grateful. Thank you! :hugs:

Here’s my codepen so it makes sense: https://codepen.io/Beverlee/pen/dBpwwa

The body is the whole html page, already exists in the background in codepen, you don’t need (and shouldn’t) use it again, you maybe wanted to use the main tag?

1 Like

I see, I didn’t know codepen did that. I changed the body tags to main and I think I broke my page lol. (It’s a good thing I made a copy). I’m going to just chalk it up to codepen quirks and get on with the task I think.

See html basic scheme. <body> is a tag that’s always there regardless of the content. It contains the part of the page that can be seen by the user (not the stylesheet link tags, meta tags, etc. that are in the header). If you change those to main the site can be broken. Your <body> tag can contain <header>, <main>, <footer> tags but <main> is totally not the same as <body> though you can refer to it as the “body” of your page.
In the CSS if you’d like to select the tags inside <main>, you can do .main a

1 Like

Thanks for your reply. I had a quick read as to the difference between main and body and you’re right, it’s different. Is it alright if I leave my body tags as is in the codepen or do you recommend I change it?

1 Like

No, it’s alright how it is now, no change is needed. :slight_smile: