Introduction

The core functionality of CSS is performed by two features: cascade and specificity. Cascade deals with how CSS properties are read and applied to elements. Specificity directs a browser to find the correct element and apply the styles. The starting point of specificity is a selector, which tells the browser what element to find. When it comes to styling, the larger a web page or website, the greater the need for more specific, or higher specificity, selectors.

Selecting the right element and providing the right visual styles is the basis of writing CSS code. Whenever you need to adjust how an element on a webpage looks, using selectors is key.

This tutorial will build your skill set and help you develop visually rich websites by showing you how to select the right element in a given scenario. You will begin by using the type selector to select HTML elements to style. Then, you will combine selectors to identify and apply styles more precisely. Lastly, you will group several selectors to apply the same styles to different elements.

Prerequisites

  • Familiarity with the concepts of  cascade and specificity as they apply to CSS.
  • An empty HTML file saved on your local machine as index.html that you can access from your text editor and web browser of choice. To get started, check out our  How To Set Up Your HTML Project tutorial, and follow  How To Use and Understand HTML Elements for instructions on how to view your HTML in your browser. If you’re new to HTML, try out the whole  How To Build a Website in HTML series.
  • An empty CSS file called styles.css saved on your local machine in the same directory as index.html.

#css #html

How To Select HTML Elements to Style with CSS
11.15 GEEK