HTML Div & Span


Div

We use div for a large area

  • div has no default style
  • Div has no default meaning
  • HTML developers can use it for any purpose

Div Style Properties

  • font‐size
  • font‐family
  • background
  • Position
  • top
  • left
  • width

Understanding Div

<p>This is a paragraph before the div</p>
<div>This is a div with no style</div>
<p>This is a paragraph in the middle</p>
<div style="background:lightblue">This is a div with a blue background</div>

Code Output

This is a paragraph before the div

This is a div with no style

This is a paragraph in the middle

This is a div with a blue background

Example

<p>This is a paragraph before the div</p>
<div style="background:blue; fontsize:16px; fontfamily:arial">This is a div with a yellow background</div>
<p>This is a paragraph in the middle</p>
<div style="background:green; fontsize:18pt;fontfamily:Arial; width:50%">This is a div with a yellow background</div>

Copy above code & try it into your natepad


Browser View Screen Below:

Understanding Div


Positioning An Element

  • Like many elements, a div can be put anywhere
  • Use position: absolute with top: xxx and left: yyy
  • top and left refer to the top left corner of the div
  • top: 0 and left: 0 means the div is in the top left corner

Absolute Position

<div style="background:green; fontsize:16pt; fontfamily:courier;position:absolute; top:60px; left:60px">This is a div with a green background</div>

<div style="background:lightblue;fontsize:18pt;position:absolute;top:92px;left:80px" >This is a div with a blue background</div>

Copy above code & try it into your natepad


Browser View Screen Below:

Absolute Position


Relative Position

position:relative

Sets the position relative to the normal position

<p>This is a paragraph</p>

<div style="background:yellow; fontsize:14pt; fontfamily:arial;position:relative; top:20px;left:20px">This is a div with a yellow background</div>

Copy above code & try it into your natepad


Browser View Screen Below:

Relative Position

span tag

div, span has no default style

span is used for a few words


Example of span

<p>This is not span text <span> but this is </span> and this isn't </p>

<p>This is not span text <span style="background:yellow"> but this is </span> and this isn't </p>

Copy above code & try it into your natepad


Browser View Screen Below:

Span Tag



Copyright © 2020. All rights reserved.