Hello everyone, vicky here I hope you are doing well. In the previous article, we learned about the web and its language, HTML.

Why we need CSS

In today's article, we are going to learn about CSS, which is used for styling web pages. Now the question arises: why should we style a web page? It provides functionality, which we want, so why do we need this? To make the page more attractive and engaging, we need to style it.

Below is an example of a simple button whose purpose is to submit some data. You can see it's simple, but now hover your mouse over it, and you'll see the magic of CSS. The same button provides the same functionality, but just look at how beautifully designed it is now.

Remember that every browser has some of its own CSS that is automatically applied to web pages by default.

The main and most important thing is selecting an element. You know all about styling an element, like how to change the background color or the font style, but what is most important is which element you want to apply the changes to.

Today we are going to learn about CSS selectors, so without further delay, let's start today's ride.

Universal Selector

As the name suggests, "universal" means that it applies to all web pages. and a universal selector is denoted by the "*" sign.

We can see here that in CSS, we use the "*" symbol to apply styling to entire pages.

Individual selectors

Individual selectors mean we select tags individually, like "p" tags, "h1" tags, etc. Below is an example that will show you how we use individual selectors

Have you noticed something about the second heading? It doesn't want to be blue, but it is because it is an H1 heading. the styling applies to every element in individual selectors.

Class and ID selectors

We give tags a class and an ID so that we can apply styles to them. For class, we used a "." dot, and for ID, we used a "#" sign.

So you're wondering what the difference between ID and class is. Let's take a simple example: In a class, many students have the same class but a different ID; the same is true here. If we apply a rule to the entire class, it will be applied, but if we want to set a rule for any particular student, we have to use the id.

below is an example of Id & Class

In the preceding example, you can see that we used a class for apples because we have three apples, and we specifically targeted that element for bananas and oranges using an ID.

And selector (Chained selector)

We can understand this selector with a simple example.

Assume we go to a hotel and want to order drinks; some want tea, some want coffee, and someone wants both, so we create two classes: tea and coffee. Now, if someone orders tea, we use our tea class, and the same goes for coffee, but when we want to order both tea and coffee, we use both classes, which are called and or chained selectors.

The below example will help you to understand this example better

Combinators in CSS

Descendant Selector

Here, we can apply the same styling to multiple elements at once. we use space between elements to select multiple elements

Below is an example where you can see that we apply the same styling to paragraphs, headings, and one list item.

Direct child selector

It only applies to elements that are their direct children. Below is example

Sibling selector

Here we have 2 symbol which is + and ~. so what's the difference if we use + it selects only one next item but ~ selects all next items.

CSS pseudo-class

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element. it is mainly used to change the state of an element.

below is an example of hover in CSS

So, if you want to learn CSS, the only way is through trial and error; because there is no perfect font size, you must apply one size, then another, and after two or three tries, you will have found the perfect size that suits your site.

That's it for now. We will meet again in the next article. In the meantime, keep learning.