Hello and welcome once again.
In the previous lesson, we learned about three different ways of adding CSS and we also learned that the
external CSS method is a more scalable way of adding CSS.
So we’ll be using this external CSS method and we already have our external CSS document open and we
have linked this document to average.
You may find using the link tag and I’ve added some estimates called for demonstrating purpose.
Now when we are using the external CSS we need to select the element from the HTML document that we
want to style.
For instance, we selected the B element for paragraph and wherever properties we add inside the curly
brackets are automatically applied to the paragraphs in the HTML document.
And that’s how all the better graphs on the page have become red in color and 16 pixels in font size.
So this is what the external CSS index looks like.
We have a selector.
And then inside the curly brackets, we can add different properties and values so the speed here is the
selector for the paragraph text in the HTML document and therefore whatever properties we add inside
these curly brackets will apply to the paragraphs on the page now in this lesson.
I’m gonna go more in detail about selecting elements or these electors and talk about the different
types of selectors that we get and see assess.
Now the first one we have is the universal selector represented by Estrich which selects all the elements
on the HTML page.
Therefore whatever properties we add inside and applicable to all the elements.
And that’s why one has to be a little cautious by using the universal selector since it is applicable
to all the elements on the page.
So we can use it only for a property that we want to apply to all the elements on the page to demonstrate.
I’ll go to the CSS file and type streak for the universal selector and that curly brackets and then inside
I mentioned phone family and this one family is the property to specify the phone style and let’s type
Ariel for the ideal phone.
Now all the elements will have an idea as the phone style B paragraph heading etc..
Now for the phone family property, it’s recommended that you specify three or four different form styles
like I can add after this ideal comma sensitive comma the home which is also a good font style and the
reason for selecting multiple font sizes is that if the browser is not able to open this first font style
maybe because that browser doesn’t support that then it will try to load the second one and so on.
Therefore it’s a good idea to have three or four different font styles based on your preference to be
on the safe side here.
April is the first preference followed by sensitivity and HTML.
So this is the universal selector and let us now talk about another type called element type selector
using element type selector.
We simply mentioned the element that we want to styled like this B is the element selector for paragraph
and wherever style properties we provide inside the curly brackets will apply to all the B elements
on the page, in the same way, we can add other elements like I can add each one as a selector and then
add some properties now all the H1 elements will have these properties applied likewise you can add
other elements as a selector like this header div etc. and then add the properties to stand them.
So this is the element type selector.
Now suppose you have the same properties that you want to apply to different elements and you don’t
need to write separately as properties like this.
Each one has the same properties as the B selector.
So in this case there’s a shortcut.
Then instead of adding the properties again, I could have simply added the H1 next to the p selector
separated by a comma.
Now I can get rid of these lines from here because the properties will apply to both the H1 and paragraph.
Also, you can add more elements as well separated by comma now this element selector is quite general
as it stands all the instances of the element like the P element applies these properties to all the
B elements on the page.
Therefore in case you want to sell only some specific elements then the element type selector may not
be the choice nonetheless for selecting specific elements.
We have a couple of more elements selectors like this third one which is a descendant selector combinator.
So the descendant’s selector combinator lets you select more specific elements by combining elements.
For example if you want to select let’s say only the p elements that are inside the header then you
can type header space B.
So, in this case, it will first look at the header and then we’ll side all the p elements inside the header
which means these elements within the header tax as a result.
This time these properties are applied only to these paragraphs inside the header.
So this is why it’s called descending because the speed after header means the B elements which are
descending or the child elements of the header.
Now in the same way if I type header space div space B then it further narrows down to all the p elements
inside the div which is inside the header tag.
So there’s div here is not any div on a page but only the div which is inside the header.
So as a result of combining these three elements the CSR style properties will apply only to this bee
because this bee is inside the div which is further inside the header.
This is why it doesn’t select DSP because even though it is inside the div modest div is known inside
the header.
So by adding multiple descendants you can be more and more specific and you can also combine more elements
to get to the specific elements of your choice however this method is still not very specific.
Suppose that you want to select only the second bee element.
We cannot do this using descending combinator because both paragraphs have the same parent which is
the header and if I type header space be then it can still mean both the paragraphs cos they’re both
inside the header and we can narrow down any further here to select only the second paragraph.
Moreover, imagine if we had another header on the page with B elements in that case it would select those
paragraphs as well so this descending combinator clearly has some limits.
So as a workaround to get to an individual element of the choice we can use another method that involves
class and idea attributes and this method is a very commonly used method and super easy.
And for this matter, all we need to do is go to the element of the choice and then give it either a class
or idea attribute so let’s give this paragraph an idea of let’s say paragraph 2.
Just a random name I’m giving now I can simply use this idea name as a selector using hash symbol and
this has symbol means we are using an idea name and this is the idea name so this will automatically
apply the properties only to this paragraph because only this paragraph has this idea in the same way
I could have given this element a class attribute also.
So if it was a class name and this hash would invoke those hashes only for ideas and for class we rather
have dot so dot paragraph 2 now refers to this class name and will automatically apply these ISIS properties
to the second paragraph.
Now you might be wondering if both ideas and class are able to select a specific element and what’s
the difference between them.
Well there’s one important difference and it can help you decide whether you should use ideas or class
attribute and that difference is that ideas are unique but classes are not what this simply means is
that if you have given an idea to this paragraph then you cannot use the same idea name anywhere in
the document.
So suppose that you want to apply the same properties to another element let’s say this b element.
Well it’s not possible using the idea cos if you add the idea attribute and give the same name then
it won’t work.
You can attribute the same I.T. name in the same team and document you will have to give it another
name.
On the contrary this is not the case with the class.
You can repeat the same class name and when you select the class name as a selector then it will apply
the properties to all the elements having that same class name.
So if you add the same class name to this paragraph as well then this paragraph will also have the same
properties applied and likewise if you add the same class name to this H1 one and this each one will
also, be styled the same way.
So the idea and class allow us to pick any particular element after this.
We have a few other selectors as well but these four types are very common and you will be able to manage
most of the time using only these selectors that we have just discussed but let me also explain these
other selectors as well and they are also pretty easy and let’s begin with the change selector combinator
it’s similar to the descendant’s elector combinator but this one selects only the direct child elements
and views the greater than symbol between the elements.
In this case so to demonstrate.
Let’s first show you again what will happen when I am head of space B as a descendant selector.
In this case, the properties will apply to all the B elements that are inside the header which are this
one this one and this one however if I had the greater than symbol in between then it now becomes a
child selector Combinator and this will apply to properties only to these two paragraphs because this
the third paragraph is not a direct child of the header.
It’s a direct child of this div element so you can use this option to apply CSA as properties only two
different child elements.
Next, we have the adjacent sibling selector and what it does is that instead of selecting the descendants
or the child elements it selects sibling elements and the sibling elements are basically all the elements
that have the same direct parent like this each one and two paragraphs is siblings because they all
have the same parent which is this header whereas this paragraph inside the death tax is not the sibling
of these because this one has div as the parent but this div element is also a sibling of the H1 and
Pete elements cause this one to also have the header as the parent.
So it’s a simple concept that all the elements have the same Derek parent are siblings of each other.
So using the adjacent sibling combinator we can choose to select the element which is an adjacent sibling.
And for this type we use the plus symbol and to demonstrate LME type H1 plus b as the selector and this
one will apply these properties to the direct siblings of B.
Only if it is right next to it like you can see here in this case the properties are applied only to
this paragraph which is next to this H1 and not to the other paragraph because it’s not next to it though
it’s a sibling likewise.
If I make this selection people as B instead then this time the properties will apply only to the paragraph
the element which is directly followed by a paragraph element which in this case is this paragraph as it
comes directly after a paragraph which is a sibling.
So there are two important conditions with this type.
First it has to be a sibling of a paragraph and second it has to be directly next to it.
So if I had let’s say any element in between like this span element then this time it will not look
because this paragraph is not next to it even though it’s a sibling in the same manner if it was H1
plus B and the span element was here then also it wouldn’t select either cause the sibling paragraph
is not next to the Hone, however, this is not the case with the next type which is general sibling Combinator
and this one is very much similar to the adjacent sibling combinator that we just saw.
The only difference being that this one selects all the general siblings but remember it’s still siblings
and also this one takes the till the signed between the elements.
So here if I make it each one to love B then this now becomes a general sibling selector and this time
it will select all the paragraphs which are a sibling of this each one even if they’re not directly next
to it.
So unlike the Addison siblings this one has only one condition that the elements should be a sibling.
Now the last one in the list is the attribute selector and this one selects an element having an attribute
that we can specify like this so we can type an element as a selector and then inside the square brackets
we can mention the attribute, for instance, let’s suppose we have given an attribute of Lang for language
to this paragraph.
Now I can select B and inside the square brackets I specify Lang and this will apply the properties
to this B having this attribute and in case any other element also has the Lang attribute then it will
also have the properties.
And one thing to keep in mind is that there’s no space between the element and the square bracket.
Otherwise it will become a descending combinator that takes space between the elements.
So no space between the element and the square bracket and you can be more specific as well by including
a value for this attribute.
So if I may get Lang is equal to E and then this time it will only select the B element having a Lang
attribute that even as the value.
So, in this case, it will again not select the second B because this one has Lang is equal to far so the
attribute the same but the value is not the same.
So this attribute selector is also useful and you can use it for any attribute.
Another possibility is to add only the attribute without the element.
In this case it’s gonna apply the properties to any element having this attribute.
Or we can be specific with the value so these are the different selector types that you can use in order
to select different specific elements on the page for styling these might look too many but they all
have very clear differences and are there to help us in selecting different elements that we need to
style before we finish.
Let’s have a short fun quiz to test our knowledge and here we have the first question.
So for the first question we have a piece of its dismal code and you have to select this paragraph.
And here are the options
and the right answer is B.
We can select this paragraph using the idea name and for an idea we use the hash symbol with the name.
Therefore the C option is definitely not appropriate whereas the first option will select all the B
elements hence B is the right answer let’s now move on to the second question and now we have to select
this b element.
And here are the options
and the right answer is B.
Cause if we use only the Lang attribute then it will select both the B elements moving on we have this
the third question and this time we have to select these two elements
so this one is simple and undoubtedly the C option is right because both the B elements have Lang attribute.
Next, we have to select this div element
and the right answer is D because all the options are true we can call this div only by its class name
and then headspace div will also select this div only because this one is inside the header and peoples
div is the adjacent sibling Combinator and this div is a sibling as well as next to the B element so
this also tells us that there can sometimes be multiple ways of selecting elements now time for the
last question.
It’s a bit tricky but I know you can do it
so the right answer is A.
In this case, this one is a child Combinator which means that it will select Derek type elements on the
the header which is these two that we need to select.
The second option is definitely not appropriate because it will select all the B elements inside the
the header which also includes the speakers.
This is also inside the header but these two paragraph elements are direct children of this header and
this third simply means all the B elements which we don’t want to select here.
So it is the right answer.
So I hope you have a clear understanding of these different selector types and once you start using
then they’ll be much clearer.
But I would recommend that you create an external file with some code and then create and join an external
Classes the file and try different selectors and properties.
It will be a fun and effective learning experience.
So keep learning and see you in the next lesson.
Also, Read –
