How to use CSS Selectors for styling elements?

CSSWeb DevelopmentFront End Technology

Using CSS selectors, we can specifically style desired elements based on our preference. There are various methods for selecting elements in the HTML DOM.

Syntax

The syntax for CSS selectors is as follows −

Selector {
   /*declarations*/
}

The following examples illustrate CSS selector for styling elements −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#one {
   filter: invert(85%);
}
</style>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
<img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg">
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div, p {
   margin: 4px;
   float: left;
   height: 200px;
   width: 300px;
   box-shadow: inset 0 2px 4px olive;
   background-image: url("https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg");
}
p {
   background-image: url("https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg");
   background-position: 50% 50%;
   color: black;
}
</style>
</head>
<body>
<h2>Learning Tutorials</h2>
<div></div>
<p>Tutorials</p>
</body>
</html>

Output

This gives the following output −

raja
Published on 06-Jan-2020 15:31:45
Advertisements