More CSS selectors-multiple css classes: a classy gallery challenge

How can we help?

Coder2021

مئی 13, 2020 07:22

-1

Hi all,

I don't usually like to ask for help but I just can not get past this challenge. The challenge is telling me that I am almost there but I am stuck. Your help will be much appreciated.

Here is the challenge:

Add multiple classes

This webpage has three images in the body, but there are no styles yet.

We've defined a few CSS rules with class selectors at the top. Some of the rules change the size of the image, and others change the border.

Your challenge: is to add two class names to each image so that the sizes and borders vary from each other. Mix and match - try a few out!

Hint What's this?

<img class="...">

Almost there, make sure you add one of the 'image-' classes to each image.

And here is my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: A classy gallery</title>
<style>
body {
font-family: cursive;
}

.image-small {
width: 150px;
}
.image-medium {
width: 200px; }

.image-large{width:250px;}

.black-frame {
border: 8px double rgb(38, 38, 38);
}
.gold-frame {
border: 10px ridge rgb(255, 183, 0);
}
.silver-frame {
border: 10px groove rgb(204, 204, 204);
}

</style>
</head>
<body>

<h1>A classy gallery</h1>

<img class="small-frame gold-frame" src="https://www.kasandbox.org/programming-images/animals/cat.png">

<img class="medium-frame silver-frame" src="https://www.kasandbox.org/programming-images/animals/fox.png">

<img class="large-frame black-frame" src="https://www.kasandbox.org/programming-images/animals/penguins.png">

</body>
</html>

New post

3 comments

FreshBakedPizza

جون 01, 2020 21:05

Edited
1

Comment actions Permalink
Hi Laura,

Your program is not working because part of what you have typed in as the class does not actually exist.

For example, your first image tag: <img class="small-frame gold-frame" src="https://www.kasandbox.org/programming-images/animals/cat.png">

Inside the quotes after class, you have "small-frame gold-frame".

Now, gold-frame works because it was defined earlier inside the styling where it says .gold-frame.

But what is small-frame? It does not exist.

The two options that you have for sizing are image-small and image-medium, defined inside the .image-small and .image-medium brackets, not small-frame, medium-frame, and large-frame, which you are currently trying to use.

In this case, you must simply replace small-frame with image-small inside the quotes, and that image tag will be corrected.

Then do the same for the other two.

I hope this helps!
Evan Lewis

مئی 15, 2020 02:04
0

Comment actions Permalink
It's also worth noting that if you're stuck on another challenge in the future, the best way to get help is through the Help Requests system. For the challenges, you'll need to click the "Spin-off" button to save your code in a new program. You can then use the Help Requests tab beneath the project to ask your question directly to the CS community.

Generally, Help Requests are more likely to be seen and answered than questions about CS challenges that are posted here in the Help Center. Posting a Help Request also allows other users to see and tinker with your code, which helps us to better answer your questions.
Coder2021

مئی 15, 2020 11:59
0

Comment actions Permalink
Thanks again. I eventually figured it out and have just seen your text. Next time I'm going to persist longer before requesting help.

Please sign in to leave a comment.

More CSS selectors-multiple css classes: a classy gallery challenge

Add multiple classes

Hint What's this?

Didn't find what you were looking for?

3 comments

Didn't find what you were looking for?