Lecture Notes Of Class 11: CSS Display Property
Objective:
Learn to control how elements are
displayed on a webpage using the CSS display property.
Introduction
to the Display Property
In CSS, the display property
is used to determine how an HTML element is displayed on the webpage. Different
elements in HTML have default display behaviors:
1. Block-level
elements (e.g., <div>, <p>, <h1>) start on a new line and take
up the full width of their container.
2. Inline
elements (e.g., <span>, <a>, <strong>) appear on the same line
and only take up as much width as needed.
With the display property, you
can override these default behaviors to control layout and spacing.
CSS display
Values
The most common values for the display
property are:
1. block
2. inline
3. inline-block
4. none
Let’s explore each value with
detailed explanations and examples.
1. display:
block
- Definition:
Elements with display: block start on a new line and take up the full
width of their container by default.
- Examples
of block-level elements: <div>, <p>, <h1>
to <h6>, <section>, <article>.
Syntax:
css
Copy code
div {
display: block;
}
Example Code:
html
Copy code
<!DOCTYPE
html>
<html>
<head>
<title>Display: Block Example</title>
<style>
.block-example {
display: block;
background-color: lightblue;
margin: 10px 0;
padding: 10px;
}
</style>
</head>
<body>
<div class="block-example">This
is a block-level element.</div>
<div class="block-example">Another
block-level element.</div>
<p class="block-example">Paragraphs
are block-level by default.</p>
</body>
</html>
Output: Each <div>
and <p> starts on a new line and takes up the full width of the browser
window.
2. display:
inline
- Definition:
Elements with display: inline do not start on a new line. They only take
up as much width as necessary.
- Examples
of inline elements: <span>, <a>, <strong>, <em>.
Syntax:
css
Copy code
span {
display: inline;
}
Example Code:
html
Copy code
<!DOCTYPE
html>
<html>
<head>
<title>Display: Inline Example</title>
<style>
.inline-example {
display: inline;
background-color: lightgreen;
padding: 5px;
}
</style>
</head>
<body>
<span class="inline-example">This
is an inline element.</span>
<span class="inline-example">Another
inline element.</span>
<a class="inline-example">Links
are inline by default.</a>
</body>
</html>
Output: All <span>
elements and <a> tags appear on the same line.
3. display:
inline-block
- Definition:
Inline-block elements are similar to inline elements but allow you to set width
and height.
- Key
Difference: Unlike inline elements, inline-block elements
respect box properties (e.g., width, height, padding, margin).
Syntax:
css
Copy code
div {
display: inline-block;
}
Example Code:
html
Copy code
<!DOCTYPE
html>
<html>
<head>
<title>Display: Inline-Block Example</title>
<style>
.inline-block-example {
display: inline-block;
background-color: lightcoral;
width: 150px;
height: 50px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="inline-block-example">Box
1</div>
<div class="inline-block-example">Box
2</div>
<div class="inline-block-example">Box
3</div>
</body>
</html>
Output: Each box
appears next to each other (inline), but their width, height, and spacing are
applied.
4. display:
none
- Definition:
Elements with display: none are not displayed on the webpage at
all. They do not take up space in the layout.
- Use
Case: Hiding elements temporarily (e.g., toggling
visibility with JavaScript).
Syntax:
css
Copy code
div {
display: none;
}
Example Code:
html
Copy code
<!DOCTYPE
html>
<html>
<head>
<title>Display: None Example</title>
<style>
.hidden {
display: none;
}
.visible {
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="hidden">This
element is hidden.</div>
<div class="visible">This
element is visible.</div>
</body>
</html>
Output: Only the
visible element is displayed. The hidden element does not appear at all.
Summary
Table: Display Property
|
Value |
Description |
Default
Example |
|
block |
Starts on a new line, takes
full width. |
<div>, <p> |
|
inline |
Appears on the same line,
respects content width. |
<span>, <a> |
|
inline-block |
Appears inline, but allows
width/height adjustments. |
Custom elements |
|
none |
Hides the element completely. |
Used for toggling visibility |
Lab
Exercise: Showcasing Different Display Types
Objective:
Create a webpage that
demonstrates different display property values.
Instructions:
1. Create an
HTML page with:
o
A <div> element for display: block.
o
Two <span> elements for display: inline.
o
Three <div> elements for display:
inline-block.
o
One <div> element hidden using display: none.
2. Add CSS
styles to apply different display values.
3. Use
background colors to distinguish elements.
Solution:
html
Copy code
<!DOCTYPE
html>
<html>
<head>
<title>CSS Display Property</title>
<style>
.block {
display: block;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
.inline {
display: inline;
background-color: lightgreen;
margin: 5px;
padding: 5px;
}
.inline-block {
display: inline-block;
background-color: lightcoral;
width: 100px;
height: 50px;
text-align: center;
margin: 5px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>CSS Display Property Demo</h1>
<!-- Block Example -->
<div class="block">Block
Element 1</div>
<div class="block">Block
Element 2</div>
<!-- Inline Example -->
<span class="inline">Inline
Element 1</span>
<span class="inline">Inline
Element 2</span>
<!-- Inline-Block Example -->
<div class="inline-block">Box
1</div>
<div class="inline-block">Box
2</div>
<div class="inline-block">Box
3</div>
<!-- None Example -->
<div class="hidden">This
element is hidden.</div>
</body>
</html>
Output:
- Two
block elements appear on new lines.
- Inline
elements appear on the same line.
- Inline-block
elements appear inline but retain their width and height.
- The
hidden element does not appear.
Conclusion
By understanding the CSS display
property, you can control how elements behave on your webpage. Practice using
different display values to create flexible and responsive layouts.
No comments:
Post a Comment