XHTML and CSS Tutorial - 32 - Child Selectors Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what's going on guys welcome to your
33rd XHTML and CSS story and in this
tutorial we're gonna be talking about
something called pseudo elements but the
name pseudo element I don't know why
they give that name because it's not
really even a fake element at all it's
basically just a piece of another
element so for example a pseudo element
for example might be if you have a
paragraph it might just be the first
line of the paragraph or if you have a
header it might just be the first letter
of that title or whatever section of
text yet so you see it's not really like
a fake element it's just like the
beginning of another element so I know
you guys it's really hard to explain it
so I'm just gonna show you guys what it
is so let's go ahead and make three
paragraphs because I'm gonna be styling
the first letter of each paragraph so
you know might as well have more than
one so um let me just go ahead and make
three outlines four paragraphs right now
pp head it's disgusting and paste and
paste so let's just go ahead and alright
what's popping in my head
Paul did you hear Miley Cyrus played
beer pong with the Russians yeah I never
took typing class as a kid so yeah and
then just write something and next one
like OMG WTF BBQ and in the last one
just write like Oh Billy Oh Billy okay
so anyways let's go ahead and save that
and take a look at what we got it so far
three paragraphs basically pretty dumb
so anyways what I wanted to teach you
guys is about these pseudo elements and
how to apply styles to them first of all
a pseudo element would be the first
letter of each of these paragraphs and
you don't get to pick um these pseudo
elements are actually built-in and the
ones that are built-in I know by heart
our first letter first line for example
if you had a paragraph with like five
lines it would only apply the style to
that first line and there's also one be
called there's also one book called what
the heck am I saying there's also one
called before
after and I actually never use these so
I'm not even entirely sure that they are
but I know that they exist because I
read about it before so anyways what I'm
gonna be doing is applying a style to
the first letter of each paragraph and
in order to use these pseudo elements
you do this go ahead and type the main
element that you want to apply and then
go ahead and add a colon and type the
name of the pseudo element now in this
case it's first - letter and again you
don't get to make these up these are
actually built-in so again there's first
letter and first-line before and after
so now whenever I apply a style it's
gonna apply it to the first letter of
every paragraph so let's go ahead and
well let's go ahead and make a style so
font-weight:bold good and on but like
font size 30 pixels I always choose 30
pixels I'm not sure why and just make it
color green that looks pretty good
and from that semicolon instead of colon
now refresh it and let's see we got now
we have a style apply to the first
letter of the first paragraph P oh and
oh and it's supposed to so that's pretty
nice so anyways that's what pseudo
elements are and that's how you can use
CSS to apply styles to them now again in
this example it wasn't really useful but
uh you know you get the idea if you ever
want to apply a style to make the first
letter or first line stand out this is
how you would do that so anyways that's
all I got for you guys for this tutorial
thank you guys for watching and I'll see
you next video