The CSS element Selector
➔ The element selector selects HTML elements based on element names.
Example (name)
<style>
p {
text-align:justify;
font-style: italic;
color: darkblue;
}
</style>
Copy the code and click on the "Try it Now" button to see how it works.
Example (name)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>CSS Selectors Example</title>
<style>
div {
text-align: justify;
font-style: italic;
color: darkblue;
background-color: lightgray;
}
</style>
</head>
<body>
<div>
<h2>CSS Selectors Example</h2>
<p>Selectors are used to select one or more HTML elements that we want to style.
There are five categories of selectors that are used to select elements.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
The CSS id Selector
➔ The id selector uses the hash (#) character followed by the id name of an HTML element to select a specific element.
➔ The id name should not start with a number.
Click on the "Try it Now" button to see how it works.
Example (id)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>CSS Selectors Example</title>
<style>
#div1 {
text-align: justify;
font-style: italic;
color: darkblue;
background-color: #defafa;
}
</style>
</head>
<body>
<div id="div1">
<h2>CSS Selectors Example</h2>
<p>Selectors are used to select one or more HTML elements that we want to style.
There are five categories of selectors that are used to select elements.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
The CSS class Selector
➔ The class selector uses the dot (.) character followed by the class name of an HTML element to select a specific element.
➔ The class name should not start with a number.
Click on the "Try it Now" button to see how it works.
Example (class)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>CSS Selectors Example</title>
<style>
.div1 {
text-align: justify;
font-style: italic;
color: darkred;
background-color: #dafeca;
}
</style>
</head>
<body>
<div class="div1">
<h2>CSS Selectors Example</h2>
<p>Selectors are used to select one or more HTML elements that we want to style.
There are five categories of selectors that are used to select elements.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.