How to Style Multiple Elements with CSS

If we want a style to be applied to multiple elements on the page, we can give each element a class:

<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
  <div class="fruit">Apple</div>
  <div class="fruit">Pear</div>
  <div class="fruit">Orange</div>
</body>
</html>

Above we have three <div> elements that have the class fruit. If we put this style in our CSS file:

.fruit {
    border: 3px solid lightblue;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial;
    margin-top: 20px;
    color: brown;
}

The . helps us select all elements by a class name.

The result is:

Apple pear and orange words in div containers with gray borders

Next: How to Style Elements By Type with CSS

Comments

Leave a comment

What color are green eyes? (spam prevention)
Submit
Code under MIT License unless otherwise indicated.
© 2020, Downranked, LLC.