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