Hey, legends this is a small effort to give some information about CSS and CSS selectors. After reading this article you got some idea about CSS and the several selectors present in the CSS.
What is CSS?
CSS stands for the cascading style sheet. it gives the style of raw HTML or you can say that the CSS is used to give style and color to our web pages.
it is used to make a responsive website. it converts the off-looking HTML page into a beautiful and responsive website.
i.g: when we talk about a real-life example we can say that the foundation or the base of any house is an HTML and when we decorate the house with some color and paint is CSS.
Syntax: syntax : p { color: value; }
Ways to add CSS to HTML.
There are three ways to add CSS to HTML.
Inline CSS: CSS is added to the elements directly using style attributes.
Internal CSS: CSS is kept inside the head tags in <style> tags.
External CSS: CSS is kept separately inside a CSS stylesheet.
Now we are going to dive deep into CSS selectors. Firstly we have to know something about CSS selectors like what is CSS selectors, how it works, how to use them and several things.
What are CSS selectors?
CSS selector is used to select a particular element from our HTML and adds some styles to it.
Types of CSS Selectors:
There are some basic selectors are available in CSS.
ID selectors
Class Selectors
Individual selectors
Universal Selectors
Combine Selectors
Direct child selectors
siblings selectors
Pseudo Selectors
1 | ID selectors: ID selectors are used to select a specific element with a given id.
Syntax:
#id {
// CSS property.
}
Example:
2 | Class Selectors: it is used to select an element with a given class.
Syntax :
.class{ // CSS property }
Example:
3 | Individual selectors: The individual selector selects every HTML element individually. In another word, we can say that the individual selector is a single-item selector.
like: when we have to select any paragraph or any heading we can directly select it by giving its name.
Syntax:
p { background-color: #353d41; //CSS style properties }
Example:
4 | Universal Selectors: A universal selector is a type of selector that applies any CSS property universally. in another word, If we have to apply some CSS properties to the whole HTML page then we use a Universal selector. We use '*' to apply any CSS property universally.
Syntax:
* { background-color: red; //CSS style properties }
Example:
5 | Combine Selectors: The Combine selector combines 2 elements with the same styling and is separated by ", "(comma). By using a combined selector, we combine two or more individual selectors. When we have to apply the same CSS properties on multiple elements then we will use it.
Syntax:
ele1,ele2,ele3,.......{ //CSS style properties }
Example:
6 | Direct child selectors: Direct child selector is a method of selecting child elements under parent elements. In this HTML elements are separated by " > " which defines its hierarchy. ">" is known as a combinator.
Syntax:
ele1>ele2>ele3.....{ //CSS property }
Examples:
7 | Siblings selectors: The word siblings means the childs from the same parents it means CSS sibling selectors are used to select elements that are children of the same parent element.in this two elements are separated by ' + '. It follows the order of the next immediate sibling.
Syntax:
ele1+ele2+ele3....... { //css properties }
Examples:
8 | Pseudo Selectors:
A pseudo selector is used to define a specific state of an element.
There are a lot of pseudo-element selectors but in most cases, we use(:: before),(:: after),(: hover), and (: focus) pseudo-selectors.
::before -Before pseudo selector is usually used to add content before any element.
Syntax:
ele1:ele2:....... ::before{ //css properties }
::after-After pseudo selector is usually used to add or insert the content at the end of any element.
Syntax:
ele1:ele2:ele3:............. ::after{ //css properties }
:hover-If we want any style after visiting any element then we use the hover property.
Syntax:
element:hover { //css property }
:focus-When the user clicked on the tab, that particular tab is highlighted for filling in the information purpose.
Syntax:
element:focus{ //css property }
Apart from all these elements, there are many pseudo-elements available in CS, but we mostly use these.
I hope you like my small effort... THANK YOU :)