Web Development #6 - CSS selectors

Hello everybody! 👋 👋
In this new post I want to explain to you a little bit what the css selectors are and how they serve us when creating a web page.

In previous articles we explain that css helps us to apply style to a web page, things like font types, colors, block structure, font size etc ... are various attributes that can be applied to each html tag and give it a Own style and thus achieve a good appearance of our website.👌 👌

But what are the CSS selectors?

A css selector is a set of rules by which we can style any element of our HTML.

It is used to select the html tags that we will stylize, it is just that ... when we use css we should always apply it with the css selectors that are the ones that allow us to know which of all the tags of our html page is the one that must carry the Style given.

Universal Selector (*)

The universal selector is the * (asterisk), it is used to assign the style to all the elements that have inside the container to which it was applied.
Example :

In this case we assign a font size and color to all elements of the html file.

Tag type selector <p>

A tag type selector is when we assign a single style to just one tag type either <p> </ p> or <div> </ div>
Or any label, only in css we put it without the signs > and < since they are not used, and it would look like this ...

In this case we see two clear examples where we apply two different styles to two different labels.

Downlink selector

One of the good things that has css is that it allows us to apply styles downwards, ie I can apply styles to tags that go inside others.
Example:

As we see in the image it is clearly seen two examples where we apply styles to labels that go inside others and this is done because many times it is not wanted to generalize a style to all the labels if not only to some in specific.

Class Selector

A class selector is one of the most used because it allows us to be very objective with the styles that we want to apply to certain tags, ie in the html tag I must add the class = 'value'attribute and this class name is The one that we are going to use to apply the style, below we see an example where we will understand a little better. 🤓 🤓

First we add the class attribute to the element or html tag as we see in the previous image.

And in the previous image we see how we make use of the class to assign the style to the html tag, one of the characteristics of the class selector, is that it can be repeated as many times as we want in each tag and so all will have the same style, and Also allows you to add multiple classes in an attribute.

It is important to clarify that the syntax of the class selector should thus .name always with the starting point.

ID Selector

The ID selector is also very used especially when we apply Javascript to our web page, this selector serves us to select a single html element, it can not be repeated since it would give us conflict on the page, the syntax is very similar to that of A selector class, as we see below. 🤓 🤓

As we see is the same as a single class that bears the attribute name id = 'value'.

In the previous image we see how we apply a style to a single element with the name 'subheadline', it is important to say that if it is an ID selector it should be called #selectorname

Well, I hope you are clear the importance of these types of selectors, see you in a new post.

Regards! 👍 👍