Lazy Web Basics 3: Classes, IDs and CSS
Lazy Web Basics 3: Classes, IDs and CSS
Transcript
so we've learned the basics of HTML and
we've learned the basics of CSS and now
we're gonna talk a little bit more about
how those two things come together so
I've changed the page we were working on
a little bit it's mostly a collection of
h1 s and P tags now there's a little
less styling I still have the glory of
Comic Sans on here but it's not as
aggressive because it doesn't have a
background anymore I'm gonna added three
buttons down at the bottom set of just
one and we're still just stuck with one
link down there so a situation that you
sometimes come across is you want some
of the page to change but not other
parts of the page to change so for
example I have all of my P tags and I
say make them all have the font size 16
and make them all Arial so every single
one of these is the same but then I
think oh this up here is a byline and I
want our byline to be a little bit
smaller now you could try to change it
to the byline tag but it turns out the
byline tag doesn't exist right so we're
going to use a P tag to represent this
if we wanted to make it smaller we might
change this to 12 save refresh but
unfortunately this changed every single
other paragraph on the page too so
sometimes what you want to do is just
grab a few elements that have something
in common even though they have the same
tag so what we do is we are going to
learn about something called classes
which are kind of like categories so I'm
gonna say hey put this into a category
or a class called byline take this one
down here also put it in a category or a
class called byline and I'm first going
to do that in the HTML so class is an
attribute so class
equals byline so now this P tag here has
the attribute class with the value of by
line and I'm gonna do the same thing for
this by line here class equals by line
I'm gonna save and then everything looks
exactly the same when you add classes it
doesn't necessarily do anything it
doesn't make anything happen it's just a
way of describing more specifically
perhaps what this P tag is what category
of P tag we have here but the fun part
is that we can go now into our CSS up
here and we can make a rule about that
by line so if I say go make a rule about
the byline you'll be like I got this I
know what this is by line font size 12
pixels beautiful now you already know
something has gone wrong because byline
didn't light up in the same way that h1
and P did so syntax highlighting is
really good for knowing when you're
screwing something up so save refresh
yeah obviously didn't do anything so
when you are talking about something
that you want to style remember the
words selector you use a selector so we
use the selector h1 to find all of the
h1 tags the selector P to find all of
the P tags but now we want to find the
bylines and we don't want to find the
bylines by the tag name because the tag
name is P we want to find them by the
class name and the way that you do that
is instead of typing by line you type
dot by line and you say interesting why
is it dot by line and I say I don't know
that's it's programming that's how
programming works we just just accept it
refresh and there we go now it's nice
and small so we could add other things
to this color for
three three like what that's not a color
it is a color we'll talk about that
later and so now it lightens up a little
bit you can put classes on anything so
for example if we have these buttons
down here this is a normal button this
is a normal button and this is a submit
button so maybe we want this submit
button to stand out a little bit against
those other buttons so I'm gonna say
class equals submit so I'm putting the
submit button into a category or a class
called submit and if you want to make a
rule about this I will say dot submit
because dot means class and maybe
background black color white so it
becomes an inverted button so it stands
out a little bit more it's still very
ugly yes we'll solve that problem later
with bootstrap now you can't put spaces
inside of classes so if I called this
story by line I couldn't say dot story
violent actually technically is that
gonna work no so what happens is if you
put a space in here that space means
these are two different classes so right
now this P tag here this paragraph has
the class of story and the class of
byline so if I make a rule up here
that's for byline if I save it it'll
still work because one of those two
classes is by line and if I wanted to
get crazy I could say story background
red and now this P tag here is absorbing
both the rules about story and the rules
about byline and the rules about P so
it's really combining all these things
together that looks ugly this I'm gonna
get rid of it now it seems like this
should be enough and it would have been
but it's not I'm sorry the way the world
works is along with classes along with
categories there's also something called
ID ID equals we'll call it main it's the
main title on the page I don't know now
IDs are exactly the same as classes I
can go up here and I can make a rule
about this h1 just because it has the ID
of main but instead of dot main you know
color black its pound main so if I make
a class dot class gets dot classic its
dot class gets dot class gets dot if I
make an ID it gets a pound symbol why
it's programming it's the rules it's
just how things go so what happens is in
theory classes are supposed to be used
when you have multiple elements that are
going to share that style so if I have a
bunch of different by lines class equals
byline if I only had a one byline on a
page they would want me to say ID equals
byline because in the same way that you
can have an identification card for
yourself an ID that just says this is
just me this is only me this is my ID
that is only for me you're saying this
is the only thing that is going to have
the ID of Maine this is unique across
the page but why does that matter
because you just make the rules anyway
right the only difference is one gets a
pound and one gets a dot I could change
this to class equals Maine save it and
it will look exactly the same because
it's exactly the same thing the
difference is in like twenty years when
you're doing a bunch of crazy CSS
an ID is more powerful than a class so
like if a class and an idea are fighting
with each other the ID will win out but
like who cares no one cares literally no
one on the planet has any interest in
this so you just need to know though
that classes and IDs are basically the
same thing but generally you'll end up
using classes and you can use classes to
take specific styles and not have them
apply to an entire tag not having
applied to every single p on the page
but just have them apply to one among
the many so it's a way of you know
picking out a certain category of p tag
a certain category of length a certain
category of button and saying we're
gonna have a special style just for this
we've learned the basics of CSS and now
we're gonna talk a little bit more about
how those two things come together so
I've changed the page we were working on
a little bit it's mostly a collection of
h1 s and P tags now there's a little
less styling I still have the glory of
Comic Sans on here but it's not as
aggressive because it doesn't have a
background anymore I'm gonna added three
buttons down at the bottom set of just
one and we're still just stuck with one
link down there so a situation that you
sometimes come across is you want some
of the page to change but not other
parts of the page to change so for
example I have all of my P tags and I
say make them all have the font size 16
and make them all Arial so every single
one of these is the same but then I
think oh this up here is a byline and I
want our byline to be a little bit
smaller now you could try to change it
to the byline tag but it turns out the
byline tag doesn't exist right so we're
going to use a P tag to represent this
if we wanted to make it smaller we might
change this to 12 save refresh but
unfortunately this changed every single
other paragraph on the page too so
sometimes what you want to do is just
grab a few elements that have something
in common even though they have the same
tag so what we do is we are going to
learn about something called classes
which are kind of like categories so I'm
gonna say hey put this into a category
or a class called byline take this one
down here also put it in a category or a
class called byline and I'm first going
to do that in the HTML so class is an
attribute so class
equals byline so now this P tag here has
the attribute class with the value of by
line and I'm gonna do the same thing for
this by line here class equals by line
I'm gonna save and then everything looks
exactly the same when you add classes it
doesn't necessarily do anything it
doesn't make anything happen it's just a
way of describing more specifically
perhaps what this P tag is what category
of P tag we have here but the fun part
is that we can go now into our CSS up
here and we can make a rule about that
by line so if I say go make a rule about
the byline you'll be like I got this I
know what this is by line font size 12
pixels beautiful now you already know
something has gone wrong because byline
didn't light up in the same way that h1
and P did so syntax highlighting is
really good for knowing when you're
screwing something up so save refresh
yeah obviously didn't do anything so
when you are talking about something
that you want to style remember the
words selector you use a selector so we
use the selector h1 to find all of the
h1 tags the selector P to find all of
the P tags but now we want to find the
bylines and we don't want to find the
bylines by the tag name because the tag
name is P we want to find them by the
class name and the way that you do that
is instead of typing by line you type
dot by line and you say interesting why
is it dot by line and I say I don't know
that's it's programming that's how
programming works we just just accept it
refresh and there we go now it's nice
and small so we could add other things
to this color for
three three like what that's not a color
it is a color we'll talk about that
later and so now it lightens up a little
bit you can put classes on anything so
for example if we have these buttons
down here this is a normal button this
is a normal button and this is a submit
button so maybe we want this submit
button to stand out a little bit against
those other buttons so I'm gonna say
class equals submit so I'm putting the
submit button into a category or a class
called submit and if you want to make a
rule about this I will say dot submit
because dot means class and maybe
background black color white so it
becomes an inverted button so it stands
out a little bit more it's still very
ugly yes we'll solve that problem later
with bootstrap now you can't put spaces
inside of classes so if I called this
story by line I couldn't say dot story
violent actually technically is that
gonna work no so what happens is if you
put a space in here that space means
these are two different classes so right
now this P tag here this paragraph has
the class of story and the class of
byline so if I make a rule up here
that's for byline if I save it it'll
still work because one of those two
classes is by line and if I wanted to
get crazy I could say story background
red and now this P tag here is absorbing
both the rules about story and the rules
about byline and the rules about P so
it's really combining all these things
together that looks ugly this I'm gonna
get rid of it now it seems like this
should be enough and it would have been
but it's not I'm sorry the way the world
works is along with classes along with
categories there's also something called
ID ID equals we'll call it main it's the
main title on the page I don't know now
IDs are exactly the same as classes I
can go up here and I can make a rule
about this h1 just because it has the ID
of main but instead of dot main you know
color black its pound main so if I make
a class dot class gets dot classic its
dot class gets dot class gets dot if I
make an ID it gets a pound symbol why
it's programming it's the rules it's
just how things go so what happens is in
theory classes are supposed to be used
when you have multiple elements that are
going to share that style so if I have a
bunch of different by lines class equals
byline if I only had a one byline on a
page they would want me to say ID equals
byline because in the same way that you
can have an identification card for
yourself an ID that just says this is
just me this is only me this is my ID
that is only for me you're saying this
is the only thing that is going to have
the ID of Maine this is unique across
the page but why does that matter
because you just make the rules anyway
right the only difference is one gets a
pound and one gets a dot I could change
this to class equals Maine save it and
it will look exactly the same because
it's exactly the same thing the
difference is in like twenty years when
you're doing a bunch of crazy CSS
an ID is more powerful than a class so
like if a class and an idea are fighting
with each other the ID will win out but
like who cares no one cares literally no
one on the planet has any interest in
this so you just need to know though
that classes and IDs are basically the
same thing but generally you'll end up
using classes and you can use classes to
take specific styles and not have them
apply to an entire tag not having
applied to every single p on the page
but just have them apply to one among
the many so it's a way of you know
picking out a certain category of p tag
a certain category of length a certain
category of button and saying we're
gonna have a special style just for this