Home » Learn » CSS

Selectors and Properties in CSS

 · 2 min · Nasir

This module will cover the various types of selectors that can be used to target elements in an HTML document, as well as the different properties that can be used to style those elements.

Learn CSS

In CSS (Cascading Style Sheets), selectors and properties are used to define the styles that will be applied to elements in an HTML document.

Selectors

Selectors are used to target specific elements in an HTML document. There are several types of selectors available in CSS, including element selectors, class selectors, and ID selectors.

Element Selectors

Element selectors target specific HTML elements. For example, the following CSS rule changes the color of all <h1> elements to red:

h1 {
  color: red;
}

Class Selectors

Class selectors allow you to apply styles to multiple elements by assigning a class name to the elements and targeting the class name in the CSS rule. For example:

<style>
  .red-text {
    color: red;
  }
</style>

<h1 class="red-text">Hello World</h1>
<p class="red-text">This is some red text</p>

ID Selectors

ID selectors are similar to class selectors, but they are used to apply styles to a single unique element. An ID selector is defined using the # symbol and is targeted in the CSS rule using the same syntax. For example:

<style>
  #header {
    background-color: blue;
  }
</style>

<div id="header">This is the header</div>

Properties

Properties are used to define the styles that will be applied to the targeted elements. There are hundreds of properties available in CSS, including color, font, and layout properties. Each property has a specific value that defines how the style will be applied. For example, the following CSS rule sets the font size of all <h1> elements to 32 pixels:

h1 {
  font-size: 32px;
}

Summary

By understanding and using selectors and properties effectively, you can style and customize the appearance of your HTML documents using CSS.

We use cookies to improve your experience on our site and to show you relevant advertising.

Read cookie policy

Accept & Close