Lesson 3 of 11By Aryan Gupta
Last updated on Feb 25, 20211099Cascading Style Sheet, also known as CSS is a design language intended to simplify the process of making the web pages presentable. Selectors are used to selecting the elements and style them accordingly. This article will discuss the selectors and their types.
In this article, we will discuss the following topics.
A selectors in CSS is a part of the CSS ruleset, that is basically used to select the element you want to style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.
There are various types of selectors in CSS. They are:
The element selectors select the HTML elements by name.
All the <p> elements will be center-aligned with red text and a font size of 25 pixels.
The id selector selects the element based on the id attribute.
The id of an element is unique within the page, so the id selector is used to select the unique element.
It is written with the hash character (#), followed by the id of an element.
The paragraph with ‘id1’ will be styled and all the other elements remain as it is.
The class selector selects the element based on the class attribute.
It is written with a period character (.), followed by the class name.
As you can see the style is applied only to “class1”.
If you’d like only 1 specific element to be affected by the action, then you should use the element name with the class selector. Let’s understand this with an example.
You can see the h1 and h2 are styled differently.
The universal selector (*), selects all the HTML elements on the page.
All the elements are selected on the page.
The group selector is used to select all the elements with the same style definition.
Commas are used to separate the elements in the grouping.
All the elements with the same style can be styled at once.
Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!
Selectors in CSS enable you to maintain control over the customization process and code when creating a site from scratch. Investing time in learning and testing different CSS selectors will enable you to style the website efficiently with fewer codes and faster load-time.
Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.
CSS Keyframes: A Brief Introduction
IDC Study: “How Blended Learning Impacts Training Success”
HTML vs. CSS: The Best Guide to Understand the Difference
CSS Hover Effect - An Introduction
The Best Guide to Understand CSS Colors
Data Science Career Guide: A Comprehensive Playbook To Becoming A Data Scientist