CSS Tutorial for Beginners - 01 - Introduction to CSS Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to your very first beginning
tutorial on CSS and this is part of our
ongoing web development series now if
you do not have a solid understanding of
HTML you should go to my channel page
and go through the HTML for beginners
tutorial set that's kind of a
prerequisite now if you already know
HTML and you feel you don't need that
that's fine but if you don't know
anything about HTML I strongly recommend
that you go ahead and take that series
because an understanding of HTML is
really crucial to using CSS now as a
note we will also be introducing some
new HTML elements in this series and the
reason is they go hand-in-hand together
so it didn't make sense to discuss those
in the HTML for beginners because they
really work hand in hand with CSS in
terms of what you will need we're just
gonna use notepad for now just like we
did in the HTML for beginners series now
eventually we'll use an editor but for
now we just need no pen okay so what is
CSS well here's the dictionary version
CSS stands for cascading style sheets it
is a style sheet language used for
describing the look and formatting of a
document written in a markup language
markup language which is coarse for us
HTML well that's pretty nice that
dictionary term but what is it simply
well it just adds style to your HTML
that's it pretty simple and the nice
thing about it is you can completely
control how your webpages look without
changing your HTML and so it comes in
very handy an analogy I like to use is
imagine you build a fence and imagine
that fence is your HTML but the fence is
unpainted is basically just wood and so
in order to add color to it you need to
paint that fence so the paint would be
the CSS in this analogy it adds style to
the fence so that's a good way to think
of it you could also use the same
analogy for our house you build the
house and then you have to add style to
the house right you have to paint the
inside in the exterior you know you need
to add fixtures and paintings and all
sorts of things that add style to the
house so that's a good way to think of
this okay well let's not waste any more
time let's go ahead and do some CSS in
this initial video ok so let's open up
nope
and we're going to reuse some of the
source that we used in the HTML tutorial
series and you guys will probably
recognize that if you took that series I
think this is from episode 2 or 3 now if
you do not have this source feel free to
hit the pause button now and just go
ahead and copy all of this so let's go
ahead and add some CSS to this HTML
document and what we're gonna go ahead
and use here is the style element tag
and it's just style that's simple and
you'll notice that we're putting this
within the head element that's where
this goes because remember it's not
actually content we're actually just
styling some of the elements in the body
remember we're gonna go ahead and paint
some of these we're gonna give this some
color actually so let's go ahead and add
a closing tag for this and there you go
now I want to point out two things this
style element is an HTML element we put
our CSS inside here but this is actually
an HTML element so all of our CSS that
we're gonna code will go inside this
element everything inside here I also
want to point out that this is one way
that we can reference our CSS there are
other ways we can go ahead and reference
our CSS this is just one way now we will
be covering that in future tutorials but
for now this is one way and just keep
that in mind that there are other ways
and I will go over that in another
tutorial okay so now let's go ahead and
save this document if you haven't
already and you want to save this as a
HTML document and it's probably gonna
say I already have it there already
exists and I'm gonna go ahead and hit
yes to this now what we want to do here
is let's just take a look at the page -
any CSS so we haven't added any CSS yet
we just added the HTML element but let's
go ahead and just minimize this and we
will open this up and there you can see
we have no color yet added this so let's
close that out and we'll go back to the
source okay so now we're back in the
source and let's go ahead and select the
element that we want a style and in this
case I want to select the h1 element so
we're gonna go up here and type in h1
now this is the selector and what we're
doing is telling CSS this is the element
that we want to style so all we have to
do is type in h1 notice we don't have to
use the angle brackets we only have
type in h1 so just keep that in mind now
we also need an opening and closing
squiggly bracket and all the styles that
we're gonna do will go within these two
brackets so everything that we style in
this h1 element will be between these
two brackets and actually let's create
some space here so that we have so it's
a little easier to read this now we have
to decide the style that we want to
apply to here and in this case we're
gonna go ahead and change the background
color of this now we could underline
this we could change the font there's
all kinds of things we could do but in
this case we're just gonna do one style
today now we'll cover all the different
ways you can style HTML elements but in
this case we're gonna do background
color and each one of these styles is
called a property that's what they're
actually called and the property we use
is background - color now again that is
the property now after the property we
put in a colon but we're not done now we
have to specify what value that color is
gonna be or simply what color we want
this to be and in this case we want this
to be purple and so that is the value
and then we put in a semicolon and this
is the way it's going to be for all the
CSS that you do from this point on this
is the same type of thing you'll be
doing so you get really used to this
you'll put the property you'll put a
colon then you have to specify the value
that you want in this case we need a
color which is purple and then you put a
semicolon now if we did another CSS
property we would just put this right
below and we would do the same type of
procedure and actually what this
semicolon does is it's a break it says
okay I'm done with this move on to the
next property now collectively all this
is called a CSS rule but the way I like
to think of it is we're just saying hey
I want to style this h1 element and I
want the background to be purple and as
I said if we want to add any other
styles we would just put them right
below here and again we'll be doing that
in future tutorials so let's go ahead
and save this now and let's go ahead and
open up the document and there you can
see we've got a purple background now
for our head one element okay so that's
gonna do it for this tutorial I will see
you guys in the second tutorial