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:





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.