CSS Element Selector

« Prev Next »

Element Selector (Type Selector) selects the HTML elements by their tag name to be styled with CSS.

The style is applied to all elements of the specified HTML element in the document.

Syntax

 element {
  property: value;
}
  • element: The HTML tag name you want to style (e.g., p, h1, div).
  • property: The CSS property you want to apply (e.g., color, font-size).
  • value: The value of the property.

css-element-selector

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: darkgreen;
      text-align: center;
    }

    p {
      color: navy;
      font-size: 18px;
    }
  </style>
</head>
<body>

<h1>CSS Element Selector Example</h1>
<p>This paragraph is styled using the element selector.</p>
<p>All paragraphs share the same style.</p>

</body>
</html>
Run ›

Multiple Element Selectors

You can group selectors to apply the same styles to multiple elements.

 

Example

h1, h2, h3 {
  color: purple;
  text-align: center;
}
Run ›

Where to Use the Element Selector?

  • Apply global styling to common elements like:
  • <body>
  • <p>
  • <h1>, <h2>, <h3>
  • <div>
  • <a>
  • <ul>, <li>
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.