Introduction

If you're just starting with web development and want to learn how to apply beautiful styles to your HTML documents, you're in the right place.

In this article, we will explore some types of CSS selectors, with the three main types being: element selectors, class selectors, and ID selectors. Others include attribute selectors and universal selectors.

By the end, you'll be able to style your web pages with confidence and create visually stunning websites!

Understanding CSS Selectors

CSS selectors are the artistic tools that allow you to meticulously choose which elements of your HTML document you want to style. Whether it's the headings, paragraphs, buttons, or images, CSS selectors enable you to apply your design vision with pinpoint precision. Let's dive into each selector type to understand how they work and when to use them.

Element Selectors

Element selectors are the simplest type of CSS selectors. They target specific HTML tags and apply CSS rules to all elements of that tag type. For example, using the element selector h1, we can change the text color of all h1 headings to blue:

h1 {
  color: blue;
}

Class Selectors:

Class selectors allow you to group multiple HTML elements and style them as a unit. To create a class, add the class attribute to the HTML elements with a unique name. Then, use the class selector to apply CSS styles to all elements with that class.

To apply CSS rules to a class, use the . symbol followed by the class name.

For instance:

<p class="red-text">This text will be red.</p>

.red-text {
  color: red;
}

You can apply the same class to multiple elements to give them the same style.

ID Selectors

ID selectors target a unique element in your HTML document. Each ID should only be used once per page.

Just like the class selectors, to apply CSS rules to an ID, use the # symbol followed by the ID name.

For example

<h2 id="main">This heading has a unique style.</h2>

#main {
  color: green;
}

Attribute Selectors

Attribute selectors are used to select elements based on their attribute values. This allows you to target specific elements with particular attributes. For example, selecting all paragraphs with a draggable attribute set to true:

<p draggable="true">This paragraph can be dragged.</p>

p[draggable="true"] {
  color: blue;
}

The Universal Selector

The universal selector * selects all elements in the HTML document. This is useful when you want to apply a style to every element on the page. For example:

* {
  text-align: center;
}

Conclusion

You've learned about the different types of CSS selectors and how to use them to apply styles to your web pages. By mastering these selectors, you now have the power to create visually appealing websites with CSS. Keep practicing and exploring CSS rules to enhance your web development skills further.