Add Borders around image

Add Borders around image
0.0 0

#1

Tell us what’s happening:
Just wondering why i had to put the code at the top of the style and not at the bottom? I didn’t change anything but take it from the bottom to the top and it worked?

Your code so far

<link href="https://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-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/604.5.6 (KHTML, like Gecko) Version/11.0.3 Safari/604.5.6.

Link to the challenge:


#2

explain your question again?


#3

It doesn’t matter where you put your ids and classes in the CSS file (or between the style tags). As long as they’re there.


#4

I completed it already. but i was putting it at the bottom of the styles tag and it wouldn’t take it i just wanted to future understand why. But i see from the answers that it doesn’t matter. Thanks


#5

CSS stands for Cascading style sheets, which at the end of the day means what is at the bottom can override what’s at the top. Therefore placement of styles are important.

Here’s a simple example:

  img { /* This will add a border and border radius to all images */
    border: 3px solid dodgerblue;
    border-radius: 6px;
  }
  
   .thick-green-border { /* This will add a border to any/all elements with this class */
    border-width: 200px;
     border-style: dotted;
  }
  .thick-green-border { /* This will override the previous style set for this class above */
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
  
  .thick-green-border { /* This will override the previous style set for this class above */
    border-width: 3px;
  }

If you comment out rules above and and below you’ll see how the placement order affects them being applied.