Hello, in this CSS Crash Course video, we're going to be looking at this light types of turn. Now we, we discussed display types in terms of a span has an inline display type a div, by default has a block display topics. And those are the display types that are automatically added to a particular element by default. So if you forward to have two divs, one will be on one line one will be on the other line regardless of how much content was inside the way, whether were defined to span tags, because they were inline elements they will be next to each other, but we can force one particular type of tag or a element that has a class or an ID to be a different type of to display differently the third display type as well called non offending guess what that does, it just doesn't display any Anything.

So what we're going to do is, first of all, put two span tags here. And inside side here, I'm gonna put one for a class of copy and paste that changes to save that refresh page. And let's see what we get. We have a display type of inline. So for right click inspect, then go to any of these. And it's not actually showing here, but basically they have a display type of in line hence why they are on the same line.

But we're going to override that by going to a class a CSS and putting dot lock. So this will change the CSS for any of these. I'm going to put this delay, hold on, and now we're going to put blog Remember, by default it's in line, but now when to put block refresh, and as you can see, they are on separate lines, they're acting very similar to how a div would. Next what we're going to do is put two divs our thing keys and guess what we're going to be doing here for two divs with a class of in line for the hour, just put Hello. Copy and paste this toy world. Save that for go back refresh.

Both of these are on two separate line because the div tags have a display type of block by default, but we're gonna override that by going to our CSS by putting.in nine. So Thomas all elements with the class inline, we're going to put display colon and line save it, refresh and as you can see the two divs on Now in nine, so they're on the same line with a span of a block. And the final display I'm going to show you is the nine. So if we put a div with a class of non for a text, new, save that refresh, as you can see, it appears because we haven't applied the CSS yet. So let's do dot non display. Not save it, refresh.

It's no longer appeared, as you can see. But the other thing I want to show you is what happened if I were to put a div tag here, and I would put say, you we don't really matter what's in there so far, the sidebar, and I'm just going to get rid of this class for a moment. Refresh. No. And you are on two separate lines you is here for the gap between HelloWorld. And you watch what happened when I put the non class.

Not only does it make it invisible, it actually prevents it from affecting the structure of our document. So you wish would have been roundabout here before is now where the no textbook isn't. This isn't the same as setting visibility to false for example, it's actually not only hiding it is getting rid of it from the sort of the physical website, if you will. So that is it for display types in CSS. If you have any questions, feel free to post them on my education platform, sonar learning.co.uk. There will be a link with this video which will take you to the source code from every video in this series.

If you log in Video Please let us know if it didn't pay off now as well and as usual, thanks for watching and I hope you have a great day.