Lazy Web Basics 2: CSS Intro
Lazy Web Basics 2: CSS Intro
Transcript
okay so a terrible thing has happened
and we have a huge problem and that
problem is is we learned HTML and we
have built a web page but there's a web
page is the ugliest thing that has ever
existed so we need to take this web page
and make it into something that looks
nice and in order to make it turn into
something that looks nice we're going to
learn CSS CSS stands for cascading style
sheets and you'll never ever ever need
to know that except at some point you'll
be like oh I understand why it's
cascading or maybe you'll never
understand why it's cascading but I'm
sure not gonna tell you right now so
when you visit the home pages of like
mathematicians or computer scientists
all of their websites are in like Comic
Sans and they just have white
backgrounds and they have black text and
blue links and it just looks like this
and that's not because mathematicians
and computer science people all just
really love this style and are kind of
like sharing hot tips on designing web
pages with each other it means that
they're not using CSS they're just using
plain HTML like this in order to build a
web page so what we're going to do is we
are going to use CSS style our page so
that it looks fancy and nice and cool
there are 3 ways to add CSS to a page
one is the right way one is the kind of
wrong way and one is the real bad way
usually when you learn they teach you
the real bad way I'm gonna teach you the
moderately wrong way and then force you
to do it the right way in the future so
if I said we were going to add CSS to
this page you would say that's
impossible
this is an HTML page the only language
that belongs on this page is HTML and I
say good observation but
this out there is a tag in HTML called
the style tag and you know what goes
inside of the style tag not more stuff
like this not more HTML CSS is what goes
inside of the style tag so even though
this is a dot HTML file between the
beginning of this and the end of this
everything we type is going to be CSS so
let's learn CSS how does it work well
the most important thing that you need
is a selector so you are here on add
some exclamation points because it's
exciting because what you need to do is
select stuff on the page that you are
going to style maybe we want to select
this headline or this headline or these
paragraphs or the entire page or
whatever so we already actually know how
selectors work if we want to select this
number one headline this biggest title
that we have we type h1 and the thing
that now makes this CSS instead of HTML
is well the fact that we don't use angle
brackets ever but CSS looks like this so
we're saying hey I've selected the h1
and now I'm gonna define a bunch of
rules about it
such as let's make the color red we have
a colon we have a semicolon on the left
hand side we have the name of the
attribute and on the right hand side we
have what we are going to set it to be
save refresh so now color is red
CSS has a list of what all of these can
be color if we change the background we
can say background purple and now
suddenly the background of this h1 is
purple and yes the h1 does go all the
way across
so when you write CSS it's a little bit
more particular than HTML so if we let's
say I went I went down here and I
deleted these closing P tags
maybe I'll close this yeah I'll get rid
of that h4 tag too and I save it when i
refresh the page it thinks oh this is
all in h4 but it still kind of puts it
on different lines so it's trying its
best to save us here but if we forget a
semicolon like that suddenly all of our
CSS breaks so when you're writing CSS
you have to be very careful that you
don't accidentally do something wrong so
we want to make sure we have our thing
here I think here and everything here
four things every line and life will be
good and if we want to get technical
this here is called a CSS property and
every property gets set to a value so if
you want to find a list of CSS
properties CSS properties this webpage
is pretty ugly but it's a really really
good way to browse wow this is so easy
to read I was going to send you to w3
schools or Mozilla developer Network but
just googling and getting this list
foof that's great so alright we have
font size and we can change the font
size oh this will be confusing unless
you know what's happening let's make
this h1 bigger if you want to make it
bigger we just keep adding new lines
here as long as our properties are
inside of these curly braces we can just
type line after line after line after
line so font size 100 pixels save
refresh bigger and bigger
bigger and bigger it's great we could go
for forever we can make it small three
pixels so nice and tiny can't even see
it side in there I promise we can change
the kind of font so you would think that
if font size is the size of the font
then you'd use like font font maybe to
do the actual font no its font family
obviously so if you want to turn it to
Comic Sans which is technically called
comic sans ms we refresh and there we
are good to go
beautiful right now when you write CSS
this is all CSS is if we want to change
what all of our paragraphs look like we
say hey we're going to use the selector
of P to select everything that is a P
tag and then we'll change things about
that too
font size 16 pixels font family and
impact on here to make this real ugly
yeah you can do it with emphasis to
emphasis color green so now every time
you emphasize it will be green that is
the ugliest green I've ever seen but
you'll see that the green up here and
the green down there they match because
they're both end tags there are a
million different attributes and you use
them all for different things but one of
the most painful parts of dealing with
CSS is something that's called the box
model and the box model is this thing
that has to do with spacing and padding
and borders and margins so let's screw
around with I guess this one this h3 so
if we have this h3 solid one pixel black
we're gonna add a border around it or
now let's do it for the image so that
image down there now has a border around
it and if I think that this is a little
this image is a little too close to this
text
can add a margin margin 30 pixels that
will draw a margin of 30 pixels all the
way around this spacing of 30 pixels I
could also specifically say hey put a
margin on the top and then it'll just do
the margin on the top or margin bottom
put it on the bottom along with margin
there is also padding so padding goes
inside of your border usually it's not a
border it's a background that's
transparent behind him but you can see
this is 20 pixels between the cat and
this and then another 20 pixels or 30
pixels this 30 pixels is padding this 30
pixels is margin guess what none of this
matters none of this matters if you
wanted to space things out in a real
life complicated special magic way yes
padding and background and margin and
all that would be your life it's it's
all that you would ever do forever and
ever and ever but to save you from
having to memorize all of these things
to save you from having to think about
CSS to think about all of these rules
next up we are going to learn or we're
like 90% of the way to learning about
something called bootstrap so instead of
doing these things like for example
here's what a button looks like I'm
button so that's an ugly-looking button
right it would be great if you could
have a cool modern internet looking
button and you could try to get there by
doing CSS right background green color
yellow padding 30 pixels whatever it's
not going to look nice but it doesn't
really be much either but instead of you
having to make all those decisions we
are going to push those decisions off to
someone else so that we don't have to
think about CSS even though we're using
it and that's going to be called
strap so that's on its way
and we have a huge problem and that
problem is is we learned HTML and we
have built a web page but there's a web
page is the ugliest thing that has ever
existed so we need to take this web page
and make it into something that looks
nice and in order to make it turn into
something that looks nice we're going to
learn CSS CSS stands for cascading style
sheets and you'll never ever ever need
to know that except at some point you'll
be like oh I understand why it's
cascading or maybe you'll never
understand why it's cascading but I'm
sure not gonna tell you right now so
when you visit the home pages of like
mathematicians or computer scientists
all of their websites are in like Comic
Sans and they just have white
backgrounds and they have black text and
blue links and it just looks like this
and that's not because mathematicians
and computer science people all just
really love this style and are kind of
like sharing hot tips on designing web
pages with each other it means that
they're not using CSS they're just using
plain HTML like this in order to build a
web page so what we're going to do is we
are going to use CSS style our page so
that it looks fancy and nice and cool
there are 3 ways to add CSS to a page
one is the right way one is the kind of
wrong way and one is the real bad way
usually when you learn they teach you
the real bad way I'm gonna teach you the
moderately wrong way and then force you
to do it the right way in the future so
if I said we were going to add CSS to
this page you would say that's
impossible
this is an HTML page the only language
that belongs on this page is HTML and I
say good observation but
this out there is a tag in HTML called
the style tag and you know what goes
inside of the style tag not more stuff
like this not more HTML CSS is what goes
inside of the style tag so even though
this is a dot HTML file between the
beginning of this and the end of this
everything we type is going to be CSS so
let's learn CSS how does it work well
the most important thing that you need
is a selector so you are here on add
some exclamation points because it's
exciting because what you need to do is
select stuff on the page that you are
going to style maybe we want to select
this headline or this headline or these
paragraphs or the entire page or
whatever so we already actually know how
selectors work if we want to select this
number one headline this biggest title
that we have we type h1 and the thing
that now makes this CSS instead of HTML
is well the fact that we don't use angle
brackets ever but CSS looks like this so
we're saying hey I've selected the h1
and now I'm gonna define a bunch of
rules about it
such as let's make the color red we have
a colon we have a semicolon on the left
hand side we have the name of the
attribute and on the right hand side we
have what we are going to set it to be
save refresh so now color is red
CSS has a list of what all of these can
be color if we change the background we
can say background purple and now
suddenly the background of this h1 is
purple and yes the h1 does go all the
way across
so when you write CSS it's a little bit
more particular than HTML so if we let's
say I went I went down here and I
deleted these closing P tags
maybe I'll close this yeah I'll get rid
of that h4 tag too and I save it when i
refresh the page it thinks oh this is
all in h4 but it still kind of puts it
on different lines so it's trying its
best to save us here but if we forget a
semicolon like that suddenly all of our
CSS breaks so when you're writing CSS
you have to be very careful that you
don't accidentally do something wrong so
we want to make sure we have our thing
here I think here and everything here
four things every line and life will be
good and if we want to get technical
this here is called a CSS property and
every property gets set to a value so if
you want to find a list of CSS
properties CSS properties this webpage
is pretty ugly but it's a really really
good way to browse wow this is so easy
to read I was going to send you to w3
schools or Mozilla developer Network but
just googling and getting this list
foof that's great so alright we have
font size and we can change the font
size oh this will be confusing unless
you know what's happening let's make
this h1 bigger if you want to make it
bigger we just keep adding new lines
here as long as our properties are
inside of these curly braces we can just
type line after line after line after
line so font size 100 pixels save
refresh bigger and bigger
bigger and bigger it's great we could go
for forever we can make it small three
pixels so nice and tiny can't even see
it side in there I promise we can change
the kind of font so you would think that
if font size is the size of the font
then you'd use like font font maybe to
do the actual font no its font family
obviously so if you want to turn it to
Comic Sans which is technically called
comic sans ms we refresh and there we
are good to go
beautiful right now when you write CSS
this is all CSS is if we want to change
what all of our paragraphs look like we
say hey we're going to use the selector
of P to select everything that is a P
tag and then we'll change things about
that too
font size 16 pixels font family and
impact on here to make this real ugly
yeah you can do it with emphasis to
emphasis color green so now every time
you emphasize it will be green that is
the ugliest green I've ever seen but
you'll see that the green up here and
the green down there they match because
they're both end tags there are a
million different attributes and you use
them all for different things but one of
the most painful parts of dealing with
CSS is something that's called the box
model and the box model is this thing
that has to do with spacing and padding
and borders and margins so let's screw
around with I guess this one this h3 so
if we have this h3 solid one pixel black
we're gonna add a border around it or
now let's do it for the image so that
image down there now has a border around
it and if I think that this is a little
this image is a little too close to this
text
can add a margin margin 30 pixels that
will draw a margin of 30 pixels all the
way around this spacing of 30 pixels I
could also specifically say hey put a
margin on the top and then it'll just do
the margin on the top or margin bottom
put it on the bottom along with margin
there is also padding so padding goes
inside of your border usually it's not a
border it's a background that's
transparent behind him but you can see
this is 20 pixels between the cat and
this and then another 20 pixels or 30
pixels this 30 pixels is padding this 30
pixels is margin guess what none of this
matters none of this matters if you
wanted to space things out in a real
life complicated special magic way yes
padding and background and margin and
all that would be your life it's it's
all that you would ever do forever and
ever and ever but to save you from
having to memorize all of these things
to save you from having to think about
CSS to think about all of these rules
next up we are going to learn or we're
like 90% of the way to learning about
something called bootstrap so instead of
doing these things like for example
here's what a button looks like I'm
button so that's an ugly-looking button
right it would be great if you could
have a cool modern internet looking
button and you could try to get there by
doing CSS right background green color
yellow padding 30 pixels whatever it's
not going to look nice but it doesn't
really be much either but instead of you
having to make all those decisions we
are going to push those decisions off to
someone else so that we don't have to
think about CSS even though we're using
it and that's going to be called
strap so that's on its way