What is CSS?
** CSS stands for Cascading Style Sheets (CSS)**
CSS is the language, we use to style a web page
CSS describes how HTML elements are to be displayed on the screen, on paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
**What is a CSS Selector? **
A CSS selector selects the HTML elements that you want to style.
CSS selectors are used to find or selecting and style them
***There are many selectors ***
Universal Selectors
Individual Selector
Class Selector
Id Selector
Selector (Chained)
Combined Selector
Inside an element
Direct Child
Universal Selector:-
The Universal Selector means that we are selects all elements with the help of * (asterisk)
Syntax:-
* {
// Here we write our css code
}
Example:-
Individual Selector: -
The individual selector means selecting individually any Tag
Syntax: -
tagName {
// Here we write code
}
Class Selector
Class selectors, select the class attribute of an element. with the help of . (dot). One or more elements can be selected via Class Selector
Syntax:-
clasname {
//write code here
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example of Selector</title>
<!-- CSS code -->
<style>
/* Class and id Example */
/* In selector class will be select by (.) */
.button {
background-color: rgb(86, 74, 74);
}
/* In selector id will be select by (#) */
#success {
background-color: #c65e5e;
}
</style>
</head>
<body>
<p>Welcome to the Selector's example</p>
<h2 class="button">This is example of Class</h2>
<h2 id="success">This is example of Id</h2>
</body>
</html>
Universal Selector , Individual Selector, and selector (chained), combined selector, inside an element direct child, sibling ~ or +
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example of Universal Selector</title>
<style>
/* universal example */
/* means selecting the entire tag and attribute */
* {
background-color: rgb(241, 192, 192);
}
/* Individual selector */
/* means selecting individually any element */
p {
background-color: #c2beed;
}
/* selector (chained) is the combination of two things any performing one paragraph */
li.bg-light.bg-text-blue {
background-color: grey;
color: blue;
}
/* combined selector:- They select elements based on the relationship between them */
span,
li {
background-color: rgb(148, 97, 97);
}
/* inside an element:- go to div and select child and select grandchild and change color according to the code */
div ul li {
background-color: orange;
}
/* direct child :- adding multiple child as you wish */
div>p {
background-color: #2a1515;
}
/* sibling ~ or + :- adding css with subling and it's perform the just next line.. */
.sibling+p {
background-color: rgb(9, 193, 3);
}
</style>
</head>
<body>
<Div> Example of universal, Individual, selector (chained), combined selector, inside an element</Div>
<h1>Welcome to Learn CSS Universal Selector</h1>
<span>Span is just a span, nothing more</span>
<p>How are you</p>
<ul>
<li class="bg-light bg-text-blue">Hope you are doing good?</li>
<li>May I know you name?</li>
<li>Where are you from?</li>
</ul>
<div>
<p>Example of element</p>
<li> Inside element</li>
<ul>
<li>I'm Inside element></a></li>
<li>Again, I'm Inside element</li>
</ul>
</div>
<div>
<p>Example of direct child</p>
<li> Example of direct child</li>
<ul>
<li>I'm direct child</a></li>
<li>Again, direct childt</li>
</ul>
</div>
<section>
<p class="sibling">Test 1</p>
<p>Test 2</p>
<p>Test 3</p>
<p>Test 4</p>
<p>Test 5</p>
</section>
</body>
</html>
Pseudo Classes
Hover
:hover selects the element when the user hovers over the target using pointing devices like a mouse.
color: green;
list-style: circle;
cursor: pointer;
background: orange;
}