XHTML and CSS Tutorial - 16 - Intro to CSS Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome back to your 16th
XHTML and CSS tutorial and I know what
you guys are thinking so don't even say
all you guys are like alright bucky we
are on our 16th XHTML and CSS tutorial
and I don't even know what the heck CSS
is yet all you've been teaching me is
XHTML and that is about to change in
this story let me tell you that first of
all second of all let me explain you
guys differences between XHTML and CSS
XHTML as you can see already is pretty
much the basic building blocks for a
website how to add all the main elements
to your website like images headings arm
paragraphs text links it's all the core
foundation stuff now what CSS does is it
makes it pretty it gives you a nice
pretty layout ATS colors to your font
changes the font itself spaces
everything out nice and neat so if XHTML
is the core foundation you need CSS is
like the designer it makes everything
pretty makes everything look real nice
so let's go ahead and let me show you
guys how to use this special thing
called CSS I just better throw this in
there because I feel empty if I didn't
CSS stands for cascading style sheet why
they named it that I don't know they
couldn't name that something a little
easier but that's what it means so now
how do you use this special magical
thing called CSS well you know how we've
been working in the body let's go ahead
and pop up into the head and add some
special tags we need to add two style
tags a style open that actually the type
type are a sty as weird that excellently
tucked a whole new word and I wasn't
even on my mind so style and an ending
style so for your first style you need
one attribute and that is called type
and you need to set this equal to text
slash CSS so now whatever goes in
between your opening in your closing
style tags
is going to be the CSS itself so
whenever you are making CSS you need
this every time no exception and it
needs to be in the head so let's go
ahead and in between these style tags
how are we going to start making our
website look pretty well let's go ahead
and make a basic website first and we'll
just write this is normal text and let's
go ahead and make a paragraph and right
this is paragraph text and make sure you
spell everything around so let's go
ahead and refresh it and check it out
this is our normal text
this is paragraph text pretty dumb and
boring so let's use CSS to spice things
up a bit say you know what we're just
going to leave this normal but for the
paragraph what we want to do to this is
maybe we want to turn it blue and change
the font because this font is pretty
dumb what is it like Times New Roman or
something who uses that anymore so let's
go ahead and in order to change any
element on your website in between your
style tags the first thing you have to
do is type the name of that element in
the keyword and whatever a paragraph is
or let me say this the element name is
whatever is in between the bracket so a
paragraph is P so go ahead and type P
now press space and after that you need
to add these little swivel e curly
brackets whatever they're called now we
already know we want to do something
with P so in between the curly brackets
you type what you want to change the
first thing you need to do is type what
property you want to change and there's
like a thousand different properties on
a paragraph like any of the color the
text and you don't have to memorize them
all usually people just go to a website
and there's a big reference table of all
the things you can change about it but
for now I'll give you guys something
simple one of the properties that you
can change where the paragraph is its
color the text color so go ahead and
type color and then
put a colon and now after you have the
property listed you write the value what
you want to change it to so I know I
want to change the color and I want to
change it to blue now once you're done
with everything go ahead and put a
semicolon and you're good to go
so here's how it goes this is called
your selector what element do you want
to change this color is called the
property what do you want to change
about it and this last thing is called
the value what do you want to change it
to so I want to take all my paragraphs
and change the text color to blue simple
enough so let's go ahead and save this
and refresh it and check it out our
paragraph text is now blue so that is
how you can use a really simple style
sheet this whole thing called style
sheet to change any element on your
website so saying alright Bucky that's
cool but what if I want to do a little
bit more to the paragraph what if not
only do I want to make the text blue but
you know maybe I want to change the font
as well so in order to add more than one
rule to your element all you do is this
after your semicolon you can go ahead
and type another property and value in
I'm not expecting you guys to memorize
all the properties I don't even memorize
all the properties but in order to
change the font you need the property
name font - family and go ahead and add
your colon and as the value let's just
go ahead and change this something like
a our Arial and remember once you're
done with a rule go ahead and enter
semicolon save it and let's see what we
got nice very nice so this is regular
dumb old font and this is nice
blue looking Arial font so any time in
our website where it comes across
something in a paragraph this is what
it's going to do to it and everything
all right this is pretty cool but it
would be a lot more easy if this was you
know a little more readable so what
people usually do is they separate each
rule on the line so maybe the colors on
the first line and the font family can
be on the second line and I usually just
take this last bracket and put it right
there because then I can see easier when
it ends but if you want to well you know
maybe line all your rules up it really
doesn't matter CSS is whitespace
insensitive so it doesn't matter how
much white space is in between you can
either add that much and they will still
work fine but you know who the heck
would want to do that so you know
whatever works for you whatever makes it
readable for you use it so anyways what
I want to stress is in order to use use
CSS you first need style tags in your
head you need to make the type text
slash CSS and for the style themselves
you need a selector which is basically
what element which XHTML element do you
want to change you need a property what
do you want to change about it and the
value what do you want to change it to
so that's the basics of CSS and style
sheets um in the next couple tutorials
we're going to be working more style
sheets and if you don't quite grasp the
concept yet just watch my next tutorials
and I promise I'll clear things up for
you once you've seen this like three
times you'll be expert at it so anyways
thank you guys for watching don't forget
subscribe and don't forget to check out
my website see you later