CSS Selectors: Targeting Elements by Tag Name
If you’re just starting with web design, CSS can feel like a new language. The good news is that you can do a lot with just one simple idea: selecting elements by their tag name.
In this article, you’ll learn what tag name selectors are, how to use them, and how to combine them to style real web pages. You’ll see short, practical examples and get chances to try things yourself as you go.
What is a tag name selector?
A tag (also called an HTML element) is a basic building block of a web page. Examples include:
<p>for paragraphs<h1>for main headings<h2>for subheadings<a>for links<button>for buttons
A CSS selector is how you tell the browser which elements you want to style.
A tag name selector is the simplest kind of selector. You just write the name of the HTML tag, and CSS will apply the style to all elements of that type.
Example:
p {
color: blue; /* Make all paragraph text blue */
}
This means: “Select all <p> elements and make their text blue.”
Your first setup: HTML + CSS
Before we write more selectors, let’s set up a tiny web page so you can follow along.
Create two files in the same folder:
index.htmlstyles.css
Put this inside index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tag Selector Demo</title>
<!-- Link the CSS file -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>My First Page</h1>
<p>This is my first paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
And put this inside styles.css:
/* This CSS will style all <p> tags */
p {
color: green;
font-size: 18px;
}
Now open index.html in your browser (double-click it). You should see your two paragraphs in green, slightly larger text.
Try it yourself
Change color: green; to another color, like red or purple, save the file, and refresh the browser. Notice how both paragraphs change at the same time. That’s the power of tag name selectors.
Example 1: Styling headings by tag name
Let’s add more headings and see how we can target them.
Update index.html:
<body>
<h1>Welcome to My Page</h1>
<h2>About Me</h2>
<p>I am learning how to style web pages with CSS.</p>
<h2>My Hobbies</h2>
<p>I enjoy reading, coding, and walking outside.</p>
</body>
Now update styles.css to style the headings:
/* Style all <h1> headings */
h1 {
color: darkblue;
text-align: center; /* Center the main heading */
}
/* Style all <h2> headings */
h2 {
color: darkred;
font-size: 22px;
}
/* Style all <p> paragraphs */
p {
color: #333333; /* Dark gray text */
line-height: 1.5; /* More space between lines */
}
What this does:
- Every
<h1>is dark blue and centered. - Every
<h2>is dark red and slightly larger. - Every
<p>is dark gray with extra line spacing.
You didn’t need to add any extra attributes or labels to your HTML. Just using the tag names lets you quickly style all headings and paragraphs.
Try it yourself
Add another section to the HTML:
<h2>Favorite Foods</h2>
<p>Pizza, pasta, and fresh fruit.</p>
Reload the page. Notice how the new <h2> and <p> are automatically styled by your existing CSS, with no changes needed. This is why tag name selectors are so useful.
Example 2: Styling links and buttons
Now let’s style two more common elements: links and buttons.
Add this to your index.html inside <body>:
<h2>Contact Me</h2>
<p>
Visit my
<a href="https://example.com" target="_blank">personal website</a>
or send me a message.
</p>
<button>Click Me</button>
Now update styles.css:
/* Style all <a> links */
a {
color: teal; /* Link text color */
text-decoration: none; /* Remove underline */
}
a:hover {
text-decoration: underline; /* Underline when mouse is over link */
}
/* Style all <button> elements */
button {
background-color: orange;
border: none; /* Remove default border */
padding: 10px 16px; /* Add space inside the button */
color: white;
font-size: 16px;
cursor: pointer; /* Show a pointer cursor on hover */
}
button:hover {
background-color: darkorange; /* Darker on hover */
}
What you’ll see:
- All links (
<a>) are teal, with no underline until you hover. - All buttons (
<button>) are orange with white text and look more like “real” buttons.
Again, this works for every <a> and <button> on the page. If you add more links or buttons, they’ll automatically share the same style.
Try it yourself
Add another <button> to the HTML, such as:
<button>Learn More</button>
Refresh the page. You’ll see the new button styled exactly like the first one, thanks to the shared button tag selector.
Example 3: Combining multiple tag selectors
You can style several tag names in one rule when they share the same look. This keeps your CSS shorter and easier to maintain.
In styles.css, try this:
/* Apply the same font to the whole page */
body {
font-family: Arial, sans-serif;
}
/* Make both <h1> and <h2> use uppercase text */
h1,
h2 {
text-transform: uppercase; /* Turn text into ALL CAPS */
}
The h1, h2 part is called grouping selectors. It means “apply this style to all <h1> and all <h2> elements.”
Try it yourself
Add p to that group so it becomes:
h1,
h2,
p {
text-transform: uppercase;
}
Refresh the page and see what happens. All your text is now in uppercase. If that looks too intense, remove p from the list to keep only the headings in uppercase.
When tag name selectors are enough (and when they aren’t)
Tag name selectors are great when:
- You’re building small pages.
- You want a consistent style for all elements of one type (all paragraphs, all buttons, etc.).
- You’re setting global styles, like fonts and basic colors.
However, sometimes you don’t want every element of a type to look the same. For example:
- One special button that should be bigger.
- One paragraph that should look like a warning.
For that, you’ll later learn about classes (.button-primary) and IDs (#main-title). These give you more precise control.
For now, mastering tag name selectors builds a strong foundation and helps your pages look much better with very little code.
Practical tips for using tag name selectors
- Start simple. When you begin a new project, define basic styles for
body,h1,h2,p,a, andbutton. - Keep it consistent. Decide on a font and color scheme and apply them using these selectors.
- Avoid overdoing it. Don’t try to control every tiny detail with tag selectors. Use them for general, broad styling.
Here’s a quick example of a simple “starter” CSS you could reuse:
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
color: #333;
margin: 20px;
}
h1 {
font-size: 32px;
margin-bottom: 10px;
}
h2 {
font-size: 24px;
margin-top: 20px;
margin-bottom: 8px;
}
p {
line-height: 1.6;
}
You can paste this into a new styles.css file and adjust sizes and colors to your liking.
Quick recap
You’ve just learned how to:
- Use tag name selectors like
p,h1,h2,a, andbuttonin CSS. - Apply styles to all elements of a certain type.
- Group multiple tag selectors (
h1, h2) to share styles. - Create a simple, reusable CSS setup for new pages.
If things still feel new or confusing, that’s completely normal. Every developer started exactly where you are now. The important thing is that you’ve written real CSS and seen it change a web page.
What’s next?
- Practice by creating a small “profile” page and styling it using only tag selectors.
- Then, explore class selectors (like
.highlight) to style only specific elements.
Keep experimenting, saving, and refreshing your browser. With each small change, you’re becoming more comfortable with CSS and closer to building the sites you imagine.
