Display: none
The display: none property setting is used when you want to hide the element from the screen. This is often used with JavaScript. For example, for a membership website, you may want to show special content only for members and hide the content for guest users. To implement this, you can change the display property to none when the user is a guest user.
Practice
Objective:
Check how display: none works
1. Update the body section of the HTML file
Add the code below in the <body> section of the chapter13.html file. We use the bg-only class set in the previous chapter.
<h2>display: none</h2>
<h3>Original</h3>
<div class="bg-only" style="background-color: red;"></div>
<div class="bg-only" style="background-color: green;"></div>
<div class="bg-only" style="background-color: blue;"></div>
<h3>Display: none for Green</h3>
<div class="bg-only" style="background-color: red;"></div>
<div class="bg-only" style="background-color: green; display:none"></div>
<div class="bg-only" style="background-color: blue;"></div>
2. Check the result with a browser
- Open chapter14.html with a browser.
- You can confirm that the green box with
display: noneis not displayed in the browser.
You can also check the sample result here (Demo Site 
).
demo codeThe display: none property setting is used when you want to hide the element from the screen. This is often used with JavaScript. For example, for a membership website, you may want to show special content only for members and hide the content for guest users. To implement this, you can change the display property to none when the user is a guest user.
Practice
Objective:
Check how display: none works
1. Update the body section of the HTML file
Add the code below in the <body> section of the chapter13.html file. We use the bg-only class set in the previous chapter.
<h2>display: none</h2>
<h3>Original</h3>
<div class="bg-only" style="background-color: red;"></div>
<div class="bg-only" style="background-color: green;"></div>
<div class="bg-only" style="background-color: blue;"></div>
<h3>Display: none for Green</h3>
<div class="bg-only" style="background-color: red;"></div>
<div class="bg-only" style="background-color: green; display:none"></div>
<div class="bg-only" style="background-color: blue;"></div>
2. Check the result with a browser
- Open chapter14.html with a browser.
- You can confirm that the green box with
display: noneis not displayed in the browser.
You can also check the sample result here (Demo Site ).
