Table of contents
No headings in the article.
CSS is stands for cascade style sheet. all the designing part of web page has been done via CSS by targeting HTML element . and one of the major and important factor while learning CSS is CSS Selector . CSS Selector is nothing but selecting any element or attribute of HTML. Before starting CSS selector I want you to tell that their are three ways of writing CSS.
1. Internal CSS: In internal CSS we have to write all of the CSS code at the head section of HTML page inside style tag. after selecting particular element or attribute.
<!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">
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
p{
height: 250px;
width: 250px;
border: 2px solid black;
border-radius: 16px;
background-color: #808080;
}
</style>
</head>
2. Inline CSS: In inline CSS we have write all the CSS code/style inside the HTML element/tag.
<p style="background-color:red">Paragraph</p>
3. External CSS: In External CSS we have write all the CSS code/style inside the external file and then link it to the main HTML page.
<link href="style.css" rel="stylesheet" />
Now, let's talk about Selectors
Different types of selector are as follows.
1. Universal selector
Using universal selector whatever style properties we change it will be applicable to whole web page. or else we can say that whole web page get selected using Universal selector
Syntax:
*{style properties}
Example:
/* Universal selector */
* {
background-color: red;
color: #fff;
padding: 10px;
}
2. Individual selector
Individual selector is nothing but selecting individual or particular HTML element and apply style properties to it. for ex. p , h1, div, section ,etc.
Syntax:
element { style properties }
Example:
h1{
background-color: black;
}
3. Class and Id selector
Class and Id selector is nothing but selecting class and id and apply style properties to it. class is denoted by (.Class_name) and id is denoted by (#Id_name).
Syntax:
/* class selector */
.Class_name { style properties }
/* Id selector */
#Id_name{style properties}
Example:
/* class selector */
.container{
background-color: #fff;
}
/* Id selector */
#id{
background-color: #fff;
}
4. And selector (chained) And selector is most important selector because their might be a possibility of having multiple class or element having same name but you want you want target particular one at that time this selector is gone be used.
Syntax:
element1 element2 element3{style properties}
Example:
li .bg-black .text-white{
background-color:#fff;
color:red;
}
5. Combine selector
Combine selector is also one of the important selector which reduces the developer's work, what it does that if you want to apply same style properties to two or more element/class by writing that style properties only one time , it provide that.
Syntax:
element1, elemet2{style properties}
Example:
span, li{
background-color:#fff;
color:red;
6. Inside an element
Inside an element is very similar to the And selector , in this we can target child or grand-child element of parent element which are separated by space between them.
Syntax:
element1 element2 element3{ style properties}
Example:
div ul li{
background-color: blue;
}
Direct Child
In a direct child, element names are separated by “>” which defines its hierarchy. we can target child element of patent element.
Syntax:
element1>element2{
style properties
}
Element:
div > li{
background-color: black;
}
Sibling + or Adjacent sibling Combinator
The Siblings selector selects sibling elements that appear after the specified "element". But both of the specified elements must share the same parent.
Syntax:
Element1 + element2 { style properties }
Example:
.sibling + p{
background-color:#fff;
}
Sibling ~ or General Sibling Combinator
It is same as adjacent sibling selector but the difference is '+' is replaced by '~' .
Syntax:
Element1 ~ element2 { style properties }
Example:
.sibling ~ p{
background-color:#fff;
}
Now let's talk about pseudo element.
::before
Before is use to add content before element.
Syntax:
Element1: element2: …::before{ style properties }
Example:
/* Pseudo classes - Before */
div::before{
content: "words ";
}
::after
Just like it is also use to add content but after the element.
Syntax:
Element1: element2: …::after{ style properties }
Example:
/* Pseudo classes - After */
p::after{
background-color: ;red
content: "test";
}
:hover
Hover is use to change the style of particular element when user hover that element.
Syntax:
Element:hover{style properties}
Example:
/* Pseudo classes - Hover */
h1:hover{
background-color: pink;
}
that's all for this Thank You !