Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Type Selectors in CSS
Type selectors in CSS target HTML elements directly by their tag names. They are the most basic form of CSS selectors and apply styles to all instances of a specific HTML element throughout the document.
Syntax
element {
property: value;
}
Where element is any valid HTML tag name like h1, p, div, span, etc.
Example: Styling Headings
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #FF0000;
font-size: 2.5em;
}
h2 {
color: #0066CC;
font-size: 2em;
}
h3 {
color: #009900;
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Minor Heading</h3>
</body>
</html>
Example: Styling Paragraphs and Lists
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #333333;
font-family: Arial, sans-serif;
line-height: 1.6;
}
ul {
color: #666666;
margin-left: 20px;
}
li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>This paragraph has custom styling applied.</p>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</body>
</html>
Multiple Element Styling
You can apply the same styles to multiple elements by separating selectors with commas:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, h3 {
font-family: Georgia, serif;
font-weight: bold;
}
p, li {
color: #444444;
font-size: 16px;
}
</style>
</head>
<body>
<h1>All headings share font family</h1>
<h2>This heading too</h2>
<p>Paragraphs and list items share styles.</p>
<ul>
<li>This list item has the same color and font size</li>
</ul>
</body>
</html>
Key Points
- Type selectors have low specificity compared to class and ID selectors
- They apply to ALL instances of the specified element
- Useful for setting base styles across your entire website
- Can be combined with other selectors for more specific targeting
Conclusion
Type selectors are fundamental CSS selectors that target HTML elements by tag name. They're perfect for applying consistent base styles across your website and form the foundation of CSS styling.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements