All right.
Welcome back.
So in this video we're going to talk about classes and ideas.
So let's jump into Sublime Text 3 and let's right click on learn basic age to move five may create a
new folder and we're going to call this 0 4 dot classes and ideas hit enter and I'm going to right click
select new file control ask type an index that each Timo and I type in each team out and hit tab and
go inside the body and I'll show you exactly what a class and ideas.
So we're gonna use the div tag that we learned in the previous video in the basic A.T.M. tags.
So we use the div tag before.
And what I'm going to do is I'm gonna type out left bracket and then div and we're gonna type in class
where we call this container and then I'm going to close this class with the div tag and then I make
another div and we're gonna call this left bracket div and then we're going to give it an I.D. of logo
OK.
So I'm a right click open in the browser and we're going to inspect this and you can see right there
we have the class of container and an I.D. of logo.
Now the idea of using a class or an I.D. is with a class you can use it on multiple elements.
So if I give this div the class of container and then I create another tag like an H one I can give
that a class of container I can also give it to each three or whatever other element that I want I can
give in a class of container.
Now with the I.D. you can only put it on one element.
So if you have a common use of an I.D. would be in the navigation you want to separate the logo image
from the rest of the site.
So for example if we had an image right here and I give an idea of logo and then factor them back in
first I.
I'm going to do this again to MGM.
There we go.
I'll give it a hashtag right now and then I'll give an idea of logo when I create another image.
Let's add another image in there.
I do the same thing but I don't give an idea.
If I open this in the browser and I right click and I inspect the element.
If I were to give this logo the image I.D. logo I could give that a custom property and see ISIS if
I use this one I could set a default property for image to whatever height and with for example that
I want and any image tag that I have on the site besides this image with I.D. would have the same property.
So then it closes for a second.
I'll show you where I'm talking about.
So if I went to here and I did image source and give the hash hashtag and I went up here I'm usually
a new tag on a tab in here and I'm going to do left bracket style right bracket left and then backslash
and if I went in here and I did image
and I did
height one hundred pixels with 50 watts to 500 pixels
background black came a right click open in the browser and you can see wherever I have the image I
have a background of black even on the.
The image that has the idea of logo because we're using image.
And so any element with image in it grabs these properties OK but if I do this if I do image hashtag
logo and I give it a height of 50 pixels with 100 pixels and a background of blue and I control s and
right click and open then the browser then it changes the properties.
So now you see the difference.
The class has this and actually it's not a class it's an element.
However I could make it a class.
And so that's what we're going to do.
I'll give it a class of test and then we'll do that here where I give this class of test.
OK.
And then I go here and I do image dot test.
So when I right click and open the browser and let's change changes the pink.
So it's a little more obvious right.
Open in the browser.
Now if I right click and inspect this is the real fun part.
The image with the idea of logo has a height of 50 pixels a width of one hundred pixels and a background
a blue the class the image of the class of test which is on two images has a height of one hundred pixels
or with a five hundred pixels and a background of pink.
So I gave the property of a height of a hundred pixels or with a five hundred pixels and a background
of pink to the image with the class of test.
So any image any element with the class of test will have these properties over here right here.
So if I put test on any other element and then I put it in the CSX here then it's going to give it that
property.
So let me close this and I'll show you remarkable.
So if I went to the H one and I gave it a class of test and I went to the H three and gave it a class
of test and then I came up here and I do have to add it because it's just not going to automatically
do it if I do H one dot test.
And then each three dot test.
Now when I go in it's going to do that for all three.
Now it's going to color out my text because it's just covering it up.
However if I come in here and I give it a color of black and I right click and open in the browser it's
still not there but what it's doing is it's giving it the properties that I wanted to have for the image.
It's putting it on the twins.
OK.
Now if I if I deleted these which I'm going to do and I go in here and I'll delete the color black and
I'll delete these divs right here and what we're gonna do is we're going to make a bit of a class of
test and then I'm going to give it I'm a close that I'm a right click and open in the browser and you
can see there it is but it's not grabbing the div and you know why it's not grabbing the div because
the div is not being called.
So what I'm going to do is I'm going to delete these right here and I'm going to do div dot test.
Right click open in the browser and now you see this is the div right here.
This is the image and that's the image and how we know is it the broken image here and a broken image
there because we don't have the correct link.
So that's the difference between a class and I.D. the class you can add it to multiple elements like
we did here we added intuitive we add it to an image.
The I.D. you can add to one element.
So in this case we added to an image and we gave it a custom property.
So that way it's differentiate itself from the rest of the site.
And so the idea behind that and we're going to use this in the final project the idea behind that is
if you're in the navigation and you want to have specific properties for the logo in the navigation
you'd given an I.D. and then you would give it a custom property with a position and a width and height
that you want so that it's unique to that one element.
So that's classes that I.D..
So thanks for watching.
I'll see in the next video.