Working with classes in CSS-div and span with example


What did we learn so far? We learn how to create classes and IDS into
a style sheet, we learnt how to keep stylesheet.CSS or these types of CSS files in a separate
folder under the same root project that we have created and then we have learnt how to
link this particular stylesheet.css with our main HTML page and this is the result of it. We can see over here that everything that
we have created so far into our project, we have used our Universal selector, we have
used a General tag and we have created an HTML selector here which has a background
of black, and the same thing is being observed over here. So now we can proceed a bit more, we can create
something else that is more productive. If we get back to index.html, in this particular
case, we can use a class against our div, such as we can create a class which is known
as mother-wrapper… That we have created a mother-wrapper selector
here, we are using this particular class against this particular div into our index.html. Now all we need to do we need to create the
same selector name in to our stylesheet.css in order to make this thing work. If we get back to our project and reload,
so far we can see that no such distinguishable thing such as this mother-wrapper that we
have created over here; but now if we get back to stylesheet.CSS and if we declare a
class with this dot, and we choose the selector name to be a mother-wrapper, now we are presenting
this curly brackets over here and if we say that the width of this mother-wrapper should
be a 1000px; the height should be 300px with a background color of red; and with a margin
condition – we will be discussing about this margin later but first of all let’s assume
that this is the syntax that will make this proper div right into the middle of your page
and that is the exact intention to make the div centrally aligned. Now all we need to do we need to get back
to our project and reload. We can see that there is a mother-wrapper
div is been created into your page. Another thing if we just remove this particular
margin 0 auto condition from here and get back to our project and reload, now we can
see that the entire div is now shifted towards the left; that means margin 0 auto condition
is only condition which is practically aligning your div right into the central position of
your page. And that is the original intention. So for the time being we will assume that
this is the actual Syntax which is used in order to create a particular div inside your
HTML page. Now let’s get back to your project and reload;
another thing, this particular Syntax is supposed to create a 0px margin from the top of this
page, that means from the top part of this browser, it should be having a 0px margin;
and this particular red box should be lying at the top of the page, but it is not maintaining
a constant margin of somewhat value from the top. In the previous case we had created these
things here, these two tags that we were using; so first of all let’s remove them from our
index.HTML; you do not have a need of it, you know how to use header tags. So all we are going to do now, reloading and
we can see that it is now acting as per in accordance to the syntax that we have provided. Now this is something that we can see from
here that a div with a mother-wrapper class is being created and all we know that div
is a block element but to rather know it better let’s create two separate divs here inside
this first mother-wrapper div that we have created; for say we are creating another div
with the ‘test-box1’. We will now understand the block level property
of a div element and what to do to overcome this block level element property and align
them into a horizontal display; so that is why we are creating these two individual divs
over here; this is the test-box1, and on the other hand, we are creating another div with
a class name of test-box2. So here are two divs those have been created
over here and we will be needing those class names, those we have created. We are copying it and we are getting back
to stylesheet.CSS and here we are declaring class here; if we have to declare it as an
ID, then all we need to do we need to provide here a hashtag. But this is a class. So we are declaring it as a class with a dot
over here. Pasting this selector name and we are providing
this width, a width of this particular test-box1 to a 100px and we are providing this background
color…. The height of this particular box should be
for say, 50px; we don’t need to provide any kind of margin or padding over here; cause
this is a child element and if we want to provide any kind of margin and padding that
is a separate issue; if you have that requirement to provide margin then you provide it; if
you do not need to provide any kind of margin over here then do not provide it; but within
this main parent div you need to provide such thing here – a margin or a padding in case
if it is needed. Now on the other hand all we are doing we
are creating another class name here with the same properties and the class name in
this case will be test-box2 as we have created over here in the second case, the class name
should be test-box2 that is what we have created over here. Both of them are having same properties except
this particular background color. So we are providing here a blue color. Now let’s get back to our project and reload
and we can see that two distinct boxers is being produced inside this 1000px mother-wrapper
and those two divs are practically vertically stacked one over another. So this is the thing in this particular case
and this is the magic of a block level element. Every time whenever we create some div over
here; all of those divs, those are supposed to align in the exact vertical display. Every elements will be vertically stacked
one over another. But now let’s see an anomaly. Whenever we are applying a span class here
instead of a div class; for say we are now providing a span class, change these divs
into spans, and again we have created this second child element over here and we are
turning this div element into a span element. What should be the output? According to theory those two classes should
be horizontally placed and they should execute a horizontal display. This is the thing that is supposed to be done
over here. But if we now get back to our project, and
reload here we can see that both of these boxes are now gone. So, what happens? Now in an order to demonstrate it, in the
first case all we are now going to do we are going to insert some contents over here, such
as “Hello cruel World!”. And here we are placing as in the second child
box…..so all we are now doing here we have placed two contents – two particular lines
these “Hello cruel World” and “How are you these days”. Both of them are now being placed over here. So we are now getting back to our project
and reloading and we can see that again those two boxes, those are now appearing here with
the contents those have been created. So, what is the exact purpose it is serving
right now? Practically in case of a span element, it
is a dimensionless element. That means, nothing like these properties
such as width or height or these kind of properties those exactly represent some dimension, those
won’t be visible in case of a span element; But we can see that both of these elements
– those are now in a horizontal display. The span is now acting as it is supposed to
be. You may use here a padding property such as
if we use here this kind of padding property, for say, padding 10px; and here too we are
using this padding 10px; If we save and get back to our project and reload, we can see
that both of them are now executing a padding property. If we now keep all of these contents into
a proper alignment, then both of them will be working fine. In case of a span element, these dimensions
practically won’t be working for a span element that we have created over here. We can see that the dimensions with a width
of 100px or a height of 50px; but yet they are not working into the main page that we
have created, except the padding thing. On the other hand if instead we use a div
element here, change these tags into divs; again here div, and if we get back to our
project and reload, then we can see that all those elements, all those boxes, those are
practically getting vertically one over another. That means, div is a block level element,
and the span is an inline element. So that is what we need to know from this
tutorial, the difference between a block level and a span level element. Hope you guys have liked this tutorial; If
you guys have liked this tutorial then do not hesitate to hit that Red Subscribe button
down below. Hope to see you guys in our next tutorial,
till then, bye…

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *