CSS border on element

HTML-CSS
1

Tell us what’s happening:

HI? could you please help me figure out why my borders shows blue even I code it for green? Thanks

My code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
  color: red;
}

h2 {
  font-family: Lobster, monospace;
}

p {
  font-size: 16px;
  font-family: monospace;
}
.smaller-image {
  width: 100px;
.thin-green-border
  border-color: green;
  border-width: 10px;
  border-style: solid;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

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

Challenge: Add Borders Around Your Elements

Link to the challenge:

2

Change

.smaller-image {
  width: 100px;
.thin-green-border
  border-color: green;
  border-width: 10px;
  border-style: solid;
}

to

.smaller-image{
  width: 100px;
}
.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
}

Looks like you’re just missing a ‘}’, also I think you’re supposed to make a 'thick green border ’ class

3

It should not be in your smaller-image class

4

Also its the <a> tag that’s changing the otherwise black border to blue

1 Like
5

I was stock for an hour and I tried that it didn’t work! :pensive: I also Tried to separate it, it didn’t work either BUT when I tried to make it like this it works! I figured out myself diff. From others because is not working :slightly_smiling_face::smiling_face_with_three_hearts:

Here’s My code:

.smaller-image {
.thin-green-border
width: 100px;
border-color: green;
border-width: 10px;
border-style: solid;
}

6

I think you completely missed what they told you to do above. Look at your html that you posted. You do not have an element with a class of thin-green-border in it. I don’t know why you are trying to use “thin” instead of “thick” for you css.

It may have worked that way only because you put all the correct parameters in .smaller-image and since both classes are for the same element of course it would work. The program may just be ignoring the .thin-green-border which is why it’s not throwing an error. The parameters listed are being applied to .smaller-image. Not the point of that exercise.

This is incorrect

.smaller-image {
.thin-green-border
width: 100px;
border-color: green;
border-width: 10px;
border-style: solid;
}

Because you have a class inside of another class. That’s not what the challenge was having you do.

7

I tried to separate from .smaller-image from it won’t work, and I also change the from thin to thick. Don’t know why it won’t allow me to to separate it. So what I just did is put them in one and it go through … because the problem that I have is that the thick border is blue instead of green