CSS Selectors
CSS
A CSS selector selects one or more HTML element(s) to apply styles to.
CSS Selectors
➔ 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.
➔ Basic selectors (selection is based on element name, id, class).
➔ Combinator selectors (selection is based on relationships between elements).
➔ Pseudo-class selectors (selection is based on the element certain state).
➔ Pseudo-element selectors (select a part of an element and style it).
➔ Attribute selectors (selection is based on element attributes or attribute values).
Practice with examples "Try it Now"
You can run the examples to see the output and modify the code for further practice.
Click on the "Try it Now" button to see how it works.
Example
<!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>
p {
text-align: justify;
color: #107080;
}
img{
border:1px solid #d5d5d5;
}
</style>
</head>
<body>
<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>
<img src="resources/images/flowers-sunflower.png">
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Apply CSS by tag name
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Basic Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<style>
section {
background-color:#c2f2d2;
margin:20px 10px;
padding:5px;
}
div {
background-color:#f2c2d2;
margin:20px 10px;
padding:5px;
}
</style>
</head>
<body>
<h3>CSS simple selector Example</h3>
<div class="section1">
<h2>Hibiscus Flower</h2>
<p>Hibiscus is a large species of flowering plant in the mallow family, known for its large,
bright, trumpet-shaped flowers in vibrant colors such as red, pink, yellow, and white,
with popular types including tropical and hardy varieties.</p>
</div>
<section class="section2">
<h2>Tulip Flower</h2>
<p>Tulips are spring flowers that belong to the lily family. Tulips originally come from Central
Asia and typically have two to six thick, bluish-green leaves and large, cup-shaped flowers
with three petals and three sepals.</p>
</section>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.