A DIV tag divides the page into, say,
areas of interest. For example, say you want to divide the page's layout into a header, a sidebar, a main content, and a footer. You'd write, combining HTML with CSS,
HTML:
<div id="header"> </div>
<div id="sidebar"> </div>
<div id="main"> </div>
<div id="footer"> </div>
The SPAN is mainly used for editing small bits of your web page. Think of the following sentence:
The quick brown fox jumps over the lazy dog. Say you want to highlight the words describing the two animals, in a complex way, which requires some CSS (think underline and highlight in different colors each, as well as bold and italic
). You'd write
HTML:
<p>The <span style="background-color: red; text-decoration: underline; font-weight: bold; font-style: oblique;">quick</span> brown fox jumps over the <span style="background-color: red; text-decoration: underline; font-weight: bold; font-style: oblique;">lazy</span> dog</p>
If you want to have a better idea of how embedding works, have a look
here.
As long as
text-align: center (without any quotes, they are only used when more than one word is required in order to define a value) is supported in CSS 2.1, go ahead and use that if don't need the extra control granted by
padding. Again, according to W3Schools, "
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.", while "
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.".
You'd want to bookmark
W3Schools -- a very useful beginner's resource
