Updated June 9, 2023
Ā
Ā
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 identify HTML elements where the style has to be applied directly, also known as the most basic selectors. 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 context, the property refers to the value assigned to the targeted element.
How does the element selector work in CSS?
With 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. Applying styles to many elements with the same functionality is highly beneficial without using a class for each element.
For instance, HTML code is
To select all heading level 1 elements, we apply the h1 selector.
<h1> The style is applied for the heading </h1>We can structure the respective CSS code as follows:
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. You can apply CSS rules to paragraph tags as well. To group elements with specific style definitions together, you use element grouping selectors. The key benefit of the group element selector is it is easy to edit these three properties. We can show this:
h1, h2, p {
text-align: right;
color: blue;
}Examples of CSSĀ Element Selector
In the following section, letās try out an example to see how it works.
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, the text color of the paragraphs is changed to red using a simple rule. This demonstrates the strong performance of the element selector in this case.
Output:
An example can be given by changing the font style as follows:
<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 can see the first text in default mode, and the next line with <p> element changes is styles according to the font as per the 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 can 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>The above code targets <ul> elements and sets the list’s color and style type. 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
In this article, we have seen basic element selectors with syntax and examples. The main advantage of element selectors is their global impact. This implies that the rule will affect the elements wherever the stylesheet is included. There are also several other selectors to talk about element selectors like id and attribute.
Recommended Articles
We hope that this EDUCBA information on āCSS Element Selectorā was beneficial to you. You can view EDUCBAās recommended articles for more information.
