freeCodeCamp Challenge Guide: Add Borders Around your Elements

freeCodeCamp Challenge Guide: Add Borders Around your Elements
0

#1

CSS borders have attributes like style, color and width.

For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:

<style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>

#2

Can any one help me? Where do I go from here?

.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;

}

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#3

Hey Mikegontarek,

I think the extra space between the “border-style:solid;” and " }" (the last curly brace) underneath might be what’s stopping the border from appearing. I had the same issue with this example and it took hours to figure it out. I hope that helps.

Good Luck!


Nothing happens
#4

I need help please. Will anyone help


#6

What is wrong here?

.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;

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

CatPhotoApp

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


#7

Eliminate the middle quotes in the img class to
A cute orange cat lying on its back.


#9

Pls someone help me , as I dont know where to place the following code:

border-width:10px;
border-color:green;
border-style:solid;


#10

I pasted my comment here: https://pastebin.com/NX5R4AXC


#11

thank you sooo much man


#12

hii…please help me in coding


#13

All you have to do is reset the code and re-enter it
I was struggling with it for like 20 minutes until i just decided to redo it


#14

Thank you so very much @kilgora :slight_smile:


#15

remember from here on out everything that changes the way a class looks will go under the style. that’s the code just change the parenthesis.

(style)
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

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


#16

Whatever test is checking this challenge is seemingly buggy. After spending entirely too much time entering and re-entering the css, applying it to the image, resetting the code, etc the only way I could get it to work was to enter a “style” element in my img tag in addition to the css class styling above. I am positive that the css I was entering was correct as I tested it on my own webserver to verify.

Here’s what I did:
…
.thick-green-border{
border-color: green;
border-width: 10px;
border-style: solid;
}

</style>

<h2 class="red-text">CatPhotoApp</h2>

<img style="border-color: green; border-width:10px; border-style:solid;" class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

…


#17

Just read that there was a brief slow-down and outage earlier when I was attempting this challenge. It is possible that is what caused my code not to fire when I posted this message, just wanted to make sure I presented “all the information” in case it’s not a buggy test :stuck_out_tongue:


#18

Here is the correct code. Enjoy

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

.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;
}

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#19

Here is the correct snippet my friend.

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

.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;
}

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.


#21

if you notice the code
.thick-green-border is a highlight
because .smaller-image{ width: 100px; is missing this clossing bracket this one " } "
thats why cant appear the borders property…
hope it will help…


#22

thanks! this worked … just replying to let everyone know!


#23

The correct way to do it is:

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: soild;

A cute orange cat lying on its back.

include THICK-GREEN-BORDER next to smaller image as a class. Hope it helps (: