CSS Element Selector Explained with Examples
CSS Element Selector selects and styles specific HTML Element.
Element Selector is defined as Element name in stylesheet.
Syntax
CSS Element Selector Explained with Examples
element
{
property:value;
}
CSS Element Selector Explained with Examples
Examples
<!DOCTYPE html>
<html>
<head>
<title> css element selector</title>
<style>
h1{
color:cadetblue;
}
div{
border: 5px inset gold;
color:dodgerblue;
text-align:center;
}
</style>
</head>
<body>
<div>
<h1> css element Selector </h1>
<P> learn programming language css </P>
<p>https://webdesigningtheory.blogspot.com/</p>
</div>
</body>
</html>
CSS Element Selector Explained with Examples
Explain Program
Step 1]
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2]
<html>.... .
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
text tag text appears on the browser tab.
<head>
<title> css element selector</title>
Step 4]
<head>
<style>
h1{
color:cadetblue;
}
div{
border: 5px inset gold;
color:dodgerblue;
text-align:center;
}
</style>
</head>
1) Internal CSS (<style>)
h1{
color:cadetblue;
}
- h1 is an element selector.
- Applies to all <h> tags.
- Change the text color <h1> to cadetblue
2) div Element Selector
div
{
border: 5px inset gold;
color:dodgerblue;
text-align:center;
}
All div Element
1) border:5px inset gold;
Add gold border with inset style
2) color: dodgerblue;
Sets the text color inside the div.
3) text-align:center;
Text center inside the div.
Step 5]
<body>
<div>
<h1> css element Selector </h1>
<P> learn programming language css </P>
<p>https://webdesigningtheory.blogspot.com/</p>
</div>
- <div> is container for grouping content.
- Heading text
- Paragraph tag
- Styled by the h1 CSS rule
Element Selector- <h1>{ } ➡ styles all
- <div> {} ➡ styles all
Step 6] closing the Tag
</body> </html>
CSS Element Selector Explain
closing the Tag
</body>
</html>
Output
Related Post :-
