0
0
CSSmarkup~5 mins

Element selectors in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Element selectors help you style all elements of a certain type on your webpage. They make it easy to change the look of headings, paragraphs, or any HTML tag all at once.

You want all paragraphs to have the same font and color.
You want all headings (like <h1> or <h2>) to share the same style.
You want to set a background color for all buttons on your page.
You want to make all links look consistent without adding classes.
You want to quickly change the style of all list items.
Syntax
CSS
element {
  property: value;
}

The element is the HTML tag name you want to style, like p or h1.

All elements of that type on the page will get the styles inside the curly braces.

Examples
This makes all paragraphs have blue text.
CSS
p {
  color: blue;
}
This styles all <h1> headings to be bigger and bold.
CSS
h1 {
  font-size: 2rem;
  font-weight: bold;
}
All buttons get a light gray background and rounded corners.
CSS
button {
  background-color: lightgray;
  border-radius: 0.5rem;
}
Sample Program

This page styles all <p> elements with dark green text and a bigger font. The <h2> heading is styled with dark red color and a clean font. No classes or IDs are needed.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Element Selector Example</title>
  <style>
    p {
      color: darkgreen;
      font-size: 1.2rem;
      font-family: Arial, sans-serif;
    }
    h2 {
      color: darkred;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
  </style>
</head>
<body>
  <h2>Welcome to My Page</h2>
  <p>This paragraph is styled using an element selector.</p>
  <p>All paragraphs look the same without adding classes.</p>
</body>
</html>
OutputSuccess
Important Notes

Element selectors apply styles to every matching tag on the page, so use them when you want consistent styling.

They have lower priority than class or ID selectors, so more specific selectors can override them.

Use element selectors to keep your CSS simple and avoid repeating styles.

Summary

Element selectors target all HTML tags of a certain type.

They help style many elements quickly and consistently.

They are simple and useful for basic styling without extra classes.