DIVS AND SPANS
The reason the div and span tags have been saved for the advanced section is not necessarily because they are difficult, rather they are rarely used when not in conjunction with style sheets and classes/ids. If you are already familiar with style sheets and their implementation, this section will be much more helpful than taxing.The main difference between a div and a span is that divs are block and spans are inline. This means that a div will automatically have a line break before and after, whereas a span can be placed within a line without changing its overall structure. This makes divs ideal for large blocks of text and spans perfect for smaller pieces of text or single words.
These tags will also never be seen without a corresponding class or id. Understanding of these will be assumed in this section, though if you are unfamiliar with them, see the class/id section for more information.
To make the examples the most clear, the actual code from this page will be used as examples. In an external style sheet, an id has been created titled content. It appears so:
#content {
background:#000;
position:absolute;
top:188px;
left:275px;
width:500px;
font-family:arial, helvetica, sans-serif;
font-size:13px;
}
There is also a class called called codetext that has been setup as so:
.codetext {
color:#ffb44c;
}
The easiest way to see the implementation of this would be to view the source code of this page. To see it in a simpler setting though, we'll set up a page here to view.
In essence, a div has been defined which has the characteristics and positioning of the main content on the page. The span has then been defined with characteristics to change the color of text for a particular word or set of words where applied. This page has then been designed with this technique in mind.