CSS Element Selector
The CSS Element Selector selects HTML elements based on their tag names. It allows developers to apply styles to all elements of a particular type on a webpage.
For example, the element selector p selects all paragraph elements, while the selector h1 selects all first-level heading elements.
1. Syntax of CSS Element Selector
The element selector uses the HTML tag name without angle brackets.
element {
property: value;
}Example:
p {
color: blue;
font-size: 18px;
}In this example:
pis the element selector.coloris the CSS property.blueis the CSS value.font-sizechanges the text size.
2. Example of CSS Element Selector
The following example demonstrates how to use element selectors to style different HTML elements.
HTML:
<h1>Welcome to CodingRider</h1>
<p>Learn HTML and CSS.</p>
<p>Start your web development journey.</p>CSS:
h1 {
color: blue;
text-align: center;
}
p {
color: green;
font-size: 18px;
}In this example, all h1 elements become blue and centered, while all p elements become green with a font size of 18 pixels.
3. Select Multiple HTML Elements
You can apply the same CSS styles to multiple HTML element types by separating their selectors with commas.
Example:
h1, h2, h3 {
color: red;
font-family: Arial, sans-serif;
}This selector applies the same styles to all h1, h2, and h3 elements.
4. Element Selector with Different HTML Elements
You can use element selectors to style almost any HTML element.
body {
background-color: #f4f4f4;
}
h1 {
color: blue;
}
p {
color: #333;
}
button {
background-color: green;
color: white;
}
a {
color: red;
}Here, each selector targets a specific HTML element type.
5. CSS Element Selector vs Class Selector
Element selectors target all elements of a particular type, while class selectors target elements with a specific class name.
| Element Selector | Class Selector |
|---|---|
| Selects HTML tags | Selects HTML classes |
| Uses the tag name | Uses a dot (.) before the class name |
Example: p |
Example: .message |
| Targets all matching elements | Targets elements with the specified class |
6. Advantages of CSS Element Selector
- Easy to understand and use.
- Simple syntax for styling HTML elements.
- Applies styles consistently to all matching elements.
- Reduces the need to write repeated CSS rules.
- Useful for setting default styles across a webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Element Selector</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
color: blue;
text-align: center;
}
h2 {
color: purple;
}
p {
color: green;
font-size: 18px;
}
button {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
a {
color: red;
}
</style>
</head>
<body>
<h1>CSS Element Selector</h1>
<h2>Welcome to CodingRider</h2>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<button>Click Me</button>
<p>
Visit <a href="https://www.example.com">Example Website</a>
</p>
</body>
</html>