XHTML and CSS Tutorial - 17 - RGB Color and Line Spacing Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what's up guys welcome to your 17 XHTML
and CSS tutorial and in this tutorial
I'm gonna be building a basic website
and applying some sweet CSS properties
through it so let's go ahead and get
started and build just a starter quickl
website um put a header at the top h1 h1
and make this website
Bucky's bacon wagon just imagine a wagon
with a bunch of bacon in it and there
you go and now let's just go ahead and
add paragraph actually tighten that up a
bit that's what she said and we'll just
add one paragraph that's good enough for
now and we'll just put like best on this
side of the best bacon on this side of
the Mississippi explanation point and
space so let's go ahead and make a copy
this and you know we just need some text
so just fill that in like that so we
have actually a paragraph that's more
than one line so we have a header h1 and
a paragraph so if you save that and
looked at it right now here is what we
have but this website although you know
the idea is good a bacon wagon sounds
like a pretty good idea the website
needs some work so let's go ahead and
let's change the color of this and also
make this a little more readable so what
I want to do first is we need to add
that style sheet that we talked about
last time so style equals or excuse me
I'm getting ahead of myself
type equals text slash CSS and remember
you also need the ending style tag now
everything in between here is going to
be you know one of the rules so the
first thing we want to work with is that
header I mean this plain black header I
mean we can do better than that
so let's go ahead and make a rule to
change the color on that so the element
we're working with is h1 and in our
curly braces the property that we want
to change its color now before I told
you guys that you can just make it
something like red and that's good
so let's go ahead and refresh this and
now it's read what you're saying well
everyone has read on their webpage I
want mine to be a little different I
want mine to be the color of bacon so
what you can use aside from just
keywords like red blue green is you can
actually use something called an RGB
value now if you don't have Photoshop
because that's where I use mine you can
go to pretty much than any website or go
to google and type in RGB values and it
will give you a list RGB values but
whenever I'm looking for a specific
color on my website here's what I do I
go in the Photoshop and I click this
thing called a color picker and I make
sure that I'm working with only web
colors and I can scroll down to the
color that I'm looking for and highlight
over it and then I just copy this and
this is the RBG value on that stands for
red blue and green
so what I want to stress is not only do
you have to use key words but you can
also use RBG as well and anytime you do
that you go ahead and put the pound sign
and then paste that six digit color in
there
so now if we go ahead and save this and
refresh it instead of red we get this
brown dark brown cooked burnt and bacon
looking color so that's a little better
um again if you're just building a basic
website then the keyword is fine but
anytime you want like a really specific
color then you need to use that RBG
value so I just want to tell you guys
that you have more options than you know
just the colors you know in your head
so aside from this I mean our Bucky's
bacon wagon is looking Brown and looking
pretty beautiful but you may say all
right this paragraph right here this
isn't really readable to the user
maybe these lines are too close together
or maybe you just want to space them out
so we can fill this website a little
better
so anytime you want to space out the
lines you need to use a property called
line height so let's go ahead and first
tell CSS that we're going to be working
with our paragraph
we'll do that by typing P and in our
curly braces go ahead and type a line
height as the property and now we can
set this equal to a percentage by
default it's a hundred percent right now
so if you want to space them out a
little bit go ahead and type like a
hundred and thirty percent like that and
now add your semicolon at the end let me
save it and let me refresh this in front
of you and you guys can see when i
refresh what happens to the spacing let
me refresh and I didn't save it or
something aligned height one hundred and
thirty percent it looks good and okay
I'm also like okay let's try this one
more time there we go so I changed it to
150% and as you can see the line height
grew or well I mean I can't even explain
it as well I can just show you so let me
change this to like 170 170 is good
enough and I'll show you guys one more
time what happens right like that so
what happens is you get more space in
between your lines
aka a line height so you know I'm not
gonna explain you guys what line height
means because I just showed you but
anyways I usually like somewhere around
125 130 percent so I mean let me go
ahead and refresh this and it makes it
more readable than it did by just having
a default paragraph so that is the
basics of how to change color for
remember take away from the story not
only can you use you know just common
colors like red blue green you can also
use RBG value and last thing you can use
something called a hexadecimal value I
think that's how you say but don't ever
use that because no one ever does that
and again with line-height anytime you
want to change the line height this is
the property and change it to a
percentage of different than what it is
to make it more readable so that is two
basic property values I want to show you
guys and you know these might not be the
most common properties that you want to
change on your website but I just wanted
to illustrate
the point and I just wanted to go over
CSS again so hopefully the idea of what
element you want to change and what you
want to change too is sticking in your
head now so now that you understand this
concept of basic style sheeting we can
move on to the next tutorial so thank
you guys for watching don't forget to
watch the next tutorial and I guess I'll
see you then