Introduction to CSS Element Selector
CSS Element Selector, also called as Tag selector, has defined as a selector to selects all the HTML elements by specified names on a web page, and it is a strong one. They are the most important aspects of CSS as they help in identifying HTML elements where the style has to be applied directly, also known to be the most basic selectors of all. This could come in many patterns (tags) like <p> or <h1> where they are made to simple element names to rich patterns.
Syntax and parameters
Element selector
{
CSS Declarations;
}
Here, the element is the tag selector, and after the selector, there comes a CSS declaration where curly brackets are used. Within this, it could be a Property with value is given for the targeted element.
How does the element selector work in CSS?
With just simple CSS, we can get better output meanwhile the goals are achieved faster. Here we shall see the element selector working to accomplish the results. It is highly beneficial to apply styles to many elements with the same functionality without using a class for each element.
For instance, HTML code is
To select all heading level 1, the h1 selector is applied
<h1> The style is applied for the heading </h1>
The respective CSS code can be structured as
The goal of the element selector is to apply CSS to every instance of the h1 element in the HTML document.
h1
{
Colour: yellow;
}
So directly assigning styling to the tag element here is known as element selectors. Here the tag changes its content to a yellow color. Even paragraph tags could be styled using CSS rules. To group, element grouping selectors are used to select all elements with particular style definitions. The key benefit of the group element selector is it is easy to edit these three properties simply. We can show this:
h1, h2, p {
text-align: right;
color: blue;
}
Examples of CSS Element Selector
Let’s try out an example to see how it works in the following section.
Example #1
Using a simple element Selector on the H1 element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo on CSS element selector</title>
<style>
h1 {
color: yellow;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Welcome to my Home Page</h1>
<p>This is my HTML Code with a paragraph content.</p>
</body>
</html>
In the above code with the simple rule of paragraph content, the text color under them is changed to red – therefore, the element selector performs strongly here.
Output:
With changing the font style, the example can be given as :
<html>
<head>
<style type="text/css">
p {
font-size:30px;
font-weight : bold;
font-family :cursive;
}
</style>
</head>
<body>
<center> This text is formatted as original.</center>
<p> Select and Style all p elements with font-weight too </p>
</body>
</html>
When we execute the above code in the browser, we could see the first text in default mode and the next line with <p> element changes is styles according to the font as per CSS Style rule.
Output:
Example #2
Element Selector on h1, p, b tags.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo on CSS element selector</title>
<style>
h1 {
color: green;
}
p {
color:blue;
b
{ font-weight:bolder ;
}
</style>
</head>
<body>
<h1>Welcome to my Home Page</h1>
<p>This is my HTML Code with a paragraph content.</p>
<p> Introduction to <b>element selector </b>- they are global everywhere </p>
</body>
</html>
Output:
Example #3
Element Selector with Class
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS element selectors with class </title>
<style>
p {
font-family: monospace;
}
#pizza {
font-family: "Algeria", "Palatino", serif;
}
.Note {
border-top: 2px solid purple;
border-bottom: 2px solid purple;
padding-top: 5px;
padding-bottom: 5px;
}
.alias {
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<h1 id="pizza">Pizza Ingredients</h1>
<p class="Note">
Tips: Eating more Pizza is weight gain as it is a junk food.
</p>
<p>A Pizza is a italian dish which is presented unsliced . <strong class="alias"> And baked on pizza stone</strong> mozarella is mostly used on pizza </p>
<p class="alias">
U know a small pizza is sometimes called as "pizzetta."
</p>
<p>The two most common ingredients are <strong>provolone</strong> and the <strong>ricotta</strong>A common toppings in the USA prefered chicked ,yam,pepporoni, olives and onions.</p>
</body>
</html>
Output:
Example #4
Element selector using the Grouped selector
Code:
<html>
<head>
<style type="text/css">
h1,h3,p {color: Aqua;}
</style>
</head>
<body>
<h1>Pillars of Data Science Experts</h1>
<h2>Business Domain. Well knowledge on Statistics and Probability</h2>
<h3>The Data Science Lifecycle includes</h3>
Data Science continues to evolve as high-demand job in IT technologies.
<p>Data Mining. Classification, Data Modelling and Data Summarization</p>
</body>
</html>
From the above code, we could see how the grouped selector is styling HTML documents. Now, the output looks like this.
Output:
Example #5
Element selector on <Img> tag
Code:
<html>
<head>
<style type="text/css">
img {border : solid blue;}
</style>
</head>
<body>
<p>This image displays in a web page <br> with a border highlighted with a color.</p>
<img src="diary.jpg" alt="Nature flower">
<input type="text" name="login name">
</body>
</html>
Output:
Example #6
Element Selector on List -Items
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> CSS Element - List elements </title>
<style>
ul {
list-style-type:disc;
margin-left:2em;
color : green;
}
</style>
</head>
<body>
<div>This belong to div elemnet</div>
<p>HTML with CSS elment selector Demos </p>
<p>List of Browsers</p>
<ul>
<li> Google Chrome </li>
<li> Mozilla Firefox </li>
<li> Internet Explorer</li>
<li> Opera</li>
</ul>
</body>
</html>
Above code targets <ul> element and sets their color and style type of the list. So now the output looks like this:
Output:
Example #7
Element-element Selector
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Demo on element element Selector
</title>
<style>
li {
color: aqua;
}
li li {
color: white;
background: purple;
}
</style>
</head>
<body style="text-align: center;">
<h1 style = "color: green;">
EDUCBA
</h1>
<h2>element element Selector</h2>
<ul>
<li>
<div>AWS Courses/div>
<ul>
<li>AWS -Fundamentals</li>
<li>AWS-Machine Learning</li>
</ul>
</li>
<li>
<div>Python Courses</div>
<ul>
<li>Python 3 Programming</li>
<li>Applied data Science with Python</li>
</ul>
</li>
</ul>
</body>
</html>
Output:
Conclusion
To conclude, in this article, we have seen basic element selectors with syntax and examples. The primary benefits of element selector are they are global which means wherever this stylesheet is included these rule impacts the elements. There are also several other selectors to talk about element selectors like id, attribute.
Recommended Articles
This is a guide to CSS Element Selector. Here we discuss how the element selector works in CSS and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
9 Online Courses | 9 Hands-on Projects | 61+ Hours | Verifiable Certificate of Completion
4.5
View Course
Related Courses
