What is CSS?

CSS stands for Cascading Style Sheets. as the name stands for it's used for style and layout web pages- for example, to alter the font, color, size, spacing of your content or add animation and other decorative features.

CSS Selectors:

CSS selectors define the pattern to select elements to which a set of CSS rules are applied. CSS selectors can be grouped into the following categories based on the type of elements they can choose.

• Universal Selectors:

Universal selector * matches elements of any type. It affects the changes universally in the web page. it is beneficial for clearing the default margin & padding provided by various browsers. -for example:

* {
  margin: 0;
  padding: 0;
}

• Individual Selector (Type Selector):

Type selector is also known as Individual selector. it's select all elements that have the given name. -for example:

div {
  background-color: #6EC72D;
  font-weight: 700;
  margin: 50px 90px;
}

• Class Selector:

Selects all elements that have the given class attribute. to target class, we need to put . before the class name. -In the below example .section is a class.

.section {
  background-color: #DDD101;
  font-size: 20px;
  margin-top: 20px;
  margin-left: 30px;
  margin-bottom: 20px;
  margin-right: 30px;
}

• id Selector:

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. -In the below example div-id-1 is a unique id name:

#div-id-1 {
  background-color: #E21717;
  margin: 20px 30px 20px 30px;
  font-weight: 900;
}

• and Selector (chained):

The CSS selector list , selects all the matching nodes. A selector list is a comma-separated list of selectors. When multiple selectors share the same declarations, they can be grouped together into a comma-separated list. White space may appear before and/or after the comma.

.head1, .head2 {
  color: #3944F7;
  font-weight: 900;
}

• Combined Selector:

The " " (space) combinator selects nodes that are descendants of the first element. section ul li will match all <li> elements that are inside a <ul> element.

section ul {
  color: #6EC72D;
  font-weight: 400;
}

• Direct Child Selector:

The > combinator selects nodes that are direct children of the first element.

div > p {
  background-color: #02B290;
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-bottom: 30px;
        }

• Sibling Selector:

The + combinator matches the second element only if it immediately follows the first element.

.sibbling + li {
  color: #E03B8B;
  font-weight: 400;
}

What are Pseudo-classes?

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements. A pseudo-class consists of a colon : followed by the pseudo-class name. Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree but also in relation to external factors like the history of the navigator

:: before element :

In CSS Pseudo classes, ::before creates a pseudo-element that is the first child of the selected element. -for example:

.dog :: before{
  content: ' ';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #8D3DAF;
}

:: after element :

In CSS Pseudo classes, :: after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

.state :: after {
  content: ' ';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #3DBE29;
}