Introduction to CSS & It's Selectors

Introduction to CSS & It's Selectors

1. What Is CSS?

CSS stands for "Cascading Style Sheet". It is a simple design language intended to simplify the process of making webpages presentable, CSS is generally used to change the style of web pages and user interfaces. It provides additional features to HTML & describes how HTML elements are to be displayed. It is also used to create user interfaces for web applications & for many mobile applications.

1.1 There are three ways to insert a Style Sheet

1.1.1 Inline Style Sheet :

We use Inline CSS in the body section attached to the elements, This style attribute works in the same way as other HTML attributes. We use 'Style', followed by the equality sign (=), and then a quote where all of the style values will be stored using the CSS property-value (i.e = "property: value;")

1.1.2 Internal Style Sheet :

We use Inline CSS in the body section attached with the '< style >' tag in the '< head >' Section of the HTML Page

1.1.3 External Style Sheet:

An external Style sheet is a separate CSS file it is accessed by creating a link within the head section of the HTML file, We can use the same link to access the style sheet on multiple web pages.

2. What is CSS Selector?

CSS selectors are used to targeting the HTML elements whose properties we want to set. Through selectors, we can target Single / Multiple HTML elements to apply the style sheet. CSS selectors can be grouped into the following categories based on the type of elements they can choose.

2.1 Types of Selectors :

2.1.1 Universal Selectors :

It is denoted by Asterisk (*) symbol. It is used to target any HTML element on the page and apply styles to it

2.1.2 Individual Selector :

It is also known as a 'Type Selector'. Individual Selector used to select the HTML tag/element from the document.

2.1.3 Class Selector :

It is used to select all of the elements with the specified class name, and apply styles to each of the matching elements. The selectors must start with a period (.) and then the class name. to the target class, we need to put. before the class name. -In the below example '.section' is a class.

2.1.4 Id Selector :

The id of an element is unique within a page, so the Id selector is used to select a unique element or to select an element with a specific id, write a (#) character followed by the id of the element. In the below example 'div-id-ex' is a unique id name:

2.1.5 And Selector (chained) :

It is used to select an HTML element based on multiple IDs, classes, elements or their combinations. When multiple selectors share the same declarations, they can be grouped into a comma-separated list. White space may appear before and/or after the comma.