Classes

Tags
CSS
Summary

Uses classes to give multiple items on a page the same look.

Situation

You want to make several items on a page have the same look.

Action
  • Add the class attribute to tags you want to look the same. Make up a class name.
  • Define the class in a stylesheet.

For example, here are ps with different classes.

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <title>Cattos</title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.         <link rel="stylesheet" href="cattos.css">
  8.     </head>
  9.     <body>
  10.         <h1>Cattos</h1>
  11.         <p class="fact">Most cattos are cuddly.</p>
  12.         <p class="fact">Cattos and doggos usually get along.</p>
  13.         <p class="not-fact">Cattos are evil.</p>
  14.         <p class="fact">Doggos are better, but cattos are OK.</p>
  15.         <p class="fact">Cattos like laser pointers.</p>
  16.         <p class="not-fact">Cattos have flippers.</p>
  17.     </body>
  18. </html>

In cattos.css:

  1. body {
  2.     font-family: sans-serif;
  3.     background-color: antiquewhite;
  4. }
  5.  
  6. .fact {
  7.     color: darkgreen;
  8.     font-style: italic;
  9. }
  10.  
  11. .not-fact {
  12.     color: darkred;
  13.     font-weight: bold;
  14. }
Where referenced
Classes