From the course: CSS Positioning Best Practices

Apply styles with SPAN and DIV - CSS Tutorial

From the course: CSS Positioning Best Practices

Start my 1-month free trial Buy for my team

Apply styles with SPAN and DIV

“

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.

Contents