All language subtitles for 0002 - CSS Selectors Tutorial for Beginners.en.clean

[Music]

hello and welcome hi i'm dave this

tutorial is part of a beginner css

series i'll be using the chrome web

browser the visual studio code editor

and the live server extension for visual

studio code to view the web page

there are links to these tools starter

code files and all resources in the

description below

today we're working with css selectors

and there are three levels of selectors

that are the most common now i've got

visual studio code open here on the left

and i have a blank style.css file that

is linked to our html file and the html

file is open in chrome already i'm using

the live server extension with visual

studio code so we will instantly see our

changes in our page

the structure of the html page has an h1

heading and after that we have three

articles each article has its own h2

heading and paragraph inside

so as we talk about the three different

types of basic selectors in css let's

start with the most common which is an

element selector and i'm going to select

the body element now there is only one

body element per page but we have some

very small font and i will get into more

properties for each of the declarations

as we go through tutorials but i'm going

to use a few today just for examples and

i'm going to set the font size to 22

pixels and save now we can see this made

all of our text on our page larger and

this is due to inheritance so these

other elements actually inherited from

the body element and we'll get more into

inheritance in just a little bit too but

this

in itself is an element selector now

there's only one body element per page

but say i went ahead and selected the

paragraph using the paragraph selector

and now i can set the color of the text

and i'm going to set the color of the

text to purple

and i'll save and notice it changed all

three of our paragraphs to purple so

element selectors select all of the

elements of that type so just specifying

p for the paragraph element selects

all paragraph elements now the second

type of selector is a class and so let's

define a class selector i'm going to

call this class gray note that a class

starts with a period before whatever you

name the class and you can choose the

name of the class but make sure it makes

sense

and remember your writing code for

others to read not just yourself okay

inside of this i'm going to set the

color to gray that makes sense to me

now i'll save that and notice paragraphs

2 and three turn the gray color and if

we look at our html which is a little

crowded over here but if i scroll down

to the second paragraph here we have a

class

set equal to gray on that paragraph

likewise we have a class set equal to

gray on the third paragraph as well so

classes can be used more than once and

they're very useful that way you're

creating styles that you can apply

throughout your project or throughout

your page and then they can be reused

with more than one element and note

classes are more specific than selecting

all paragraphs for example and because

they're more specific they overruled the

purple setting that we had for all

paragraphs and now gray applied to these

last two paragraphs here and we will

also discuss specificity in more detail

in just a few minutes as well now

classes are the most common type of

selector with css

but the more specific

selector yet is an id selector and i

have an id named second an id attribute

inside of the html and here i'm going to

apply a font style and we'll set that to

italic

and i like to have a space afterwards

now i'll save and notice the second

paragraph became italic as well so it

specifically

addressed the second paragraph now ids

should only exist once in an html

document they should be unique in other

words however it is not good practice to

really use ids inside of your css now it

will validate your code has no problem

using an id

however typically you should use classes

and sometimes element selectors but

rarely if ever should you use an id

selector inside of your css they do have

other valid uses if you remember from

html linking a form input back to a

label element and then as you learn

javascript you may have some other uses

for id attributes as well but we try to

keep them out of css and now that we've

covered the three basic types of

selectors let's discuss what you can do

with some of them just a little bit more

so let's have our h1 here and let's set

the color for the h1 to blue

and we'll save and we can see it only

selected the h1 we only have one h1 on

our page but we can also group selectors

so let's set all of the h2s as well to

blue and you can see i just put a comma

between and then

this declaration or this rule set the

entire rule set if we had more rules in

here more declarations i should say

it would apply to both the h1 and the h2

so you can go ahead and group selectors

with a comma in between now notice what

happens if i remove the comma and save

this declaration or our full rule set

especially if we had more declarations

none of it would apply to the h1 or the

h2 now what's going on here this

selector is looking for any h2s that

exist inside of an h1 it's not looking

for an h1 or an h2 it's only looking for

h2s that exist or are nested if you will

inside of an h1 so that's why that

didn't work that may be useful to know

in the future but what we need is a

comma in between and then we can select

both the h1 and all h2s on the page with

this rule set so let's look at an

example of where we would select an

element that's inside another element so

let's start with our paragraph elements

again and now we'll look for any span

element inside

any paragraph element and here let's set

a couple of values so we'll set

text dash

transform

and i'm going to choose

uppercase here and then i'm also going

to set a background

color

and let's set this to gold so it stands

out we're essentially highlighting what

we want to see and now we can see

we have set this word whatever this word

is this is latin from our lorem epson

we've set it to uppercase and same with

epsom and then we also set gold behind

each of these words with this however

this doesn't make a lot of sense this is

a much better example of where we should

use a class we might name our class

something like

highlight

and then apply that to our span elements

inside

of the index so we've come in here and

find our span

and i'll select both of these

and then we can add the class highlight

and that makes it reusable if i spell

highlight correctly there we go and save

and now it's once again applied but this

would keep our css much more organized

and actually more reusable it's more

flexible this way because we might have

some span elements doing other things

that we didn't want to apply

this rule set too and now one last

selector to discuss it exists we

wouldn't use it that often but it is the

universal selector and this means it's

selecting everything on the page you

typically only see this for what is

called a css reset that we will cover in

the future but just so you know it

exists this selects everything so let's

think about what we could apply here

that would be applicable to everything

so let's change the font

and we'll set it to this mono space font

and save and now you can see all of the

text on the page

turned into this monospace font instead

of the default font that we had now this

is not how we would use this again in

the future we'll learn about a css reset

that would use that selector but

typically that's the only time you see

that universal selector used okay let's

discuss the cascade

css is an acronym for cascading style

sheets and essentially that means css

works like a waterfall it works from the

top down and that means if i were to put

in another definition i'll just copy

this down for paragraph and where we

have

the color purple on our first paragraph

it really applies to all but then of

course the gray class overrides that on

the final two

but if i came here and said

red instead of purple

notice how this paragraph

turns red and that's because

it read this rule set last so first css

looked at this at the top it starts at

the top and it works its way down and so

it read this last essentially this is

the last rule and that means whichever

definition it reads at the last will be

applied now specificity can override

this and that's where we talked about

elements and then classes classes are

more specific for example

than just an element selector so we have

our class here that has the color gray

and it is overriding the red now if we

remove this class and we save

now they're all red but even though

we're looking at the cascade and

starting from the top down even if i put

this class above

the paragraph selectors and save

it still applies to these last two

paragraphs because it has more

specificity

than an element selector and the element

selector here purple of course is

overridden

with the last rule being the element

selector here for red so we start out

with a red paragraph and it's really

applied to all paragraphs except that

then

css sees there is a gray class applied

to the second and third paragraphs and

that has more specificity so it

overrules whatever is set by the element

selector now a problem you can have is

when you have a large css file and maybe

you have set this gray class on these

paragraphs and later on let's say you're

way down a couple of hundred lines and

you're setting a color on a paragraph

and you can't understand why it's not

being applied so let's go ahead and

expand chrome here and you can right

click and choose inspect

and once you inspect your page

then you can look at the different

classes and css rules that are applied

so here's a good example of that we have

got our third paragraph highlighted up

here in the elements tab

and then we're looking at the styles and

we can see we've got paragraph rules

here these element selectors but color

purple is crossed out and then color red

is crossed out so css knows these rule

sets exist for paragraph but it also

knows it should follow what is the most

specific using the rules of specificity

so here we have a color gray that is

being applied so you can see

sometimes when you're struggling with

your css and you have written a rule and

you're not understanding why it is not

being applied you should inspect your

code with dev tools and once again you

right click and choose inspect to do

that and then just go to the correct

tabs elements

highlight the element that you want look

at the styles and you'll see how it is

being read by css in the browser or how

the browser is reading your css and then

see how those rule sets are being

applied which ones are being overridden

and which ones are actually being

applied okay i'm going to close that out

now and i'll resize chrome so i'll come

back over here to our style and once we

go to the top let's talk about

inheritance as i got into specificity a

little bit already but inheritance

that is where

another element inherits the settings

from or the properties from its parent

element so the body element is parent to

every other element here and so when we

set the font size all of these other

elements inherited that font size now

typically anything related to font or

typography

is inherited and that can include things

like color line height alignment all

sorts of settings dealing with the font

and the typography however any

properties that are not related to those

things are not inherited and i know

that'll just take a little bit of

getting used to as you learn more about

css so for example this font size was

inherited but another setting we could

put is a border and i'll put three

pixels so it's easy to see solid black

and i'll save this now notice the border

only went around the body element it

didn't apply to all the other elements

inside of the body so that's an example

of something that is not inherited i'll

go ahead and remove that again now we

did briefly talk about that universal

selector let me go back to that and show

you that this is not inheritance this is

actually selecting all elements so here

if i said a border

i'll put one pixel solid red

and save notice it does apply to all

elements that's because we selected all

the elements here so setting something

here with the universal selector is not

going to cause inheritance really

because it's actually selecting all the

elements itself okay i'll remove the

universal selector again but getting

back to just the inheritance overall

this can be very handy because it keeps

us from writing repeated code in other

words it keeps our code dry which is an

acronym that stands for don't repeat

yourself so we want to write less code

and be more efficient and inheritance

helps us do that now some things are not

inherited like i mentioned the border

would be one of those also form elements

do not inherit say the font size and

other typography settings so it wouldn't

be that unusual

to see something like this that would

take a button and let's say an input

text area and let me see if i'm leaving

anything else out maybe a select

anything like that and we might see then

font and set it to inherit and that

would go ahead and make those elements

inherit the font settings because just a

mental note that form elements do not

typically inherit those font settings

but now to take advantage of inheritance

and write dry code we can use the body

element which appears only once per page

or we could use the html element

and either would work

oftentimes if you're just starting out

and just remembering it might be best to

just use the body

oftentimes i use the html element

because once again the inheritance

applies there so we can save here

without see the difference now i'll go

ahead and apply it in html and once

again we have the larger font because

there are for me at least some specific

settings for the body and i like to see

those separate so i often put all of my

font settings in the html selector but

again either would work one other

element selector that i do use at times

is the main element it is a semantic

element and it should appear only once

per page but then you have to be aware

that you're only selecting the things

inside of the main element so if we look

at our page i've got the h1 inside of a

header element and not inside of the

main element so if i were to change

the font family

inside of our main selector and i

changed this to mono space which is easy

to see the change with

go ahead and save you can see

all of the articles switched to mono

space but our h1 heading is still using

the other font okay coming back to

specificity just something we talked

about so a quick review there element

selector is the least specific

and then a class selector is more

specific and then although we don't want

to use them in our css an id selector is

even more specific than that

sometimes something's not working out

and you're wanting to figure out why

it's not working out or you just can't

figure it out and you get frustrated i'm

going to show you something that will

work but i'm going to recommend that you

do not use it it's kind of the nuclear

option if you will and it's to put an

exclamation mark and put important now

see how red should be applied to this

first paragraph but with the important

flag right here after our purple setting

and now i save

notice what happened

it turned the first paragraph purple

notice what else happened it also turned

the second paragraph and the third

paragraph purple now why is that well

this important essentially ruins

everything else it overrides everything

so

really when you see it in code it's kind

of an indication that it's not well

organized or it's sloppy there's only a

few reasons you would really want to use

this and i feel i mean i'm hesitant to

even show it because i feel like

beginners could abuse this however

you'll see it somewhere i just want you

to know it exists

don't use it don't use it you need to

learn how to organize your code and

apply it correctly and only after you've

learned css well enough to understand

when to use that important flag that's

the only time you should use it you

should really not give up the struggle

you will learn more by struggling and

learning how to apply these selectors in

the proper way without using that

important flag i do want to show you one

thing that will help you learn and that

is the specificity calculator and i will

give a link to this in the resources you

can see they've got some

basic values here that are already

fairly complicated but you can zero

these out and you can compare two

selectors to see why they are working

and why they aren't working or why one

overrules the other you can see an

element selector here for an h2 has a

score of 0 0 1

but if i put in my class of gray it has

a score of 0 1 0 in other words 10

which is a higher score

than one so the class overrules the

element selector and likewise if we put

in an id selector

like we had second

it has a score of 100 over 10 so

that is better now you could apply more

than one class for example to an element

so let's see what happens if we had a

second class and we had our highlight

class

now this has a score of 20 but it's

still not going to be as high as a score

of 100 so this specificity calculator

will certainly help you understand why

one rule is being applied or why one

selector i should say is being applied

over another remember to keep striving

for progress over perfection and a

little progress every day will go a very

long way

please give this video a like if it's

helped you and thank you for watching

and subscribing you're helping my

channel grow

have a great day and let's write more

code together very soon