css

Selecting By Class

index.html:

<html>
  <head>
    <title>CSS Overview</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my HTML page.</p>

    <div class="non_unique_div_class">Div1</div>

    <div class="non_unique_div_class">Div2</div>

    <div class="non_unique_div_class">Div3</div>

  </body>
</html>


Notice the above HTML. The class is shared between three elements. If we want to apply a style to all three of those, we can use the class. We use the dot (.) to select a class, instead of the hash (#) which we would use to select an ID.


style.css:

.non_unique_div_class {
  background: blue;
  color: white;
}