CSS stands for Cascading Style Sheets, a style sheet language used to make websites more appealing and user-friendly. It's like we draw a sketch and we need to fill the sketch with colours, we use crayons to fill up the colours, use some shades to create gradients, and highlight a few parts of the sketch by giving extra effects. Same way to make the websites more colourful and to place all the blocks in a webpage, we use styles.

We have three ways of embedding or calling styles in a webpage.

Inline CSS: Styles are added inside the HTML tags.

Ex: Style tag is added inside the h2 and anchor tags.

Internal CSS: Styles are added inside the HTML page, using style tags.

Ex:

External CSS: Styles are written in another sheet and saved as .css extension. This is called the inside head tag of the HTML page as

Ex:

So, now understood ways of calling CSS. The next part is to understand CSS Selectors.

CSS Selectors

CSS selectors allow the selection of individual elements in HTML. Below are the seven CSS Selectors which allow for this selection to be made.

CSS Element Selector

Selects the HTML elements by their name. Like in the below case, HTML tags anchor and h2 tags are targeted and styled in the CSS file.

Universal Selector

Universal Selector selects the entire HTML tags and elements and styles are applied to all. Universal Selector is styled using "*" symbol.

Class Selector

The Class Selector selects the HTML element with a specific class attribute. It is denoted with a period character(.), followed by the class name. The below example shows the styles that get applied to all HTML elements with class name .links and .heading.

.element

ID Selector

The ID Selector selects the HTML element with a specific ID attribute. It is denoted with a hash character(#), followed by the ID name. ID's should be unique on a webpage.

#element

Group Selector

A group selector is used to select all the elements with the same style definition. Each selector is separated by using a comma. To minimize the code, group selectors are used. The below code shows, the selection of all h2, a, p tags.

Combination Selectors

Descendant Selector

Select elements that are descendants of the first element. The below code shows, the selection of all anchors that are inside a div.

div a

Direct Child Selector

Select elements that are direct children of the first element. The below code shows, the selection of all anchors that are direct children of a div.

div > a

General Sibling Selector

Select elements that are siblings of the first element and come after the first element
The below code shows, the selection of all anchors that are siblings of a div and come after the div.

div ~ a

Adjacent Sibling Selector

Select elements that are siblings of the first element and come directly after the first element. The below code selects all anchors that are siblings of an h2 and come directly after the h2.

h2 + a

Pseudo Element

Before Selector

Creates an empty element directly before the children of the selected part.

element:before

After Selector

Creates an empty element directly after the children of selected element.

element:after

Psuedo Class(state).

Psuedo Class denotes a change in the state of an HTML element. For example like when the user hovers over certain links or clicks on them, add styles when it is focused.

Hover Selector

Select elements that are hovered by the mouse. The below sample shows on hover on the li items, shows a green circle.

element:hover

Focus Selector

Select elements that are focused. The below sample shows on click on Home link, orange background shows and highlights the text or link being focused.

element:focus

Psuedo Class(position ).

First Child Selector

element:first-child

Example: Select elements that are the first child inside a li tag.

Last Child Selector

element:last-child

Example: Select elements that are the last child inside a li tag.

Nth Child Selector

element:nth-child(n)

Select elements that are the nth child inside a container based on the formula.

The below sample shows a selection of multiples of 2 [element:nth-child(2n)], where n starts from 0,1,2....

Nth Last Child

element:nth-last-child(n)

Select elements that are the nth child inside a container based on the formula in reverse order.

Only Child

element:only-child

Select elements that are the only child inside a container. In the below sample, it shows anchors only child span being selected.