Explore Display Properties in CSS

Introduction

In this lab, students will explore the fundamental CSS display properties that control the layout and visibility of web elements. Through a series of hands-on exercises, participants will learn how to manipulate block, inline, inline-block, and none display properties, gaining practical skills in structuring and managing web page layouts. The lab covers key concepts such as understanding how different display properties affect element positioning, creating navigation menus, and controlling element visibility, providing a comprehensive introduction to CSS layout techniques.

By working through practical examples and code demonstrations, learners will develop a solid understanding of how display properties impact web design, enabling them to create more flexible and responsive web page layouts. The step-by-step approach allows students to progressively build their knowledge, starting from basic block-level element characteristics to more advanced display property implementations.

Understand Block Display Property

In this step, you will learn about the block display property in CSS, which is a fundamental concept for controlling the layout of web elements. By default, many HTML elements have a block-level display property.

First, let's create an HTML file to demonstrate block display properties. Open the WebIDE and create a new file named block-display.html in the ~/project directory.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Block Display Property</title>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
  </body>
</html>

Key characteristics of block-level elements:

They always start on a new line
They take up the full width available by default
They can have width, height, margins, and padding properties applied
Block elements stack vertically one after another

Let's verify the file contents:

cat ~/project/block-display.html

Example output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Display Property</title>
    <style>
        .block-element {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
</body>
</html>

Common block-level elements include:

<div>
<p>
<h1> to <h6>
<section>
<article>
<ul> and <ol>

Apply Inline Display Property

In this step, you will learn about the inline display property in CSS, which allows elements to flow horizontally and only take up as much width as necessary.

Let's create an HTML file to demonstrate inline display properties. Open the WebIDE and create a new file named inline-display.html in the ~/project directory.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline Display Property</title>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
  </body>
</html>

Key characteristics of inline elements:

They flow horizontally in the same line
They only take up as much width as necessary
Width and height properties do not work
Vertical padding and margins have limited effect
Cannot set width and height directly

Let's verify the file contents:

cat ~/project/inline-display.html

Example output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Display Property</title>
    <style>
        .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
            margin: 5px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
</body>
</html>

Common inline elements include:

<span>
<a>
<strong>
<em>
<img>

Implement Inline-Block Display Property

In this step, you will learn about the inline-block display property in CSS, which combines the best features of both inline and block-level elements.

Let's create an HTML file to demonstrate inline-block display properties. Open the WebIDE and create a new file named inline-block-display.html in the ~/project directory.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline-Block Display Property</title>
    <style>
      .inline-block-element {
        display: inline-block;
        background-color: lightsalmon;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
  </body>
</html>

Key characteristics of inline-block elements:

Flow horizontally like inline elements
Can have width, height, padding, and margins like block elements
Allows precise control over element sizing and spacing
Useful for creating horizontal layouts like navigation menus or image galleries

Let's verify the file contents:

cat ~/project/inline-block-display.html

Example output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline-Block Display Property</title>
    <style>
        .inline-block-element {
            display: inline-block;
            background-color: lightsalmon;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
</body>
</html>

Common use cases for inline-block:

Creating horizontal navigation menus
Designing image galleries
Aligning elements side by side with precise control

Use None Display Property for Element Hiding

In this step, you will learn about the display: none property in CSS, which completely removes an element from the page layout, making it invisible and taking up no space.

Let's create an HTML file to demonstrate the none display property. Open the WebIDE and create a new file named none-display.html in the ~/project directory.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>None Display Property</title>
    <style>
      .visible-element {
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
      }

      .hidden-element {
        display: none;
        background-color: lightgray;
        padding: 10px;
        margin: 10px;
      }

      .toggle-button {
        padding: 5px 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">
      Toggle Hidden Element
    </button>

    <script>
      function toggleElement() {
        var hiddenDiv = document.getElementById("hiddenDiv");
        if (hiddenDiv.style.display === "none") {
          hiddenDiv.style.display = "block";
        } else {
          hiddenDiv.style.display = "none";
        }
      }
    </script>
  </body>
</html>

Key characteristics of display: none:

Completely removes the element from the page layout
Element takes up no space
Different from visibility: hidden (which keeps space but makes element invisible)
Useful for dynamic content hiding and responsive design

Let's verify the file contents:

cat ~/project/none-display.html

Example output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None Display Property</title>
    <style>
        .visible-element {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

        .hidden-element {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
        }

        .toggle-button {
            padding: 5px 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">Toggle Hidden Element</button>

    <script>
        function toggleElement() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Common use cases for display: none:

Hiding elements conditionally
Creating responsive menus
Managing dynamic content visibility
Implementing dropdown and toggle interfaces

In this step, you will create a horizontal navigation menu using display properties learned in previous steps. This practical example will demonstrate how to use inline-block display to create a responsive and clean navigation layout.

Let's create an HTML file with a navigation menu. Open the WebIDE and create a new file named navigation-menu.html in the ~/project directory.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Menu</title>
    <style>
      .nav-menu {
        background-color: #333;
        padding: 10px;
      }

      .nav-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu li {
        display: inline-block;
        margin-right: 20px;
      }

      .nav-menu a {
        text-decoration: none;
        color: white;
        font-family: Arial, sans-serif;
        transition: color 0.3s ease;
      }

      .nav-menu a:hover {
        color: #ffd700;
      }
    </style>
  </head>
  <body>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

Key techniques used in this navigation menu:

display: inline-block for menu items
Removing default list styling
Adding hover effects
Creating a horizontal layout

Let's verify the file contents:

cat ~/project/navigation-menu.html

Example output:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>
    <style>
        .nav-menu {
            background-color: #333;
            padding: 10px;
        }

        .nav-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .nav-menu li {
            display: inline-block;
            margin-right: 20px;
        }

        .nav-menu a {
            text-decoration: none;
            color: white;
            font-family: Arial, sans-serif;
            transition: color 0.3s ease;
        }

        .nav-menu a:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Best practices for navigation menus:

Use semantic HTML5 tags like <nav>
Keep the menu structure simple
Ensure good readability and accessibility
Add hover and active states for better user interaction

Summary

In this lab, participants explored CSS display properties, focusing on understanding how different display values affect web page layout and element behavior. The lab began by examining block display property, demonstrating how block-level elements occupy full width, start on new lines, and can be styled with margins, padding, and borders. Participants learned about common block-level elements like <div>, <p>, and heading tags, and how they naturally stack vertically in a document.

The subsequent steps guided learners through applying inline, inline-block, and none display properties, providing practical insights into controlling element rendering and visibility. By creating practical examples and experimenting with CSS styles, participants gained hands-on experience in manipulating element display characteristics, ultimately understanding how to create more flexible and responsive web page layouts using CSS display properties.

Explore Display Properties in CSS

Introduction

Understand Block Display Property

Apply Inline Display Property

Implement Inline-Block Display Property

Use None Display Property for Element Hiding

Create Navigation Menu with Display Properties

Summary