Quick HTML




DIV and SPAN sections



Using a style sheet, we can assign one or more style properties to a generic section of the document.

A section can be defined in two ways:
  1. looking like a rectangular block, if delimited by the <DIV> tag and the </DIV> tag;

  2. looking like a strip, if delimited by the <SPAN> tag and the </SPAN> tag.
Main difference:
  • the <DIV> section force a line break

  • the <SPAN> section does not force a line break

For example, let's define two color combinations for background and text:
.green { background: black; color: lime; }
.aqua{ background: teal; color: aqua; }
Using DIV....
<DIV class="green">
This is a DIV section.
The background is black, the text is light green.
</DIV>

<DIV class="aqua">
This is a another DIV section.
The background is green, the text is light blue.
</DIV>
...the result is this:

This is a DIV section. The background is black, the text is light green.
This is a another DIV section. The background is green, the text is light blue.




Using SPAN...
<SPAN class="green">
This is a SPAN section.
The background is black, the text is light green.
</SPAN>

<SPAN class="aqua">
This is a another SPAN section.
The background is green, the text is light blue.
</SPAN>
...the result is this:

This is a SPAN section. The background is black, the text is light green.This is a another SPAN section. The background is green, the text is light blue.

Next page :

how to define inner and outer margins of a section of the page.



|   Back   |   Index   |   Next   |