CSS selectors let you choose which HTML elements to style. In this lesson, we focus on element selectors. These selectors help you apply styles directly to tags such as <h1>, <p>, or <div>. Element selectors are easy to use and make your code clear. They target all instances of a specific HTML element in your document.

Syntax

Follow below syntax to add an element selector in CSS.

element {
  property: value;
}

Explanation:

• element: The name of the HTML element you want to style (e.g., p, h1).
• property: The aspect of the element you want to change (e.g., color, font-size).
• value: The new setting for that property (e.g., blue, 18px).

Example 1: Styling Paragraphs

In this example, we will style all <p> tags in an HTML document. The example shows how to change the text color and font size for paragraphs.

Explanation:

• CSS Rule for <p> Elements:
  • Selector: The p selects all paragraph elements in the document.
  • Properties:
    • Color: Text is set to blue.
    • Font Size: Text size is set to 18 pixels.
• Outcome: All paragraphs in the document share the same style.

Example 2: Styling Headings

In this example, we will style all <h1> tags in an HTML document. The example demonstrates how to change the heading color and add a bottom margin for better spacing.

Explanation:

• CSS Rule for <h1> Elements:
  • Selector: The h1 selects all heading level one elements in the document.
  • Properties:
    • Color: Heading text is set to crimson.
    • Margin Bottom: A 20-pixel space is added below each <h1> for improved layout.
• Outcome: All <h1> tags in the document are styled consistently.

This lesson on element selectors shows two ways to apply styles to specific elements. The examples help you understand how to target different HTML elements with ease and clarity.