How to edit A Div In Css
HTML div tag Example and Tutorial using CSS
0:00 / 0:00
Quality:
Sharing buttons:
in this video I'll be demonstrating how
to use the div tag the basics of the div
tag along with some CSS examples will be
shown the div tag can be used to divide
an HTML document into sections these
sections then can be positioned and
styled using CSS we'll start by going to
little web Hut comm where we can test
out some sample code so we'll start out
here in the browser and we'll type WWE
little web Hut comm and then we'll click
on the HTML menu and then we'll go down
and click on the link for the div tag
this page has information about the div
tag along with some example code the
first thing to look at is the syntax for
the div tag you'll notice that the div
element starts with an opening div tag
and a closing div tag and then all of
the content is placed between the
opening and closing tags here we can see
an example using the div tag here's the
opening div tag here's the closing div
tag and this is the content that's
placed between the two div tags also
note that we use the class attribute on
the div tag here and in this case it's
set to main section this class attribute
or the ID attribute can be used to make
a connection between the div tag and a
CSS style above here you'll see that I
have styles defined in the head section
and notice that this main section right
here matches the title that's used for
the class down here main section this is
what allows the style to be connected to
this div tag
it's popular to create a separate file
for the CSS styles but in this case I
place them in the head section for easy
reference let's go ahead and test this
by pressing the test at XHTML style
button let's start by seeing what this
example does just as is so I'll press
the view results button and here we see
that we first have the sentence here
that says this text is not contained in
a div element and if we look up above
here this is where this was created
using a paragraph tag and then following
it this is where we had our div element
right here and between the opening and
closing div tags we have these three
sentences here and these sentences are
displayed below here in a different
color font and the text is centered this
was accomplished in the CSS style that
we had up here right here we had set the
color and then following that we had
text aligned and we set that to center
both of these properties the color and
the text aligned property were applied
to everything that's between the opening
and closing div tags I'm now going to
add another property to the CSS style
here and this property is going to be
for the background color
and I'm gonna set this to yellow this
will let us easily see the area the
visited tag occupies so I'm going to
press the view results button again and
here we can see that this div tag
occupies the full width of the available
area and now I'm going to add a second
div tag with some content and to make it
easy I'm just gonna cut this section
right here this div tag and I'm going to
copy it and then I'm gonna change the
class name we'll just call this second
and now I need to go up here to the CSS
style and do the same thing so I'll copy
this line and I need to rename it second
and let me change the background color
here to green that way we can tell the
difference between the two div sections
so let me go down here now and press the
view results button notice that the text
is a little hard to read here on this
green background so I'm gonna go up I'm
gonna change the color of the text to
white now when I press the view results
button it should make it easier to read
notice also when I changed the text
color to white to change the color of
all the text that was placed between the
opening and closing div tags something
that we should notice here is that this
second div section that's represented by
the green color is located underneath
the first div section that's represented
by the yellow this is because the div
tag is a block level element which
normally starts on a new line we can
change this behavior if we go up to the
CSS style for the first div element and
we add a float property and I'm going to
set this to left this tells the browser
to float the first div element to the
left side of the screen and allow the
second div element to occupy the empty
space on the right side of it so let me
press the view results button and now
you can see that the two div sections
are placed side by side another property
that I can add to the CSS style is a
width property so let me do that I'm
going to add width and I'm gonna set
this to 500 pixels and let's press the
view results button
as you can see the yellow section is now
500 pixels wide and the green section
wraps around the outside of it this is
because I had told the yellow section to
float to the left side and when you do
this it allows text to wrap around the
outside of it to the right using these
background colors as I have done setting
yellow and green for background colors
is a good way to let you see the actual
area that it div is occupying because
sometimes it may not be obvious so let's
say now that I did not want this green
section to wrap around the yellow
section so one way that I can prevent
that is I can go back up to the CSS
style for the second div element and I'm
first I'm gonna tell it to float to the
left but if I just do this alone
you'll see what happens if i press the
view results button you'll see that the
green section is now underneath the
yellow section and that's because the
green section didn't have enough room to
fit to the right side of the yellow
section in the available space so if I
go back up here to the CSS style and I
also give it a width of let's say 100
pixels then it should fit let's all
press the view results button and now
you can see that the green section is
located to the right side of the yellow
section and the text does not flow
around the yellow section so this has
been a basic introduction to the div tag
note also that you can place div tags
inside of other div tags to make more
complex layouts thanks for watching this
video and please leave a comment have a
great day
you
