In this article, I am going to write about CSS and the types of selectors and pseudo that are majorly used in CSS with brief explanations and examples.

What is CSS?

CSS is the acronym for Cascading Style sheets
CSS is a computer language for laying out and structuring web pages like HTML
used to target the properties in HTML
To write a CSS code, we need to use a flower bracket "{}" with a 'style' tag at the 'head' part in HTML #CSS Selectors
Selectors are used to target HTML elements on a webpage that we design

Types of Selectors

Universal selector (*): selects all elements and even inside another element

eg: to change font and background color of whole page, then follow as shown below

<head><style>
    * {background-color: bisque; font-size: medium; color: blue;}</style>
</head>
<body>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt sed, ad ab unde

Here is the output for the above example

2. Individual selector: selection is particularly on one element or tag for eg :p, h1, div, span, etc. In the below example, I have selected only a paragraph so, the color change can be seen only for the selected paragraph.

p {background-color: bisque;font-size: medium;color: blue;}
<h1>Individual selection</h1>
     <p> I am single</p>
            I don't want to be single
     <p>I hate being single</p>

Here is the output for the above example !

Class and Id selector:

The class selector selects HTML elements with a specific class attribute. To use a class selector you must use ( . ) followed by the class name in the CSS

The ID selector selects HTML elements with (#) attribute.

<style>.green{background-color: red;
color:yellow;}   
#red{background-color: black; color: white;}
</style>

Here is the output

Group selector: Group selector selects multiple elements with the same effect which is comma separated.

For eg., if I have to select two classes or IDs with the same background color and font color, then we can use group selectors.
```
<style>
   .green, #red {background-color: red;
color:yellow;}   
</style>
```

Here is the output

Inside an element selector: This selector selects an element that is inside another element.

for eg., to select an element that is under the div and ul element, then this selector is the right one.
```
<style>
  div ul li{
    background-color: yellow; } </style>
```
Here is the output

I hope this article is useful for beginners. Please, do like and comment with your opinions and suggestions that will help me in the future.

Introduction to CSS and Selectors used in CSS

Table of contents

What is CSS?

Types of Selectors