Class in CSS.

By

 Use a CSS Class to Style an Element:

  • Classes are reusable styles that can be added to HTML elements.
  • Here is an example of CSS class declaration:

<style>
  .blue-text {
    color: blue;
  }
</style>

  • The CSS class must also be declared inside the style element.
  • The name of the CSS class always starts with the period.
  • The CSS class also allows us to use the same class for multiple HTML elements.

<style>
   
    .blue-text {
    color:blue
    }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>poster</title>
</head>
<body>
<h2 class="blue-test">CatPhotoApp</h2>
<main>
    <p class="blue-text">Click here to view more <a href="#">cat photos</a>.</p>

    <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

    <div>
        <p class="blue-text">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>
    <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>
    </div>
</main>



</body>

The output for this code is:

  • Note the usage of the same .blue-text class for the text colour in the h2,and the two p elements.
  • note that the class in the CSS always start with the period(.).

No comments:

Post a Comment