Join Bill Weinman for an in-depth discussion in this video Apply styles with SPAN and DIV, part of CSS Positioning Best Practices.
There are two special elements in XHTML that are used specifically for applying style to parts of a document. These are span and div. We've seen span already. Let's look at it again here. If I wanted to change the style of just part of this paragraph, I would use a <span> tag. Span is a container, and so it has a beginning tag and an end tag, like that. And then you can apply style using the style attribute like this and say font-weight: bold, and that applies the style to this portion of the paragraph.
And there we have some bold text there. <span> is an inline level tag and what that means is that it works inline with other inline level elements. For example, text. Span is usually used inside of a paragraph or some other inline context. Div is a block level element. And so if I want to apply a style to a block, say for instance both of these elements here this heading and this paragraph, I would use <div>.
Div is block level. It is not inline level. You cannot use a div inside of a paragraph. It will break the paragraph apart because it's block level. It's not really legal inside of a paragraph. Inside of a paragraph only inline level content is allowed. Div is block level. It can enclose other block level elements like headings and paragraphs. And so, if I want to say change the color of this entire block, I can say <div style= "color: #006"> make it bluish.
And save that and reload over here, and now this block including this heading and this paragraph are both blue, and that's because of this <div> around them. It's a block level element and you're able to change the style for a block. So that is, in a nutshell, span and div. <span> is inline level, <div> is block level, and these are two tags that are specifically designed just for applying style.
- Understanding style sheets and levels of inheritance
- Learning how to use CSS units of measure in page layout
- Laying out content on a page using absolute, relative, float, and fixed positioning
- Using CSS positioning to place menus, buttons, graphics, and columns precisely on a page
- Using templates to improve workflow
- Creating a full working web site, step by step