Learn Accessibility by Building a Quiz - Step 8

HTML-CSS
1

Tell us what’s happening:
I"m not sure what I’m doing wrong. I keep getting for hint: You should use the #logo selector to target the img element.

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
   <title>Accessibility Quiz</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <header>
     <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
     <h1>HTML/CSS Quiz</h1>
     <nav></nav>
   </header>
   <main></main>
 </body>
</html>


/* file: styles.css */
body {
	background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}

#logo img{ width:max (100px,18vw);}


   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 8

Link to the challenge:

2

The way selectors work in CSS is very very very specific.

Every word means something.

For eg. the body selector you have above the new code you wrote starts out like this:

body {

This tells the browser something very specific. It says “hey! I want you to find every element called “body” and do something cool! Okay!”

Now the line you wrote, here is what it is saying:
“Hey! I want you to find every element that is having a id called “logo” and then find all its children who are of type img, got it! Then <do something>”

So the question is, are we trying to get the browser to select only the img elements whose parent is a #logo? Or are we trying to select all #logo elements only?

1 Like
3

Because the logo id is already selected by doing #logo the use of img is not necessary and is causing you to fail the challenge.

If you were to use the img selector it would adjust the size of any image in your HTML to width: max(100px, 18vw). Because we don’t want to do that and we only want the logo to be adjusted that way we use the id selector. The id in HTML is unique and the same id cannot be used twice in the same HTML document so it’s impossible to alter something you don’t want to alter by selecting the id.

4

In CSS the pound sign # is used to selectid attributes whereas the period or full stop . is used to select class attributes. The same class can be assigned to multiple elements whereas the id is unique and can only be assigned to one element. An example would be I can assign the class of class=“text” To my body and my p elements whereas if I want an id of id=“text” that specific id cannot be assigned to multiple elements but I can change the value and assign it to another element.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.