What's happening

Curriculum Help
,
1

Hi guys,I will like you to take a look at this:

image
image1366×768 178 KB

Why is the here grey,I didn’t code the here to turn grey.
Please see:https://codepen.io/adaezebaby/pen/MWeJpOO

2

Hello there,

You did code for it to be grey:

a:hover {
  background-color: grey;
  color: ;
}

HTML

<a  href="https://codepen.io/adaezebaby/pen/dyXWaMr">
  <button>here</button>
</a>

Does that clarify?

Also, somethings about the code:

  • There is no need to include html/head/body tags. CodePen does this automatically. If you need to put anything within the head of your HTML, use the :gear: icon, then add what you need to, to the relevant location:
    image
    image709×543 11 KB
  • Watch out for where you are placing the code, as having symantic elements outside of both the body and html tags does not make sense, and can lead to unexpected results:
</body>
  </html>
  
  <h3> 
View more drawing  <a  href="https://codepen.io/adaezebaby/pen/dyXWaMr"><button>here</button></a>
  • Lastly, using the dropdown for each coding section, you can use the format and analyse tool to get help with your code, and find mistakes.
    image

Hope this helps

3

How do I put it in a way that the grey wouldn’t affect the:
<button>here</button>

4

An issue is, it is an anti-pattern to use both an a element and a button element. You should decide on one.

  • If you are making a link, use the a element.
  • If you are making a button (something interactive, typically only within your page), then use a button element.

As for the CSS, make use of CSS selectors:

  • Give the element an id and select is in CSS with #the-id { color: blue; }
  • Give the element a class (typically, only when there is going to be more than 1 of this element), and select with: .class-name { color: green; }
  • Be specific with where the element is. Try this, do some more research into CSS Selectors, and play around with the code:
<style>
  a {
    color: blue;
  }
  p > a {
    color: green;
  }
</style>
<body>
  <a> Some random link</a>
  <p> Some text with <a>a link I want green</a>, and to have the default styling</p>
</body>

Hope this helps

5

Thanks very much I will surely do some research and get back to you in a moment :upside_down_face: :wink:.