SlideShare a Scribd company logo
Web Programming and
Design
CSS (Cascading Style Sheet)
By : Gheyath M. Othman
CSS Margin
2
• The CSS margin properties define the space around elements.
• It does not have a background color, and is completely transparent.
• The top, right, bottom, and left margin can be changed independently using
separate properties. A shorthand margin property can also be used, to change all
margins at once. Like
margin: 25px 50px 75px 100px;
top right bottom left
margin: 25px 50px 75px;
top right+left bottom
margin: 25px 50px;
top+bottom right+left
margin: 25px;
top+bottom+right+left
You can also use it separately: LIKE
CSS Margin
3
All CSS margin properties:
Property Description
margin A shorthand property for setting the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
CSS Margin
4
Example-1- Margin: Margin
<!DOCTYPE html><html><head>
<style>
p.all {
margin: 5px;
}
p.ex {
margin: 100px 150px 100px 300px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="all">This is a paragraph with specified
margins.all in one</p>
<p class="ex">This is a paragraph with specified
margins.</p>
</body></html>
CSS Padding
5
• The CSS padding properties define the space between the element border and
the element content.
• Padding clears an area around the content (inside border) of element. The
padding is affected by the background color of the element.
• The top, right, bottom, and left padding can be changed independently using
separate properties. A shorthand padding property can also be used, to
change all paddings at once. Like
padding: 25px 50px 75px;
top right+left bottom
padding: 25px;
top+bottom+right+left
Also you can use it separately. LIKE
CSS Padding
6
padding: 25px 50px;
top+bottom right+left
All CSS padding properties:
Property Description
padding A shorthand property for setting all the padding properties in one
declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
padding: 25px 50px 75px 100px;
top right bottom left
CSS Padding
7
Example -1- :padding
<!DOCTYPE html><html><head>
<style>
p { background-color: yellow; }
p.all
{ padding: 25px; }
p.padding
{
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="all">This is a paragraph with specified
paddings.</p>
<p class="padding">This is a paragraph with specified
paddings.</p>
</body></html>
Bottom padding
Out_padd_border_margin
CSS Dimensions
8
All CSS Dimension properties:
The CSS dimension properties allow you to control the height and width of an
element.
Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element
example_dimen2
CSS Dimensions
9
Example -1- :
<!DOCTYPE html><html><head>
<style>
div {
max-width: 500px;
height: 100px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<div>
This div element has a height of 100px and a max-width
of 500px. This div element has a height of 100px and a
max-width of 500px. This div element has a height of
100px and a max-width of 500px. This div element has a
height of 100px and a max-width of 500px.
</div>
</body></html>
CSS Layout (overflow)
10
The overflow property specifies what to do if the content of an element exceeds
the size of the element's box. Syntax
overflow: auto, hidden, scroll
Example
11
e2_overflow
<!DOCTYPE html><html><head>
<style>
div.scroll { background-color: #00FFFF; width: 100px;
height: 100px; overflow: scroll; }
div.hidden { background-color: #00FF00; width: 100px;
height: 100px; overflow: hidden; }
div.auto { background-color: #00FF00; width: 100px;
height: 100px; overflow: auto; }
</style>
</head> <body>
<p>Result with overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want
to have better control of the layout.</div>
<p>Result with overflow:hidden</p>
<div class="hidden">You can use the overflow property when you
want to have better control of the layout. The default value is
visible.</div>
<p>Result with overflow:auto</p>
<div class="auto">You can use the overflow property when you want
to have better control of the layout. The default value is visible.</div>
</body></html>
e2_overflow
CSS Layout (Float & Clear)
12
• The float property specifies whether or not an element should float.
• The float property can be used to wrap text around images.
Float property:
float: left, right, none
e1_float
CSS Layout (Float & Clear)
13
Example-1-: e1_float
<!DOCTYPE html><html><head>
<style>
img { float: right;
margin: 0 0 10px 10px; }
</style>
</head>
<body>
<p>The image will float to the right in the paragraph,
and the text in the paragraph will wrap around the image.
<img src="../smiley.gif" alt="smiley.com" width="100"
height="140">
In this example, the image will float to the right in the paragraph,
and the text in the paragraph will wrap around the image.In this
example, the image will float to the right in the paragraph, and
the text in the paragraph will wrap around the image.In this
example, the image will float to the right in the paragraph, and
the text in the paragraph will wrap around the image.In this
example, the image will float to the right in the paragraph, and
the text in the paragraph will wrap around the image.</p>
</body></html>
CSS Layout (Float & Clear)
14
• The clear property is used to control the behavior of floating elements.
• Elements after a floating element will flow around it. To avoid this, use the
clear property.
• The clear property specifies on which sides of an element floating elements
are not allowed to float.
Clear property:
clear: left, right, both, none
CSS Layout (Float & Clear)
15
Example-1-: e2_clear
<!DOCTYPE html><html><head>
<style>
.div1,.div3 { float: left; width: 100px;
height: 50px; margin: 10px;
border: 3px solid #8AC007; }
.div2 { border: 1px solid red; }
.div4 { border: 1px solid red; clear: left; }
</style>
</head><body>
<h2>Without clear</h2><div class="div1">div1</div>
<div class="div2">div2 - Notice that the div2 element is after div1,
in the HTML code. However, since div1 is floated to the left, this
happens: the text in div2 is floated around div1, and div2
surrounds the whole thing.</div>
<h2>Using clear</h2><div class="div3">div3</div>
<div class="div4">div4 - Using clear moves div4 down below the
floated div3. The value "left" clears elements floated to the left.
You can also clear "right" and "both".</div>
</body></html>
CSS Layout (Display Property)
16
• The display property is the most important CSS property for controlling
layout.
• The display property specifies if/how an element is displayed.
• Every HTML element has a default display value depending on what type
of element it is. The default display value for most elements
is block or inline.
CSS Layout (Display :inline-block)
17
• It has been possible for a long time to create a grid of boxes that fills the
browser width and wraps nicely (when the browser is resized), by using
the float property.
• However, the inline-block value of the display property makes this even
easier.
• inline-block elements are like inline elements but they can have a width and
a height.
• Example using float once and inline-block another, it has the same result.
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #8AC007;}
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #8AC007;}
e4-e3_inline-block+float
CSS Layout (Display Property)
18
Div
Examples of block-level elements: <div>
<h1> - <h6>
<p>
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
Block-level Elements:
Inline Elements:
An inline element does not start on a new line and only takes up as much width
as necessary. This is a paragraph.an inline <span> element inside
Examples of Inline elements:
• <span>
• <a>
• <img>
Block-level & Inline Elements
19
Example:
<!DOCTYPE html><html><head>
<style>
.ul1 li{
display: inline;
}
.ul2 li{
display: block;
}
</style>
</head>
<body><p>Display a list of links as a horizontal menu:INLINE</p>
<ul class="ul1">
<li><a href="#home.html" >HTML</a></li>
<li><a href="#home.html" >CSS</a></li>
<li><a href="#home.html" >JavaScript</a></li></ul>
<p>Display a list of links as a vertical menu:BLOCK</p>
<ul class="ul2">
<li><a href="#home.html" >HTML</a></li>
<li><a href="#home.html" >CSS</a></li>
<li><a href="#home.html" >JavaScript</a></li>
</ul>
</body></html>
e1_Inline-block
CSS Layout (Display Property)
20
Hide an Element - display:none or visibility:hidden
• Hiding an element can be done by setting the display property to none. The
element will be hidden, and the page will be displayed as if the element is not
there. h1.hidden {
display: none;
}
h1.hidden {
visibility: hidden;
}
• visibility:hidden; also hides an element However, the element will still take up
the same space as before. The element will be hidden, but still affect the
layout.
Block-level & Inline Elements
21
Example:
<!DOCTYPE html><html><head>
<style>
h1.hidden {
display: none;
}
h2.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take
up any space.</p>
<hr>
<h2>This is a visible heading</h1>
<h2 class="hidden">This is a hidden heading</h1>
<p>Notice that the h2 element with visibility hidden; take up a
space.</p>
</body></html>
display+visiblity
Doesn’t Take the space

More Related Content

What's hot (20)

ODP
HTML 5 Simple Tutorial Part 1
Sanjeev Kumar
 
PPT
CSS ppt
Sanmuga Nathan
 
PPTX
uptu web technology unit 2 Css
Abhishek Kesharwani
 
PDF
Intro to CSS
Randy Oest II
 
PDF
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
PDF
Css
actacademy
 
DOCX
Css
actacademy
 
PPT
CSS Basics
WordPress Memphis
 
PDF
Intro to HTML and CSS basics
Eliran Eliassy
 
ODP
Introduction of Html/css/js
Knoldus Inc.
 
PPTX
Css Basics
Jay Patel
 
PPTX
HTML, CSS And JAVASCRIPT!
Syahmi RH
 
PPTX
Css Complete Notes
EPAM Systems
 
PPT
CSS for Beginners
Amit Kumar Singh
 
ODP
Cascading Style Sheets - Part 01
Hatem Mahmoud
 
PPTX
html-css
Dhirendra Chauhan
 
ODP
Cascading Style Sheets - Part 02
Hatem Mahmoud
 
PPTX
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
PPT
Introduction to Cascading Style Sheets
Tushar Joshi
 
HTML 5 Simple Tutorial Part 1
Sanjeev Kumar
 
uptu web technology unit 2 Css
Abhishek Kesharwani
 
Intro to CSS
Randy Oest II
 
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
CSS Basics
WordPress Memphis
 
Intro to HTML and CSS basics
Eliran Eliassy
 
Introduction of Html/css/js
Knoldus Inc.
 
Css Basics
Jay Patel
 
HTML, CSS And JAVASCRIPT!
Syahmi RH
 
Css Complete Notes
EPAM Systems
 
CSS for Beginners
Amit Kumar Singh
 
Cascading Style Sheets - Part 01
Hatem Mahmoud
 
Cascading Style Sheets - Part 02
Hatem Mahmoud
 
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
Introduction to Cascading Style Sheets
Tushar Joshi
 

Similar to Web Design Course: CSS lecture 4 (20)

PPTX
CSS_Dibbo
Sayanton Vhaduri
 
PPT
gdg_workshop 4 on web development HTML & CSS
SaniyaKhan484230
 
PPT
Chapter6
DeAnna Gossett
 
PPTX
Lecture 6.pptx..........................
salmannawaz6566504
 
PPTX
CSS tutorial chapter 3
jeweltutin
 
PDF
Css from scratch
Ahmad Al-ammar
 
PPTX
Css 101
Rhyan Mahazudin
 
PPT
CSS
ARJUN
 
PPTX
Castro Chapter 11
Jeff Byrnes
 
PPTX
CSS tutorial chapter 2
jeweltutin
 
PPTX
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
PDF
Web Design & Development - Session 3
Shahrzad Peyman
 
PPTX
Web Engineering - Basic CSS Properties
Nosheen Qamar
 
DOCX
Css Introduction
SathyaseelanK1
 
PPTX
Lecture17-Floating Elements.pptx
GIRISHKUMARBC1
 
PDF
Web Layout
Shawn Calvert
 
PPTX
Cascading style sheets (CSS-Web Technology)
Timbal Mayank
 
PPTX
Web Development - Lecture 6
Syed Shahzaib Sohail
 
PDF
CSS.pdf
SoniaJoshi25
 
PPTX
CSS.pptx
RajKumarRock3
 
CSS_Dibbo
Sayanton Vhaduri
 
gdg_workshop 4 on web development HTML & CSS
SaniyaKhan484230
 
Chapter6
DeAnna Gossett
 
Lecture 6.pptx..........................
salmannawaz6566504
 
CSS tutorial chapter 3
jeweltutin
 
Css from scratch
Ahmad Al-ammar
 
CSS
ARJUN
 
Castro Chapter 11
Jeff Byrnes
 
CSS tutorial chapter 2
jeweltutin
 
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
Web Design & Development - Session 3
Shahrzad Peyman
 
Web Engineering - Basic CSS Properties
Nosheen Qamar
 
Css Introduction
SathyaseelanK1
 
Lecture17-Floating Elements.pptx
GIRISHKUMARBC1
 
Web Layout
Shawn Calvert
 
Cascading style sheets (CSS-Web Technology)
Timbal Mayank
 
Web Development - Lecture 6
Syed Shahzaib Sohail
 
CSS.pdf
SoniaJoshi25
 
CSS.pptx
RajKumarRock3
 
Ad

Recently uploaded (20)

DOCX
RECLAIM STOLEN CRYPTO REVIEW WITH RECUVA HACKER SOLUTIONS
camilamichaelj7
 
PDF
Rostyslav Chayka: Управління командою за допомогою AI (UA)
Lviv Startup Club
 
PDF
Blind Spots in Business: Unearthing Hidden Challenges in Today's Organizations
Crimson Business Consulting
 
PDF
Uranus Eng. Company -(Business details )
anisurche787
 
PPTX
Understanding ISO 42001 Standard: AI Governance & Compliance Insights from Ad...
Adeptiv AI
 
PDF
Keppel Investor Day 2025 Presentation Slides GCAT.pdf
KeppelCorporation
 
PDF
Importance of Timely Renewal of Legal Entity Identifiers.pdf
MNS Credit Management Group Pvt. Ltd.
 
PDF
15 Essential Cloud Podcasts Every Tech Professional Should Know in 2025
Amnic
 
PDF
Thane Stenner - An Industry Expert
Thane Stenner
 
PDF
NewBase 07 July 2025 Energy News issue - 1800 by Khaled Al Awadi_compressed.pdf
Khaled Al Awadi
 
PDF
Improving Urban Traffic Monitoring with Aerial Image Annotation Services
SunTec India
 
PDF
Concept Topology in Architectural Build Addendum.pdf
Brij Consulting, LLC
 
PDF
Why Unipac Equipment Leads the Way Among Gantry Crane Manufacturers in Singap...
UnipacEquipment
 
PPTX
Drive Operational Excellence with Proven Continuous Improvement Strategies
Group50 Consulting
 
PDF
MSOL's corporate profile materials_______
Management Soluions co.,ltd.
 
PDF
Explore Unique Wash Basin Designs: Black, Standing & Colored Options
Mozio
 
PPTX
IP Leaks Can Derail Years Of Innovation In Seconds
Home
 
PDF
CBV - GST Collection Report V16. pdf.
writer28
 
PDF
Securiport - A Global Leader
Securiport
 
PPTX
DECODING AI AGENTS AND WORKFLOW AUTOMATION FOR MODERN RECRUITMENT
José Kadlec
 
RECLAIM STOLEN CRYPTO REVIEW WITH RECUVA HACKER SOLUTIONS
camilamichaelj7
 
Rostyslav Chayka: Управління командою за допомогою AI (UA)
Lviv Startup Club
 
Blind Spots in Business: Unearthing Hidden Challenges in Today's Organizations
Crimson Business Consulting
 
Uranus Eng. Company -(Business details )
anisurche787
 
Understanding ISO 42001 Standard: AI Governance & Compliance Insights from Ad...
Adeptiv AI
 
Keppel Investor Day 2025 Presentation Slides GCAT.pdf
KeppelCorporation
 
Importance of Timely Renewal of Legal Entity Identifiers.pdf
MNS Credit Management Group Pvt. Ltd.
 
15 Essential Cloud Podcasts Every Tech Professional Should Know in 2025
Amnic
 
Thane Stenner - An Industry Expert
Thane Stenner
 
NewBase 07 July 2025 Energy News issue - 1800 by Khaled Al Awadi_compressed.pdf
Khaled Al Awadi
 
Improving Urban Traffic Monitoring with Aerial Image Annotation Services
SunTec India
 
Concept Topology in Architectural Build Addendum.pdf
Brij Consulting, LLC
 
Why Unipac Equipment Leads the Way Among Gantry Crane Manufacturers in Singap...
UnipacEquipment
 
Drive Operational Excellence with Proven Continuous Improvement Strategies
Group50 Consulting
 
MSOL's corporate profile materials_______
Management Soluions co.,ltd.
 
Explore Unique Wash Basin Designs: Black, Standing & Colored Options
Mozio
 
IP Leaks Can Derail Years Of Innovation In Seconds
Home
 
CBV - GST Collection Report V16. pdf.
writer28
 
Securiport - A Global Leader
Securiport
 
DECODING AI AGENTS AND WORKFLOW AUTOMATION FOR MODERN RECRUITMENT
José Kadlec
 
Ad

Web Design Course: CSS lecture 4

  • 1. Web Programming and Design CSS (Cascading Style Sheet) By : Gheyath M. Othman
  • 2. CSS Margin 2 • The CSS margin properties define the space around elements. • It does not have a background color, and is completely transparent. • The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. Like margin: 25px 50px 75px 100px; top right bottom left margin: 25px 50px 75px; top right+left bottom margin: 25px 50px; top+bottom right+left margin: 25px; top+bottom+right+left You can also use it separately: LIKE
  • 3. CSS Margin 3 All CSS margin properties: Property Description margin A shorthand property for setting the margin properties in one declaration margin-bottom Sets the bottom margin of an element margin-left Sets the left margin of an element margin-right Sets the right margin of an element margin-top Sets the top margin of an element
  • 4. CSS Margin 4 Example-1- Margin: Margin <!DOCTYPE html><html><head> <style> p.all { margin: 5px; } p.ex { margin: 100px 150px 100px 300px; } </style> </head> <body> <p>This is a paragraph with no specified margins</p> <p class="all">This is a paragraph with specified margins.all in one</p> <p class="ex">This is a paragraph with specified margins.</p> </body></html>
  • 5. CSS Padding 5 • The CSS padding properties define the space between the element border and the element content. • Padding clears an area around the content (inside border) of element. The padding is affected by the background color of the element. • The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. Like padding: 25px 50px 75px; top right+left bottom padding: 25px; top+bottom+right+left Also you can use it separately. LIKE
  • 6. CSS Padding 6 padding: 25px 50px; top+bottom right+left All CSS padding properties: Property Description padding A shorthand property for setting all the padding properties in one declaration padding-bottom Sets the bottom padding of an element padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element padding: 25px 50px 75px 100px; top right bottom left
  • 7. CSS Padding 7 Example -1- :padding <!DOCTYPE html><html><head> <style> p { background-color: yellow; } p.all { padding: 25px; } p.padding { padding: 25px 50px 75px 100px; } </style> </head> <body> <p>This is a paragraph with no specified padding.</p> <p class="all">This is a paragraph with specified paddings.</p> <p class="padding">This is a paragraph with specified paddings.</p> </body></html> Bottom padding Out_padd_border_margin
  • 8. CSS Dimensions 8 All CSS Dimension properties: The CSS dimension properties allow you to control the height and width of an element. Property Description height Sets the height of an element max-height Sets the maximum height of an element max-width Sets the maximum width of an element min-height Sets the minimum height of an element min-width Sets the minimum width of an element width Sets the width of an element example_dimen2
  • 9. CSS Dimensions 9 Example -1- : <!DOCTYPE html><html><head> <style> div { max-width: 500px; height: 100px; border: 3px solid #8AC007; } </style> </head> <body> <div> This div element has a height of 100px and a max-width of 500px. This div element has a height of 100px and a max-width of 500px. This div element has a height of 100px and a max-width of 500px. This div element has a height of 100px and a max-width of 500px. </div> </body></html>
  • 10. CSS Layout (overflow) 10 The overflow property specifies what to do if the content of an element exceeds the size of the element's box. Syntax overflow: auto, hidden, scroll
  • 11. Example 11 e2_overflow <!DOCTYPE html><html><head> <style> div.scroll { background-color: #00FFFF; width: 100px; height: 100px; overflow: scroll; } div.hidden { background-color: #00FF00; width: 100px; height: 100px; overflow: hidden; } div.auto { background-color: #00FF00; width: 100px; height: 100px; overflow: auto; } </style> </head> <body> <p>Result with overflow:scroll</p> <div class="scroll">You can use the overflow property when you want to have better control of the layout.</div> <p>Result with overflow:hidden</p> <div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> <p>Result with overflow:auto</p> <div class="auto">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> </body></html> e2_overflow
  • 12. CSS Layout (Float & Clear) 12 • The float property specifies whether or not an element should float. • The float property can be used to wrap text around images. Float property: float: left, right, none e1_float
  • 13. CSS Layout (Float & Clear) 13 Example-1-: e1_float <!DOCTYPE html><html><head> <style> img { float: right; margin: 0 0 10px 10px; } </style> </head> <body> <p>The image will float to the right in the paragraph, and the text in the paragraph will wrap around the image. <img src="../smiley.gif" alt="smiley.com" width="100" height="140"> In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p> </body></html>
  • 14. CSS Layout (Float & Clear) 14 • The clear property is used to control the behavior of floating elements. • Elements after a floating element will flow around it. To avoid this, use the clear property. • The clear property specifies on which sides of an element floating elements are not allowed to float. Clear property: clear: left, right, both, none
  • 15. CSS Layout (Float & Clear) 15 Example-1-: e2_clear <!DOCTYPE html><html><head> <style> .div1,.div3 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #8AC007; } .div2 { border: 1px solid red; } .div4 { border: 1px solid red; clear: left; } </style> </head><body> <h2>Without clear</h2><div class="div1">div1</div> <div class="div2">div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.</div> <h2>Using clear</h2><div class="div3">div3</div> <div class="div4">div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div> </body></html>
  • 16. CSS Layout (Display Property) 16 • The display property is the most important CSS property for controlling layout. • The display property specifies if/how an element is displayed. • Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
  • 17. CSS Layout (Display :inline-block) 17 • It has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the float property. • However, the inline-block value of the display property makes this even easier. • inline-block elements are like inline elements but they can have a width and a height. • Example using float once and inline-block another, it has the same result. .floating-box { display: inline-block; width: 150px; height: 75px; margin: 10px; border: 3px solid #8AC007;} .floating-box { float: left; width: 150px; height: 75px; margin: 10px; border: 3px solid #8AC007;} e4-e3_inline-block+float
  • 18. CSS Layout (Display Property) 18 Div Examples of block-level elements: <div> <h1> - <h6> <p> A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Block-level Elements: Inline Elements: An inline element does not start on a new line and only takes up as much width as necessary. This is a paragraph.an inline <span> element inside Examples of Inline elements: • <span> • <a> • <img>
  • 19. Block-level & Inline Elements 19 Example: <!DOCTYPE html><html><head> <style> .ul1 li{ display: inline; } .ul2 li{ display: block; } </style> </head> <body><p>Display a list of links as a horizontal menu:INLINE</p> <ul class="ul1"> <li><a href="#home.html" >HTML</a></li> <li><a href="#home.html" >CSS</a></li> <li><a href="#home.html" >JavaScript</a></li></ul> <p>Display a list of links as a vertical menu:BLOCK</p> <ul class="ul2"> <li><a href="#home.html" >HTML</a></li> <li><a href="#home.html" >CSS</a></li> <li><a href="#home.html" >JavaScript</a></li> </ul> </body></html> e1_Inline-block
  • 20. CSS Layout (Display Property) 20 Hide an Element - display:none or visibility:hidden • Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there. h1.hidden { display: none; } h1.hidden { visibility: hidden; } • visibility:hidden; also hides an element However, the element will still take up the same space as before. The element will be hidden, but still affect the layout.
  • 21. Block-level & Inline Elements 21 Example: <!DOCTYPE html><html><head> <style> h1.hidden { display: none; } h2.hidden { visibility: hidden; } </style> </head> <body> <h1>This is a visible heading</h1> <h1 class="hidden">This is a hidden heading</h1> <p>Notice that the h1 element with display: none; does not take up any space.</p> <hr> <h2>This is a visible heading</h1> <h2 class="hidden">This is a hidden heading</h1> <p>Notice that the h2 element with visibility hidden; take up a space.</p> </body></html> display+visiblity Doesn’t Take the space