When first getting started with CSS, it can be a bit confusing trying to figure out when to use a span and when to use a division, but this quick and insightful video tutorial should help to clarify things for you.
To keep things simple you can think of a <span></span> as an in-line element and a <div></div> as a block level element.
While a span allows you to separate things from the other elements around them on a page or within a document, it does not cause a line break. This is why it is perfect for in-line styling, like coloring a single word in a sentence to draw more attention to it.
But a div, by default, creates a line break because it is used to make separate containers or boxes within a page or document, hence the name division. So the proper way to use a div is as a containing element, rather than an inline styling element.
So to wrap up this quick CSS lesson, a <span></span> can be used within <p></p> tags, but a <div></div> should not. If you remember that span is in-line level and div is block level, you’ll be fine.
If this basic CSS tutorial was helpful for you, you will also like this post on styling your links with CSS. Make sure you let us know if you have a tutorial request by sending us a message. And visit us on Facebook for more