Wednesday, 19 February 2025

Assignments Of Class 11: CSS Display Property

 


Assignments Of Class 11: CSS Display Property



Assignment 1: Block vs Inline Elements

Task:

Create a webpage to demonstrate the difference between block-level and inline elements.

Steps:

1.   Use two <div> elements and two <span> elements.

2.   Apply display: block to one <div> and display: inline to one <span>.

3.   Add a background color for visibility.

Solution:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Block vs Inline</title>

    <style>

        .block {

            display: block;

            background-color: lightblue;

            margin: 10px 0;

            padding: 10px;

        }

        .inline {

            display: inline;

            background-color: lightgreen;

            margin: 5px;

            padding: 5px;

        }

    </style>

</head>

<body>

    <h2>Block vs Inline Example</h2>

    <div class="block">This is a block-level element (div).</div>

    <div class="block">Another block-level element.</div>

    <span class="inline">This is an inline element (span).</span>

    <span class="inline">Another inline element.</span>

</body>

</html>

Explanation:

  • The <div> elements start on new lines and take full width.
  • The <span> elements stay inline, side by side.

Assignment 2: Inline-Block Layout

Task:

Display three boxes side by side using display: inline-block with fixed width and height.

Steps:

1.   Create three <div> elements.

2.   Apply display: inline-block to each.

3.   Set width, height, and add background colors.

Solution:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Inline-Block Layout</title>

    <style>

        .box {

            display: inline-block;

            width: 100px;

            height: 100px;

            margin: 5px;

            background-color: lightcoral;

            text-align: center;

            line-height: 100px;

        }

    </style>

</head>

<body>

    <h2>Inline-Block Example</h2>

    <div class="box">Box 1</div>

    <div class="box">Box 2</div>

    <div class="box">Box 3</div>

</body>

</html>

Explanation:

  • Boxes are displayed side by side.
  • You can control width, height, and spacing with inline-block.

Assignment 3: Hide an Element with display: none

Task:

Hide a paragraph element and explain its behavior.

Steps:

1.   Create a paragraph <p> and apply display: none.

2.   Add another visible paragraph.

Solution:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Display: None</title>

    <style>

        .hidden {

            display: none;

        }

    </style>

</head>

<body>

    <h2>Hide an Element</h2>

    <p class="hidden">This paragraph is hidden.</p>

    <p>This paragraph is visible.</p>

</body>

</html>

Explanation:

  • The hidden paragraph does not take up space or appear on the page.
  • The visible paragraph behaves normally.

Assignment 4: Changing Default Display of Inline Elements

Task:

Convert inline <span> elements into block-level elements.

Steps:

1.   Use three <span> elements.

2.   Apply display: block to the <span> elements.

Solution:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Change Inline to Block</title>

    <style>

        span {

            display: block;

            background-color: lightblue;

            margin: 10px 0;

            padding: 10px;

        }

    </style>

</head>

<body>

    <h2>Change Inline to Block</h2>

    <span>Span 1</span>

    <span>Span 2</span>

    <span>Span 3</span>

</body>

</html>

Explanation:

  • The <span> elements, normally inline, are now displayed as blocks.

Assignment 5: Show and Hide Elements

Task:

Create a button to toggle the visibility of an element using display: none.

Steps:

1.   Add a button and a <div> element.

2.   Use JavaScript to toggle display between none and block.

Solution:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Show and Hide</title>

    <style>

        .hidden {

            display: none;

        }

        .visible {

            display: block;

            background-color: lightyellow;

            padding: 10px;

            margin: 10px;

        }

    </style>

</head>

<body>

    <h2>Show and Hide Example</h2>

    <button onclick="toggleVisibility()">Toggle Visibility</button>

    <div id="content" class="visible">This is a visible content box.</div>

 

    <script>

        function toggleVisibility() {

            var content = document.getElementById('content');

            if (content.classList.contains('hidden')) {

                content.classList.remove('hidden');

                content.classList.add('visible');

            } else {

                content.classList.remove('visible');

                content.classList.add('hidden');

            }

        }

    </script>

</body>

</html>

Explanation:

  • The button toggles the visibility of the content box.

Assignment 6: Combining inline and inline-block

Task:

Create inline links and a box-like navigation menu.

Solution:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Inline and Inline-Block</title>

    <style>

        nav {

            background-color: lightgray;

        }

        .link {

            display: inline;

            padding: 5px 10px;

        }

        .menu-item {

            display: inline-block;

            background-color: lightgreen;

            margin: 5px;

            padding: 10px;

        }

    </style>

</head>

<body>

    <h2>Inline vs Inline-Block Menu</h2>

    <nav>

        <span class="link">Inline Link 1</span>

        <span class="link">Inline Link 2</span>

    </nav>

    <div class="menu-item">Menu 1</div>

    <div class="menu-item">Menu 2</div>

</body>

</html>


Assignment 7: Two Columns with inline-block

Task:

Create two columns using inline-block.

Solution:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Two Columns</title>

    <style>

        .column {

            display: inline-block;

            width: 45%;

            background-color: lightpink;

            margin: 10px;

            padding: 10px;

        }

    </style>

</head>

<body>

    <h2>Two Columns</h2>

    <div class="column">Left Column</div>

    <div class="column">Right Column</div>

</body>

</html>


Assignment 8: Navigation Menu

Task:

Create a horizontal navigation menu.

Solution:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Navigation Menu</title>

    <style>

        .nav-item {

            display: inline-block;

            background-color: lightblue;

            padding: 10px;

            margin-right: 10px;

        }

    </style>

</head>

<body>

    <h2>Navigation Menu</h2>

    <nav>

        <div class="nav-item">Home</div>

        <div class="nav-item">About</div>

        <div class="nav-item">Contact</div>

    </nav>

</body>

</html>


Assignment 9: Vertical List with block

Task:

Create a vertical list of links using display: block.


Assignment 10: Flexibility with Inline-Block

Task:

Create flexible cards that adjust based on the width using inline-block.


Each assignment introduces a specific aspect of the display property, helping beginners practice its implementation. Let me know if you need more detailed solutions for any assignment!

4o

You said:

write solution for assignment 89 and 10

ChatGPT said:

ChatGPT

Here are detailed solutions for Assignment 9 and Assignment 10 with explanations and code.


Assignment 9: Vertical List with block

Task:

Create a vertical list of links using display: block.


Steps to Solve:

1.   Use the <ul> tag to create an unordered list with multiple list items (<li>).

2.   Add anchor tags <a> inside the <li> elements to create links.

3.   Use CSS to make the <a> tags display: block.

4.   Add padding, margin, and background color for better visibility.


Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Vertical List with Block Display</title>

    <style>

        /* Styling the list and anchor tags */

        ul {

            list-style-type: none; /* Removes default bullets */

            padding: 0; /* Removes default padding */

            margin: 0; /* Removes default margin */

            width: 200px;

        }

       

        ul li a {

            display: block; /* Converts inline <a> tags into block elements */

            text-decoration: none; /* Removes underline */

            color: white;

            background-color: #4CAF50; /* Green background */

            padding: 10px;

            margin: 5px 0; /* Adds spacing between items */

            text-align: center; /* Centers the text */

            border-radius: 5px; /* Rounded corners */

        }

 

        ul li a:hover {

            background-color: #45a049; /* Darker green on hover */

        }

    </style>

</head>

<body>

    <h2>Vertical List with Block Display</h2>

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">About Us</a></li>

        <li><a href="#">Services</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

</body>

</html>


Explanation:

1.   The <ul> creates the unordered list with items <li>.

2.   The anchor tags (<a>) inside each <li> are styled with display: block. This makes each link take up the full width of its container, stacking vertically.

3.   CSS properties like padding, margin, background-color, and border-radius improve the look.

4.   The hover effect changes the background color when a user hovers over the links.


Output:

A vertical menu with clickable links:

css

Copy code

[ Home       ]

[ About Us   ]

[ Services   ]

[ Contact    ]

  • Each link appears as a block with a green background and spacing.

Assignment 10: Flexible Cards with inline-block

Task:

Create flexible cards that adjust based on the available width using display: inline-block.


Steps to Solve:

1.   Use <div> elements to represent cards.

2.   Apply display: inline-block to make the cards appear side by side.

3.   Set a fixed width for the cards and allow margins to control spacing.

4.   Add a border, background color, and text alignment for better appearance.

5.   Cards will automatically adjust and wrap based on the screen width.


Solution:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Flexible Cards with Inline-Block</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            text-align: center;

        }

 

        .container {

            text-align: center;

            margin: 20px;

        }

 

        .card {

            display: inline-block; /* Makes the cards align side by side */

            width: 200px; /* Fixed width for each card */

            background-color: white;

            border: 1px solid #ddd;

            margin: 10px; /* Spacing between cards */

            padding: 15px;

            text-align: center;

            border-radius: 8px; /* Rounded corners */

            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        }

 

        .card h3 {

            margin-top: 0;

            color: #333;

        }

 

        .card p {

            font-size: 14px;

            color: #666;

        }

    </style>

</head>

<body>

    <h2>Flexible Cards using Inline-Block</h2>

    <div class="container">

        <div class="card">

            <h3>Card 1</h3>

            <p>This is the content of Card 1.</p>

        </div>

        <div class="card">

            <h3>Card 2</h3>

            <p>This is the content of Card 2.</p>

        </div>

        <div class="card">

            <h3>Card 3</h3>

            <p>This is the content of Card 3.</p>

        </div>

        <div class="card">

            <h3>Card 4</h3>

            <p>This is the content of Card 4.</p>

        </div>

    </div>

</body>

</html>


Explanation:

1.   display: inline-block:

o    Ensures that each card behaves like a block but aligns horizontally (side by side).

o    Allows us to control width and height for each card.

2.   Responsive Wrapping:

o    Cards wrap to the next line if the screen width is small.

3.   Styling:

o    box-shadow adds a slight shadow for a modern card look.

o    border-radius makes the corners rounded.

o    Margins control spacing between cards.


Output:

Cards are displayed side by side, and they wrap as the screen size gets smaller.

css

Copy code

[ Card 1 ]  [ Card 2 ]  [ Card 3 ]  [ Card 4 ]

On smaller screens:

css

Copy code

[ Card 1 ]  [ Card 2 ]

[ Card 3 ]  [ Card 4 ]


No comments:

Post a Comment

Search This Blog

Powered by Blogger.