CSS Class is not applying to element (border width,color,and style attributes)

879 views Asked by At

Hello working on a course over at freecodecamp.com and I am supposed to add border width color and style to an image via a class.

I am not having luck getting it to take though. I cannot see what I am doing wrong.

.thick-green-border {
  border-width: 10px border-color: green border-style: solid;
}
.red-text {
  color: red;
}
h2 {
  font-family: Lobster, Monospace;
}
p {
  font-size: 16px;
  font-family: Monospace;
}
.smaller-image {
  width: 100px;
}
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>


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

<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens' />

3

There are 3 answers

0
Lance On BEST ANSWER

You are missing a couple semi-colons:

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

Should be:

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

Modified Code:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
  .thick-green-border{
    border-width:10px; border-color:green; border-style:solid;}
  .red-text {
    color: red;}

  h2 {
    font-family: Lobster, Monospace;}

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

  .smaller-image {
    width: 100px;}
</style>

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

<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>
0
Shrinivas Pai On

Add this

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

Fiddle

1
Pugazh On

You would need to separate each property in border-width:10px border-color:green border-style:solid; with a semicolon like border-width:10px; border-color:green; border-style:solid;

  .thick-green-border {
    border: 10px;
    border-color: green;
    border-style: solid;
  }
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster, Monospace;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
  .smaller-image {
    width: 100px;
  }
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<h2 class='red-text'>CatPhotoApp</h2>

<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens' />