Display None CSS | CSS Tutorial (2023)

Introduction

Display None CSS | CSS Tutorial. In this CSS tutorial for beginners we will explore how to use display none and why this differs from visibility hidden. As they have two different functions.

This is a CSS Tutorial Series. It is designed to give you solid foundation of understanding CSS and their properties. We use many of those options but many struggle to truly understand how they work. From my own experience I notice that understanding this is crucial so I did not needed to "guess" what would happen. Understanding exactly what certain items such as display flex did helped me alot in my coding journey.

This series is for people who know the basics of CSS but now want to know exactly what those commands do and how a DIV would respond based on the commands. Let's start an explore the CSS tutorial!

Got a question or special request about a specific item in CSS 3? Comment below and tell me your question. I will make sure to follow up on you!

Interested to learn about how to create charts? Check out below!

⭐ Chart JS Udemy Course ⭐:
Enjoy this video and want to dive deeper in a real useful Chart JS Training? Check out my Chart JS course on Udemy, click this link: www.udemy.com/course/chart-js/

Chart JS tutorials for Beginners:
🎓 Beginners Serie: www.youtube.com/watch

Chart JS tutorials for Intermediate:
👁️ Most Watched Chart JS Video: www.youtube.com/watch
⭐ Personal Favorite Chart JS Video: www.youtube.com/watch

Chart JS Dashboard Series:
👍 Most Liked Video Series:
Watch Part 1: youtu.be/l3MnVpiHXBU​​
Watch Part 2: youtu.be/fDUo-LbrRSo​​
Watch Part 3: youtu.be/xlt5dDa8rz4

Why did I created these Chart JS video tutorials?
Have you ever used Excel where charts appear almost magically with a click on a button. You notice if you look at a chart or graph you can absorb information within seconds which would take you minutes if it is a table with data.

"A picture is worth a thousand words"

We all know that pictures and colors spark the mind. However, if you try to draw or code a 📊 bar chart or a 📈 line chart, or any type of chart in a Javascript library it is a big challenge. The documentation makes it hard and the it is very hard to work with a canvas tag.

Ancient Egypt used hieroglyphs in their writing system. Which was both logical and creative at the same time. And this is why I love charts as well. A chart is the closes to translating logic into visuals. Making the chart interactive is the best way to communicate your message to others.

If we know about this why is coding charts so complicated?

Because computer programming language is based on 100% logic. This is why when you look at Chart.JS, D3.JS, Chartist and other chart libraries in JS you will need to basically explain in logic to a computer what to make visual.

How and where can I help?

My goal and focus is on creating easy to understand Chart.JS videos so you can start using Chart JS in all your website endeavors making Chart.JS a topnotch and leading JS library for the years to come. Just like any programming library once more people use Chart JS it will attract more people to contribute and grow. The videos on Youtube and my complete course on Udemy are here to give a helping hand.

Seeing Chart.JS evolve from Chart.JS 1.0 to Chart.JS 3.0 and with their currently new expansion to Chart.JS 3.0 we can expect more new exciting charts in the near future.

About Chart.JS 3 | Chart JS 3
Chart JS is one of the most use Javascript libraries for the drawing charts. It is designed to create charts in the canvas tag which is great but at the same time slightly challenging for most people. However, knowing how to draw a chart will give you a big edge and most dashboards are consistently adding charts along data tables. Chart JS makes your data more alive and visually more appealing.

What type of charts can you make with Chart.JS?
With chart js you can make line chart, bar chart, pie chart, doughnut chart, scatter chart, polar area chart, radar chart, gauge chart and area chart. And with some clever tricks and visual adjustment more can be done.

css, css tutorial, css tutorial for beginners, css 3
#css

Content

In this video we're going to explore how you can use display non-r.

Well, this is a very straightforward video, especially if you're very beginner.

This is a useful for you to understand display.

Now so display num is a standard css called to hide a specific item.

So let me show you so let's give a demo here display.

So we can say here, diff, you create a diff, uh, let's say, a class.

And then we have box one.

And then we have another one here, let's copy this.

Now we can just put them all together.

It doesn't matter.

And then we say here, diff as box number two, all right.

So we have two of these items here.

So what we're going to do here in cs as we're going to first assign them, but let's say here, the following we'll say here box one or class box one and in box one, we have a uh background, I'll, give it a simple background, color of triple three all right, that's number one.

And then we say here, padding 30 pixels.

And finally here, another one, we say box number two.

And this one will be triple nine and the padding here will be 60 pixels that will be far bigger.

So once we save this and refresh, you can see here.

Now we have the items here with display.

Now, basically, you are hiding it, but you're, hiding it.

Not by not being not only not show your customers, but it's also not being considered as a part of the css, or as the code for google.

Google will not calculate this.

And also, if you have like certain items that are not that are using hide like and input, it will also not read those.

This is very important to remember.

So let me show you exactly here.

We have here display.

And then we say display, none once we do this and we refresh, you can see now it doesn't show it at all.

If you open up our developer tab, you can see here.

It doesn't show here.

Well, it shows this, but it doesn't show at all it's, not really considered as it because it's being as a display.

Now, the moment it's active.

It shows here.

So what happened if you would have another item here? So don't confuse this with visibility because visibility will maintain its position.

So let's put in here.

Another box box, number three and then I'm going to show you after visibility, then the background, and this background will be.

I give it a nice unique color.

I have no idea what color this is, but we'll see padding let's say, padding 4 40 and then display that that's all right.

And once we refresh, you can see now it's being shown here.

So if you would just comment this out, you will see, this will just jump down all right.

So what happened if you say, instead of displacing visibility, they say, hidden, then you'll see the css will respond differently.

So what happened now is you have here a gap in the code because now the search engine or the browser really sees it and recognize it still it's hidden, but it's, not being it's.

So basically, it's being displayed in a way that is not visible.

I hope that makes sense.

So it works exactly the same.

Uh.

It consumes the same amount of space it consumes, basically, the entire part here.

And the other divs will makes will calculate the hidden or the hidden space here, the invisible space.

So basically this box is invisible, but it's, still still there.

So that's, why the visibility is known as could be like 100.

Transparency visibility is this is none, but or visibility is hidden so mean that you don't see it, but it's still there with display.

Now it is completely not being considered.

So if you have an input when you use hidden, it will be still used, or it will still be able to get the data.

But if you use display none on the input box, and you would submit that the display none field will not be shown very very important to know.

This is why if you have an input, which shows here like this input, let's say your input, and then we say here type say here, text, all right now you have another input.

And this input is considered hidden all right.

So if you have this here, you'll see here an input do we see the other one? We don't see the other one so let's put this on text.

First, refresh you see we have two here right now.

So if we select this and we say here, instead of type, you say, hidden, oh, you have to make sure it's correctly, hidden it's, still there.

It still calculates the value by displaying none.

If you say here, then, and then we assign the input here to display none, and you will submit that form only this value will be selected.

This is why you use input type hidden here to extract still data.

But you don't want to show it to your customer.

For example, you have an affiliate, an affiliate gets the the commission.

But you don't want to show the customer when they put an input where they save that the affiliate code will be stored as well.

Because this is usually with an affiliate is quite common.

Then it says here, maybe here value equals affiliate, uh, affiliate id.

One, for example, I have no idea I'm just making up some code.

What happened is here let's.

Look at this.

We go here to a hex text, hidden the affiliate here is still being shown it just doesn't show here in here for the customer for those purposes.

So very very important so it's quite long for basically for something very straightforward.

But I want you to understand these differences.

This can be useful for you.

And then you also understand why we're using type hidden visibility, hidden and display not because this display now it's not being considered, but if you visibility hidden and which many before those uh search engine, spammers are trying to do all kind of tricks by putting your keywords.

And then they would say visibility hidden or or they did the trick of making the background color, almost hard to read or similar with the font color of the the keywords that they were using.

And it worked until google figured that out.

And then you get punished.

It was these were all kind of tricks, but if you would do display, none, it will not work, and it will not be considered as well.

So this is very very important to understand.

So if you have any questions like this, but I think this is quite straightforward, put them in the comments section below and I'll make sure I get back to you.

Thank you for watching this video.

And I hope you enjoy it.

And if you enjoyed this video, you probably will enjoy this one as well.

And if you're interested in chart, yes, check out in the description box, the link directing to my chart.

Js course where you can learn everything about charges.

And finally, of course, make sure you subscribe to my channel.