CSS Tutorial for Beginners - 26 - The DIV element Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 26th tutorial on
beginning CSS in this video we're going
to talk about the div HTML element and
we've kind of been using that but we're
going to expand upon it in this video
now the div is an HTML element as I said
but the reason I did not introduce it in
my beginning HTML series is that it is
pretty much used hand-in-hand with CSS
so it makes sense to talk about it in
the CSS series now the div element is
used to divide your webpage into logical
sections and so this deals with the web
page layout and what do I mean by that
well let's say you have a menu that
could be a section you might have a
group of related images that could be a
logical section you might even have part
of a blog with text that could be a
logical section it's really a way of
dividing up your web page into areas
that perform a particular function so
let's open up our website but before we
do that actually let's take a look at
the HTML code here for a second let's do
a little bit of housecleaning
let's move the class and put it into our
IMG element and we'll just remove that
and this should make no difference okay
instead of using it in the div tag we're
putting it in the image element itself
and then let's go ahead and save this
and then let's let's go back into our
style sheet and we're going to go down
here and we're going to type in IMG dot
and then we're going to put in here text
- aligned
- Center semicolon now I will explain
why I'm doing this in a few videos but
for now don't worry about any of this I
will explain this in a few videos so
let's go ahead and save this let's open
up our web page in Google Chrome and
everything looks good as it has been now
we want to divide up our web page into
two logical sections that's what we've
got here we've got one section that kind
of is our main section right it has our
first heading to say that this is our
fish website and then we have this
sentence here to kind of say what it's a
out and then we have our opening picture
now we can identify this is a new
section that deals with bass fish so we
have two sections and so we want to
create a div element for all this and a
div element for all of this so let's
close this out and let's close out our
style sheet and then let's go into our
HTML code and we can just go ahead and
copy and paste some div tags here so
we'll put a div tag right here and we'll
put a closing div tag right here now
this now this becomes a nested div tags
and you can nest div tags within do tags
so there's actually sections within
sections but don't worry about that
right now let's just concentrate on the
main section that we're going to be
doing here and then let's let's actually
put a space here and let's go ahead and
put a div tag around our other section
which is on bass fish and we'll close it
out down here and there we go and if we
save this and reopen our website you'll
see that nothing's really changed and
that's the first point I want to make
about a div tag they don't really do
anything by themselves they just
identify a particular section like I
said so they're kind of transparent if
you want to think of it like that
so now what we want to do is give this a
ID attribute because these are going to
be unique so we'll do a little copy and
paste this we can just take this ID
we'll come up here and let's give this
an ID of main and we'll college actually
div main and then we'll take this same
one and we'll go down to our bass
section and we'll call this div bass and
let's save this and then let's let's go
back into our stylesheet and let's
create some rules now
we'll just take these rules and let's go
ahead
and and what we're going to do is we'll
say pound div mein and all we're going
to do is set the text in here and then
that's all we're going to do is black
and then we'll create a div tag for our
bass section and we're going to do the
same thing we're going to keep the color
of the text black let's save this now
and then let's go ahead and open up our
web page and you'll see we've got black
text but you'll notice now that our
headers are in black and that is because
they are inheriting the color black we
are actually if you take a look at this
that we didn't have anything in our
headers we didn't set a font color and
so it's going to inherit that from our
disk because that's what we said it we
set it right here the reason the first
paragraph didn't we open this back up
this first paragraph still isn't blue
and the reason is because we specified
blue so this was an override we talked
about that in earlier videos we override
it what we had in our div class so that
stays the same now of course we're
actually overriding the color green
right that's what was setting those
headers to green because we put that
property in the body element so these h1
and h2 headers were inheriting that now
if we want that back that's pretty
simple
we'll just specify the color green and
our two headers let's save this let's
open it up and now the headers are back
to green but our text remains in black
and this is what I did can actually be
useful they not only organize the
sections of your website you can also
use them for inheritance kind of the way
we are using the body element so now you
know we don't have to put black in these
paragraphs we can actually take these
out and they will inherit it so if we
remove these the font color should still
remain black so let's go ahead and save
this
well open this up and you can see it
remains black because it's inheriting it
from our two divs okay that is going to
do it for this video I will see you guys
in the next video