What You’ll Learn

The CSS element selector (also called the type selector) matches HTML elements by tag name. It is the most fundamental way to apply styles — write p to style every paragraph, or h1 for all top-level headings.

Introduction

The CSS element selector targets HTML elements based on their tag name. When you write h1 { color: blue; }, every <h1> on the page receives that style. No class or id is required.

This selector is also known as the type selector because it selects by element type. It is usually the first selector beginners learn and forms the foundation for more specific rules using classes, ids, and combinators.

Definition and Usage

Use element selectors to set base styles that apply consistently across your site: default paragraph spacing, heading sizes, link colors, and list indentation. Because they affect all matching tags, they are ideal for global typography and reset styles in your stylesheet.

📝 Syntax

The syntax for the element (type) selector is:

element {
  /* CSS properties */
}

Replace element with any HTML tag name:

h1 { color: #2563eb; }
p  { color: #64748b; }
div { padding: 1rem; }
a  { color: #2563eb; }

Specificity Comparison

Syntax Rules

• Use the exact HTML tag name: p, not P (HTML tags are case-insensitive, but use lowercase in CSS).
• One rule affects every matching element on the page unless overridden.
• Chain with classes: p.lead is more specific than bare p.
• Group selectors with commas: h1, h2, h3 { } shares styles across tags.
• Element selectors are the lowest-specificity type selector — classes and ids win conflicts.

Related Topics

• .class — target elements by class attribute
• #id — target a unique element by id
• element element — descendant combinator
• color — often set on element selectors
• font-family — base typography on body

When to Use Element Selectors

Element selectors are ideal for consistent, page-wide defaults:

• Typography baselines — Set font, color, and line-height on body, p, and headings.
• Link styling — Default a color and underline across the site.
• List formatting — Indent and space ul, ol, and li elements.
• Form defaults — Base padding and border on input and textarea.
• CSS resets — Normalize margins on h1–h6, p, and body.

Examples Gallery

Practice element selectors with headings and paragraphs, typography scales, list styling, and element.class combinations.

h1 {
  color: #2563eb;
  font-size: 2rem;
  text-align: center;
}

p {
  color: #64748b;
  line-height: 1.6;
}

div {
  background: #f1f5f9;
  padding: 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.4rem;
}

body {
  font-family: system-ui, sans-serif;
  color: #334155;
  line-height: 1.6;
}

h1 { font-size: 2rem; color: #1e293b; }
h2 { font-size: 1.5rem; color: #1e293b; }
h3 { font-size: 1.25rem; color: #334155; }

a {
  color: #2563eb;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}

ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.35rem;
  color: #475569;
  line-height: 1.55;
}

p {
  color: #64748b;
  font-size: 1rem;
  line-height: 1.6;
}

p.lead {
  font-size: 1.125rem;
  color: #1e293b;
  font-weight: 500;
}

💬 Usage Tips

• Start with defaults — Use element selectors for site-wide base styles before adding classes.
• Group related tags — h1, h2, h3 { font-family: serif; } shares one rule.
• Combine with classes — button.primary targets only primary buttons.
• Understand specificity — A class rule always beats a bare element rule.
• Reset margins — Browsers add default margins to h1, p, ul; reset them explicitly.
• Use semantic tags — Style article, nav, and section for meaningful layout defaults.

⚠️ Common Pitfalls

• Unintended global styling — div { padding: 2rem; } affects every div on the page.
• Specificity surprises — A class on one element overrides your element rule; know the cascade.
• Overusing element selectors — For component-specific styles, prefer classes over tag names.
• Styling too broadly — a { color: red; } turns every link red, including nav and footer.
• Forgetting inheritance — Styles on body flow to children; some properties do not inherit.
• Tag name typos — paragaraph is not a valid selector; match real HTML tag names.

♿ Accessibility

• Use semantic HTML — Style real heading levels (h1–h6) instead of resizing div tags.
• Maintain contrast — Element-level text colors should meet WCAG contrast guidelines.
• Do not remove focus styles — When styling a or button, keep visible :focus outlines.
• Heading hierarchy — Style h1 larger than h2 to reflect document structure for screen readers.
• List semantics — Use ul/ol/li for lists; do not fake lists with styled div elements.

💡 Best Practices