My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Here I'm exploring CSS topic.Let's take a look...

Here I'm exploring CSS topic.Let's take a look...

Seethal K S's photo
Seethal K S
·Jul 22, 2022·

2 min read

What is CSS? 👩‍💻

CSS stands for Cascading Style Sheets.If you are confident in writing HTML tags definitely you can go through CSS world.We can present the web pages more confidently by applying colors, layout, and fonts.Yea,It is totally about the presentation of a document.Let's take a look about Selectors.

  • Selectors

1.Individual Selector👈

Very Simple We can specify every tags in a document, with same styles to each element with the tag name

2.Universal Selector👈

We can reset the default styles of all browsers here.Selects every tags and elements.

3.Class and ID Selectors👈

For Class selectors there is an attribute "class" for every elements,we can give a class name to attribute class and in CSS that class can be styled with '.'

For ID Selectors there is an attribute "id"for every elements,we can give a id and in CSS that class can be styled with '#' .The id of an element is unique within a page, so the id selector is used to select one unique element!

4.Combined Selector👈

It is the combination of elements.We can easily seperate with ',' to the elements to perform particular styles.

5.Chained Selector👈

We can target elements that have combinations of classes and IDs by stringing those selectors together without spaces.Then we can style with the combinations together easily.

6.CSS Combinators

The descendant selector is a way to select elements that are located somewhere underneath other elements.This selector represents the ancestor element.

This selector selects only the direct child of the selected element .

select an element that is directly after another specific element.The elements are preceeded by '+' symbol

selects all elements that are next siblings of a specified element.The elements are preceeded by '~' symbol

7.Pseudo Classes

The most commonly used class in a webpage.And This selector is used to select elements when you mouse over them.

Like by name An element is disabled then it can't be activated.

8.Pseudo Elements

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user.

This creates a pseudo-element that is the last child of the selected element.