From the course: CSS Positioning Best Practices
Apply styles with SPAN and DIV - CSS Tutorial
From the course: CSS Positioning Best Practices
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.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.