Element Selector in CSS — How to Target HTML Tags Directly and Professionally

After learning CSS basics and comments, it is time to dive into the real heart of CSS: selectors. The first selector you will learn is the simplest and most common: the Element Selector.

This selector lets you target any HTML element directly by its tag name, such as p, h1, or a.

This lesson is for anyone searching for Element Selector in CSS or how to target elements in CSS or CSS selectors for beginners.

What Is an Element Selector in CSS?

The element selector is simply the tag name written as a selector in CSS. The browser applies the style to all elements with that tag on the page.

Simple definition: An element selector is a CSS selector that targets all HTML elements with the same tag name.

How Do You Write an Element Selector?

Write the tag name directly, then open the rule block and add properties:

p {
    color: blue;
    font-size: 18px;
}

What does this code do? It applies blue color and 18px font size to every p element on the page.

Line by line:

• p: selects all paragraph tags.
• color: blue;: changes the text color to blue.
• font-size: 18px;: sets the paragraph font size.

Expected result: any new paragraph you add will appear with the same styling automatically.

Common mistake: writing .p instead of p, which targets a class not a paragraph element.

The code above means: "Make all <p> elements on the page blue and 18px in size".

Practical Examples of Element Selectors

1. Style all paragraphs

p {
    color: #334155;
    line-height: 1.8;
}

What does this code do? It makes paragraph text slightly darker and improves readability with more line spacing.

Line by line:

• color: #334155;: sets the text color.
• line-height: 1.8;: increases line spacing.

Expected result: clearer, easier-to-read paragraphs.

Common mistake: using a very low line-height like 1, which makes text crowded.

Any paragraph on the page will automatically take this style.

2. Style all main headings

h1 {
    color: #2563eb;
    font-size: 36px;
    margin-bottom: 16px;
}

What does this code do? It defines the look of all h1 headings.

Line by line:

• color: heading color.
• font-size: font size.
• margin-bottom: space below the heading.

Expected result: every h1 has the same visual identity.

Common mistake: expecting this code to affect h2 or h3 as well.

Every <h1> will show with the same color and size.

3. Style all links

a {
    color: #0ea5e9;
    text-decoration: none;
}

What does this code do? It changes the color of all links and removes the default underline.

Line by line:

• a: targets all links.
• color: sets the link color.
• text-decoration: none;: removes underline.

Expected result: links look cleaner.

Common mistake: removing underline without adding a :hover state later, which makes links harder to recognize.

This affects all links on the page.

Full Example: HTML + CSS

Here is a clear example that shows the real effect of the element selector:

<h1>Welcome</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<a href="#">Read more</a>

h1 {
    color: #1d4ed8;
}

p {
    color: #475569;
    font-size: 18px;
}

a {
    color: #0ea5e9;
}

What does this code do? It applies three general rules: headings, paragraphs, and links at once.

Line by line:

• Rule h1: styles the main heading.
• Rule p: styles paragraph text.
• Rule a: styles links.

Expected result: every element of the same type gets the style without adding a class.

Common mistake: forgetting that any new element of the same tag will be affected.

Result: all h1 headings are blue, all p paragraphs share the same style, and all a links have a unified color.

When Do We Use the Element Selector in CSS?

It is often used early in design to set the "global style" of a site, such as:

• Styling the base font of all paragraphs.
• Styling headings across the entire project.
• Styling all links in a consistent way.
• Styling elements like body, img, and button globally.

Quick Table of Common Element Selectors

Common Mistakes in Element Selector CSS (Avoid These)

1) Forgetting that the selector targets all:

When you write p { ... } you are targeting every paragraph. If you want only one specific paragraph, use a class or id instead.

2) Writing the selector in the wrong format:

.p {
    color: red;
}

What does this code actually do? It does not target the p tag, it targets any element with class="p".

Expected result: if no element has that class, nothing will change.

Common mistake: confusing p with .p.

The previous syntax targets a class named p, not the p tag itself. A correct element selector does not need a dot or hashtag.

3) Over-generalizing:

For example, adding too many styles to div can cause unexpected results because pages typically contain many div elements.

Frequently Asked Questions — FAQ

Is the Element Selector faster than the Class Selector?

In terms of performance, the difference is negligible for small projects. What matters most is writing organized, clear, and maintainable CSS.

How do I use multiple element selectors together?

Yes, by separating them with commas:

h1, h2, h3 {
    font-family: "Tahoma", sans-serif;
}

What does this code do? It applies the same font to three heading types at once.

Line by line:

• h1, h2, h3: a group of selectors separated by commas.
• font-family: sets the font family.

Expected result: headings look consistent across the site.

Common mistake: forgetting the comma between selectors.

Can I combine the element selector with other CSS selectors?

Yes, for example:

article p {
    color: #334155;
}

What does this code do? It targets paragraphs only inside an article element.

Line by line:

• article p: a compound selector (descendant selector).
• color: changes paragraph color only inside that scope.

Expected result: paragraphs outside article are not affected.

Common mistake: expecting the rule to affect all p elements on the page.

This means: target only p paragraphs inside article.