Grouping Selectors

Exercise

  1. In the "index.html" file, replace the code with the following:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
  <h1>CSS Intro</h1>
  <p>This is my first time using CSS</p>
  <p>CSS makes the website look good</p>
  <p>List of things I'm learning</p>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
  <a href="https://www.google.com">Link to Google</a>
</body>
</html>
  1. Save.
  2. If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
  3. In the "styles.css" file, replace the code with the following:
h1, p {
  color: orange;
}
  1. Save.
  2. In the browser, you should see the following:

    3. Exercise 2 Result

Code Walkthrough and Explanation


h1, p {
  color: orange;
}

Grouping selectors in CSS is a way to apply the same styles to multiple HTML elements at once. Instead of writing the same styles for each element separately, you can group them using a comma-separated list of selectors. The example above applies the style to all <h1> and <p> elements.


Experiment with the Code


Video and Code References


Questions? Subscribe and ask in the video comments:



GitHub and Other References