Display Property in CSS

Hello guys! Welcome to our series, CSS. In our last segment we had seen about CSS’s Border property.

We have almost covered properties related to the border, and the image that is applicable with the border and linear gradient also covered in the last topic.

I hope whatever we had covered in our last  session, you would have performed the practicals and I hope that you have even practiced.

If at all you face any challenges or difficulty in performing the practicals, You can write to us on forums.learnvern.com.

We will try to solve your issues at the earliest and try to revert to you.

We will go ahead with our today’s segment.

Our today’s segment is on display property of CSS. Display properties, mostly all the elements that we place in our webpage.

In which way we can show that. Every element, how we can display it on the front end.

It depends on this property.

So, if we see the CSS display property, as shown in the ppt.

CSS display is the most important property of CSS which is used to control the layout of the element.

Means how much every element we place in our web page.

After placing all those elements, how will our layout look?

For that we normally use display property.

In some cases, our elements are there.

If we talk about header or navigation bar.

We will show it on horizontal bar

Our different sections that are there.

Let’s say sidebar, we keep it on the side vertically or horizontally.

But normally the side bar is vertical.

So, here we keep a few things horizontally and few things vertically.

Some things we are placing next to one element.

So, the web page that is there, in its different areas we place the different elements and try how our web page will be.

We design the layout of our webpage.

So, to design this layout the CSS properties that is important is CSS’s display property.

So, in this display property, like they have shown here, CSS Display Value, means the different types of display properties that are available are display inline, then inline block, block, none and flex.

These 5 properties that have been shown are the 5 most used properties of display.

As many layouts that we design, all these layouts are a combination of all these 5 properties or by using individual properties.

Mostly they are made this way. Outside the new properties that are included, even those we will see but they are less used.

Mostly the web pages that are made, those are made using these 5 properties.

So, we will see each one of these properties one by one in today’s segment. (Pause)

The very 1^st display property is the inline property.

Like it is written over here.

The inline elements take the required width only.

It doesn’t force the line break so the flow to text doesn’t break in the inline example.

This means that when we give inline display property to any element.

It covers only till the width of the element.

Rest of the portion leaves for another element.

If we check the same thing with an example.

Let’s say we open our Sublime text.

So, this is our Sublime text and in that we will set html, “Example Display property”.

This would be our program’s name. Okay, display.html.

We will save the program and now we will run the program.

So, in the web page our program is running. So, what was written in our slide.

The inline element takes the required width only.

If we know the heading tag, in h1 “This is a Heading tag”. Okay. I saved this and I ran it here.

So, here I can see my heading tag.

I will zoom into it. Okay. This is a heading tag. If we have to check.

How much space is the heading tag occupying, so for that I will add a CSS here.

H1, background color, let’s say if I select red.

 As soon as I selected the background color as red, you can see that it starts from here and goes till here.

Means my heading tag is there, where my content is getting over.

Means my content that is there, means if we see in code “This is a heading tag” Means with the g of the tag my content gets over.

So, here my content is getting over but how much space did the heading tag occupy?

It had occupied the entire row.

Means our heading tag that is there, how much every row is there, means the width of the screen. It occupies that much space.

So, this is the inbuilt property of the heading tag, however is the screen size, it will occupy 100% width.

Now we will come to the slide.

In the slide they have mentioned, inline elements are span, a, em and b. Let’s say here, after the br tag, I add a span “This is a Span”.

After that if I include a tag here “This is a Link”.

And I save this. As soon as I run this you can see that, my span and my anchor tag elements, they both have come next to each other.

Means they come next to each other.

For example, we see to check how much space it occupies.

I will give it a background color, background color blue or else we will give a light color like light-green.

And for a we will take the background color…

Now, you can see here that span occupies the space as much as green is visible in the background.

And the link occupies as much space as the cyan color is visible.

So, you can see that both my elements are coming next to each other.

Means the property of heading tag is such that it occupies the entire space while our span and a tag are such properties which will occupy only that much space, depending on how much content we put in it.

After that as soon as the content gets over, the next element is coming next to it and starting.

This property of starting the next element from the side.

In one row multiple elements together, means the property of placing inline.

That is called display inline property.

If I want to give this property to more than one element.

How can I do that? If we come to the slide.

You can see in the slide that span, a , em and b.

These are such properties which we can give inline.

Now all these properties we are going to see in the example list.

The reason for this is. You have seen that span, a, em, these are such elements which are placed next to each other by default.

Like you can see in the output. So, we will put our display properties on such elements where such default property is not there but with the help of display, we will set these properties and then show the elements.

For that we will take an example.

Let’s say this was for an explanation, above this we will add a comment “Explaining Display property” Okay, now we will comment this as well.

Now, we will start here with one list.

Means ul. Now, let’s say that we take a week like Monday, Tuesday, Friday.

Like I am taking here, in li, let’s say we are taking Monday. Okay, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday and we will mention Sunday up.

We will save it. And when we run it, this is our default property.

Whenever we add li, it means we add a list item.

So, it is seen in this way to us by default.

One below the other.

We can see it in the list.

Now, let’s say that I don’t want these bullet items.

For that what will be the property that I will add? So, for ul we have one property, ul, list, style, type. List, style, type means which type of icons do we need.

Let’s say that I don’t want any icon.

I will give a list, style, type as none and I save it.

So, my bullet points are going away.

Now, what I want is I don’t want all my list one below the other.

I want to keep them next to each other.

So, let’s say, now I will do one thing, I will give property to my list, display, inline. Save, run.

As soon as I add display inline property, my list which was there, which was coming one below the other.

Instead of that they are sitting next to each other.

Means from what we are learning, the thing to learn is that the default property of list is that, it throws down the next property of list.

It will not allow next in the row, meaning after giving break property, the new item will start from down.

But we are setting the week days in line by giving display properties.

So, if you want to change the default property and keep it inline.

You can give the display this way inline.

So, this was our example.

We will give it a heading, let's say h1, weekdays and if I make it in center, for a proper view, text align, center.

Okay, so these are the weekdays that have come.

This 1^st example of ul, li, this is of inline.

So, this is our inline example, display, inline property and we will comment on it.

Which indicates that this ul, li that is there, has been set by our display inline property.

So, we are seeing it in this way.

Now we want that our another ul, should be from some other properties.

So, we will go on a slide.

We saw the inline property, now our next property is inline-block which indicates the CSS inline-block element is very similar to inline.

Means the way the inline is there, same way inline-block is there but you are able to set the width and height.

Means in this case we can set the height and width manually.

So, if we see an example for this, how would it be? So, 1^st of all we will go into the code and the example that we have taken here, that same we will copy and paste there and here we will write an inline block.

And we give block property to this ul. So, in one web page there are 2 uls available to us.

We can differentiate them with an id or with the class.

Like I give id to the 1^st ul “display-inline”, with which our one id will be generated.

To this ul I will give #display inline property. And here also the same… sorry here it will come ul, because we have to keep all uls the same thing.

So, here will come my display inline and the li in it, we will give display inline property to it. Okay. Save and reload.

So, this is our 1^st as it is and this is our 2^nd which we have just generated, we can see it here.

Now we will give it inline block property.

For that we will generate the class here or I will generate the id. ID, display, inline, block, copy and we will give id here #display inline block and in it’s li we will write, display, inline, block properties, save and run.

Okay. Now, the output that we are getting in line, the same output we are getting here.

So, what is the difference? So, let’s say here, the items that are there, we will increase it more. Okay.

So, same week I am writing again.

So, my list item is 14 instead of 7. I will reload it now.

What is happening here? Where my screen width is getting over from there my elements are jumping in the next line.

It is breaking from here and starting from the next line.

So, this is our example of an inline block, meaning all those elements would be set inline, till when, till our screen’s width doesn’t end.

As soon as our screen width gets over.

Our next elements start from a new line. So, the 1st line will have inline property and from here block property means throwing elements in the below line.

So, from here it is jumping in the next line. Okay, so this was an inline block example.

Now we will see which is our next example.

1^st was our inline property; this is our inline block property.

Next is our block property.

Block property means how many elements we keep, all those will not be next to each other but next to next, means 1^st element will occupy the whole row, then the row after that, in which the 2^nd element will come and the 3^rd row which will have the 3rd element.

Means every element will work as a block.

The CSS display block element takes as much horizontal space as they can.

Means how much is the width of our screen, that much 100% width our element will occupy.

So, for that I will generate the same again. Here will come the display block.

Okay. With this id, even here will come display inline. Commenting is very important as our user gets to know for what this code has been written.

Now in CSS here, #, display, block. Reload.

The default property which was there of ul, li, means list items, that is default but we are raising it more default than block.

In li, every element jumps down.

So, that is the default property of li.

Now the block property is getting available here or not, how we will get to know. So, let's say I will replace this ul, li with p.

So, let’s say I write here, p tag, in which I will add, Sunday, p tag, Monday, Tuesday, Thursday, Saturday, Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday. Okay.

Let’s say I comment this portion. I run it.

So, what is happening here is that my p tag is getting applicable.

Means each p tag is visible here. p tags also use inline block property itself. But for our p, like it is seen in the output.

P is also using block property. If we replace all the Ps with span.

Okay, we will save and run it.  Okay.

Now we are getting our elements in one line.

Now, the elements that we are getting in line, on which we will apply our block property.

So, Let’s say I take all the spans in one div. Okay, these are my spans.

Save. Now to this division I will apply our display block property.

You can see here that our block property has not been applied.

So, what will we do for it? We will go to the display block, we have taken li, in its place we will make it span. Okay.

So, like it is seen now, span, whose default property is that it will occupy the entire screen width.

In that place or span is throwing every element in the next line.

Means it is throwing it down.

So, this is our property, that is our default behavior which is there of span.

We have changed the default behavior of span with the help of display block.

So, you saw that every element is coming in a new line.

If in this place…like we have commented li in the example, to ul, li. If we use that thing then li gives everything that property by default.

So, we have not used li here.

We have used span, whose default property is inline but externally we have given it a block display and generated this example.

So, we can get to know how the block property works. Okay.

Now, we will go into our slide. This was our block.

Now is our none. Display none, means what we can do to hide our element.

So, let's say that we generate one example. Okay.

This was our display block example and this will be our display none example.

Let’s say for none, we take, div, “This div is visible”, “This div is hidden”. Okay.

If we run this. Then we are getting 2 divs here.

This div is visible and this div is hidden.

I will apply a few br tags here. So that we can get some distance here.

This div is visible and this div is hidden.

So, the hidden one is also visible to us. We have to hide this.

So, for this which would be our property? Style. We can do it in two ways.

We can give it inline as well as up, internal.

Let’s say I apply it with inline, style, display, none.

Now, my hidden portion is not visible but the visible one, we can see.

That means with the help of display property we have hidden a div.

With the help of display none property.

So, this was how display none works. Now is our very important Flex property.

Like it is mentioned here It is used to display an element as a block-level flex container.

It is new in CSS3.

Means this display flex property that is there, that was introduced under CSS3.

Before CSS3 this property was not available.

Like you saw in inline, when we use inline, at that time our elements are placed next to each other.

In flex our elements are placed next to each other but in this our flex box is used.

Now the question will come about what a flex box is.

In flex box what happens is if we are generating any division, let’s say we are generating some division, the division property is of block.

Because of the block they will drop each other.

What will happen with flex, like it is generated under table.

When we generate a table of more than one column.

At that time the property that is there on the table, similar property is given to display flex.

That places our element as a table column.

If we see its example. Let’s say, we will generate it’s example. “This is an example of display flex”, now let’s say I will generate a few divisions here.

Now, let’s say I write in this division, 1, 2, and 3. I have taken 3 numbers here.

Okay. So, I am getting 1, 2, 3 numbers here.

The 2 br tags that I had taken here, I will apply it here as well. Save, okay.

So, my 3 numbers have come. Now, I want these numbers to be arranged next to each other.

But along with that I want to give it some property like I want to give it some padding, border and generate a property table.

So, let’s say I use this div.

I will keep these 3 divs in one div. Save, reload, okay.

Now, I have to give some padding and margin to them and generate something proper.

Let’s say I give this main div a class, display, flex.

Now we will define this class here.

Class as we know, starts with a period. So, display flex.

In class we will have to define the div. So, for the divs coming under display flex.

For them let’s say I give padding, 10px, background color, white, border 10px, solid, light green, save.

So, you can see here that 1, 2, 3 are visible in this way. Along with it I will give a text align center.

So, we can see 1, 2 and 3. But I want them to come next to each other, which means that they should be set under a column.

So, for that I will give one property to display flex class. Not to the div, to display flex.

That is display, flex and reload.

Now, you can see that all my 3 divisions that were there which were occupying 100% width, now they are not occupying 100% width, based on the browser width they are standing next to each other.

Means they are being placed next to each other.

It means when we have to adjust any element column wise.

In that case we use display flex property. Inline is almost the same, inline block is also the same because in that the property comes down.

It means where our content gets over, from there it is thrown down.

It is not like an inline block; it is almost like inline but inline columns don’t get generated.

In flex you can see that the columns are getting generated.

So, whenever we work with a web page. In the webpage when we generate a block.

So, the flex property generates the layout for block things.

If it is text, it will place it inline like this.

If we want a table like view, for that it generates a table view.

So, we can say that the flex can be used in multiple ways.

So, flex is important when we design any layout.

When we are designing any layout, with the help of flex, many things we can take fast, especially when we work with more than one device.

Let’s say, if there is a desktop, it has got a certain screen width, then comes the tablet, then comes the phone.

If the desktop and mobile screens are compared, they are very different.

The way things are visible on desktop, they are not visible the same way on mobile.

There is a little bit of difference in it as in mobile we have to place the things one below the other.

When we want that kind of approach.

So, that our content and design do not get spoiled.

It should be able to be used properly the way it has to on the desktop and on the mobile, it should be fit in screen size.

In that case the inline or inline block doesn’t work.

In that case flex becomes useful because it provides us with a grid, like a table grid.

That is the reason flex boxes are a very important property.

Now we will go into our slide. We have seen a total of 5 properties today.

Inline, inline block, block, none and flex.

All 4 properties are very important in display.

Whichever layout we have to generate that we can do very nicely with the help of these 5 properties.

So, guys today’s practical that we have performed, I request that you should perform it yourself.

Whatever has come in today’s segment, try it on your own.

if you are having any difficulty working with display property or there is something that you have not understood in today’s segment.

You can tell us about it on forums.learnvern.com.

We will rectify your issues at the earliest and revert to you.

Our next segment will be on CSS’s Position Property.

Thank you.