Introduction to CSS

Cascading Style Sheet is a style sheet language that allows us to create rules that specify how the content of an HTML element should appear. HTML is used to create the layout of the website but CSS is needed for designing the website to make it look beautiful. Using CSS, we can change various properties of HTML elements like color, background color, font size, width, height, and a lot more. A CSS rule contains 2 parts: a selector and a declaration. The declaration comprises a property and a value separated by a colon.

CSS Selectors

A CSS selector is used to select an HTML element for styling. There are many types of selectors that allow us to target rules to specific elements in an HTML document.

Universal Selector

It is used to select all the elements in an HTML document.

Type Selector (Element Selector)

It is used to select an HTML element based on the element's name.

Class Selector

It selects all the elements with a given value of the class attribute. Multiple elements can have the same class name. For targeting an element with a particular class, period(.) followed by the value of the class attribute is used.

ID Selector

It selects an element with a given value of the id attribute. ID is used to uniquely identify an element in an HTML document. For targeting an element with a specific id, pound(#) followed by the value of the id attribute is used.

Chaining Selectors

It is used to chain multiple selectors together. In the below example, only that <p> element will be selected which has both class="para" and class="para1". But if an element has only one of the classes, then that will not be selected.

Grouping Selectors

The same set of style rules can be applied to multiple elements when they are separated by a comma(,).

Child Selector(Child Combinator)

The > (child selector) matches an element that is a direct child of another. For example, li>a { } targets any <a> elements that are direct children of an <li> element (but not other <a> elements in the page).

Descendant Selector(Descendant Combinator)

The " " (space) selector matches all elements that are descendants of a specified element (not just a direct child of that element). For example, div a { } targets any <a> elements that sit inside a <div> element, even if there are other elements nested between them.

Adjacent Sibling Selector

It is used to select an element that is immediately next to another specified element. Sibling elements have one parent. It is denoted by +. For example, h1 + p { } targets the first <p> element after any <h1> element (but not other <p> elements).

General Sibling Selector

It is used to select all the elements that are the next siblings of another specified element. It is denoted by ~. For example, h1 ~ p {} means if we have two <p> elements that are siblings of an <h1> element, this rule applies to both.

Pseudo-classes and Pseudo-elements

Pseudo-classes

A pseudo-class is a selector that selects an element depending on a particular state. They are used to style an element when being hovered over by a mouse, style elements when in focus, or style visited, unvisited and active links.

Pseudo-classes are keywords that start with a colon.

Syntax- :pseudo-class-name

:first-child - It represents the first element among a group of sibling elements. In Layman's terms, it selects the first child element of a parent element for styling.

:last-child - It represents the last element among a group of sibling elements.

:nth-child() - It is used to select one or more elements based on their positions among a group of siblings. n can be a number, a keyword (odd and even), or a formula (an+b).

Pseudo-elements

A pseudo-element is specified at the end of the selector and lets us style a specific part of the selected element. It acts like an extra element in the HTML document. It starts with double colons followed by a pseudo-element keyword.

Syntax- ::pseudo-element-name

::after - It creates a pseudo-element after the selected element to insert some content. Use of the content property is a must to insert any content like text, icons, emojis, etc.

::before - It creates a pseudo-element before the selected element to insert some content. Use of the content property is a must to insert any content like text, icons, emojis, etc.

::first-letter - It is used to add styles to the first letter of a text. It is as if there is an extra element around the first letter.

::first-line - It is used to add styles to the first line of a text. It is as if there is an extra element around the first line.