CSS Element Selector: Syntax, Example & Best Practices

Element Selector

The element selector in CSS is one of the most fundamental and commonly used selectors. It allows you to apply styles to all HTML elements of a specific tag type (like p, h1, div, etc.) across your webpage.

Key Point

Targets all instances of a specific HTML tag.

Useful for applying consistent styling across multiple elements.

Ideal for global styles such as fonts, colors, margins, or alignment.

Helps maintain design uniformity and reduce repetitive code.

Syntax:

elementname {
  property: value;
  /* Additional properties and values */
}

elementname: Any HTML tag like p, div, h1, a, etc.

property: The CSS property you want to apply (like color, text-align).

value: The value assigned to that property.

Example:

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      text-align: center;
      color: blueviolet;
    }
  </style>
</head>

<body>
  <p>This property will be applied on every paragraph.</p>
  <p id="para1">Welcome to!</p>
  <p>Quipoin!</p>
</body>

</html>

Output:

Tips

Use element selectors to apply broad styles site-wide (e.g., all paragraphs or headings).
Combine with class or ID selectors when you need more specific styling.
Avoid over-styling all elements with global selectors like * unless necessary.