What is CSS ?

CSS stands for Cascading style sheets. CSS determines how the HTML is displayed on the screen it's basically beautify the site. Using CSS we can add or change the color, background, font, width, height alot more can be done using the CSS on HTML document. CSS achieves this by using CSS selectors a way of targetting HTML tags, classes, ids.

CSS Selectors

There are some different types of CSS selectors based on the use cases those are.

Basic Selectors

Universal Selector

Universal selector is used to select all elements of the HTML document to apply all of the same CSS over all tags. * is used to select all elements followed by the { } inside the curly braces we write the required CSS.

Individual Selector

Individual selector is used to target element with the given these are the HTML tags we can directly give the tag name followed by the { }. These are useful when you want to apply different CSS for given tags.

Class and ID Selectors

Class Selector

Class selector is used to target the element which is having the class name given in css. Class name is given as class="example" in the HTML tag. Classes are targeted using . followed by class name in the css for example as .example { } . We can use same class names for multiple HTML tags.

ID Selector

Id selector is used to target the element which is having the Id name given in css. Id name is given as Id="#example" in the HTML tag. Ids are targeted using # followed by Id name in the css for example as #example { } . Id is used to uniquely identify the HTML tag.

Chained Selector

Chained selector is used to target some special tags with using multiple class names these classes are chained together using . . Lets say you named multiple tags with same class name and want to target some special tag in them then simply we can add another class name to that tag and chain together and can add CSS we wanted.

Combined Selector

We can use combined Selector when we want to give same CSS to different HTML tags. It will apply the same css to all the tags with the name.

Direct Child

We use direct child selector method when we want to target an specific element or tag inside some other tag most of the time we use multiple tags inside tags depending on the use cases in order to target specific tags we use direct child selector method. The syntax is usually seperated by space between the child tags or we can also use > between the seperated tags.

Sibling Selector

Sibling selector is used to target the sibling(next) tags after the given tag and apply the CSS. There are different ways of sibling tags we can use + and ~ for different use cases. + is used to target next single sibling and applies the CSS and in case of the ~ targets all of the sibling tags with same tag name given.

Pseudo-elements

Pseudo element is the keyword added to a selector that lets you style a specific part of the selected element. We can target the area which is not provided in HTML using the pseudo elements.

::after

This ::after will create an pseudo element after the selected target in order to add the content next to it. We will use content keyword in order for adding some content like text or anything else.

::before

This ::before will create an pseudo element before the selected target in order to add the content at that place. We will use content keyword in order for adding some content like text or anything else. we can add required content before or after using these pseudo elements.

Thanks for reading...