CSS Tutorial for Beginners - 28 - Add content page and reuse some of our CSS classes Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 28th CSS tutorial in this
tutorial we're going to add a content
page and we're going to use the existing
CSS classes that we've created to style
it so we really shouldn't have to do a
lot of work and that's the beauty of CSS
every new web page that we add to our
site we can use a lot of our existing
CSS that we've already created so let's
go ahead and open up our website and
we'll do that in chrome again and if we
scroll down here let's add a section
down here that will be additional links
to other articles that we're going to
create on fish so let's go ahead and do
that and we'll open this up so we can
look at the HTML and let's scroll down
here and of course we need to make sure
we put this in the body element and I've
already typed this out but what we're
going to do is add an h3 so we got
another header and we're going to use
the anchor tag and we've talked about
that in previous videos of course and
here's our new web page is going to be
shark so we're going to refer to that
shark HTML now I will put this code out
on the message board so you don't have
to type it all out in fact up with the
code for index.html our shark dot HTML
and our CSS style sheet so this link
will open up our new shark HTML and this
will be the text that people will see on
the page that will say the largest shark
ever so let's save this now what we're
going to do is we're going to actually
create some CSS rules for our header 3
element and so let's go ahead and do
that to open up the style sheet and
we'll just copy and paste what we have
from our h1 now we don't want the font
size increased on this so let's just get
rid of that and we don't want to Center
this let's actually have this header
element situated on the left and if we
take out this Center by default it will
be moved to the left so let's go ahead
and save this and actually we have to
put h3 here and now we'll save this and
let's open up our index.html and if we
go down here you can see now that we've
got our link the largest shark ever and
again we wanted this all on the left so
we're not centering any of these
elements and I will click on this on a
second now let's go to the shark dot
HTML content page that we
have them let's open that up in notepad
and here you can see we're going to be
reusing the same style sheet that we've
been using so that's perfect we don't
have to create a new style sheet and
that's really the beauty of a style
sheet all of your future web pages can
reuse the same style sheet now you don't
have to necessarily do that you can
create separate style sheets and some
people do that you could create a style
sheet for each page but that kind of
defeats the purpose in my opinion so
we're going to reuse our div main class
and we're going to reuse our paragraph
our generic paragraph that we've been
using and so let's go ahead and exit out
of everything let's open up our
index.html and now let's click on this
link and there you can see we've got our
content page and the beauty about this
take a look everything styled like our
home page and that's good because it's
keeping the same look and feel so we
didn't have to do a lot of work and
again that is the beauty of CSS we are
reusing our CSS paragraph class you will
also notice that our body and our
content page is also being formatted in
the same way we have the same color the
same margins everything that we put in
our body so that again is the beauty of
CSS okay let's close this out and let's
open up our index.html now in the next
video we are going to deal with special
effects for the first time and we're
actually going to create some effects
when we hover over this link and you
guys have probably seen that when you've
been browsing around other websites so
that's what we'll be doing in the next
video and actually before we go I just
thought of something else let's close
this out and let's go back into our HTML
for our shark content page and we don't
want to use an ID we actually want to
use a class here because this is going
to be a generic class that will use a
div class for the rest of our content
pages so remember id is for a specific
class that you want to use for a
specific page so let's just put in class
here instead and we'll call this div
content
and then let's go ahead and save this
and let's go back to our style sheet and
here you can see the pound signs and
again that identifies IDs but we don't
want to do that we want a class so we're
just going to create a new div class
below this and we'll put the period sign
of course which identifies it as a class
and we'll call this content and let's
save this and if we go into our shark
dot HTML and so everything looks great
you know what we need a period there
let's just be clean here and we'll just
fix that real quick okay that will do it
for this video I will see you guys in
the next video