How to Style Multiple Elements with CSS
Jan 5, 2015 06:52
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:
Leave a comment