How To Select HTML Elements to Style with CSS

The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.

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.