Add Borders Around Your Elements

Add Borders Around Your Elements

Add Borders Around Your Elements

CSS borders have properties like stylecolorand 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>


Create a class called thick-green-border. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.

Remember that you can apply multiple classes to an element using its classattribute, by separating each class name with a space. For example:

<img class="class1 class2">

<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;

  }

</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" 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="/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>

Leave a Reply

Your email address will not be published. Required fields are marked *