CSS - Span & Div Tags




CSS Span & Div Tags

The span is similar to the div tag. Both of them divide the content into individual sections. the difference is that span goes into a refined level so that by using span a single character is formatted if required.

It is used for text-level element and not for a block-level element, there is no line feed after the </span> tag.

It is used as a selector in style sheet and it includes STYLE class and ID as its attribute, it is a CSS element and used purely to apply style, it has no effect when style sheet is disabled.

CSS Div Tags

Div (short for division) divides the content into individual sections. Each section can then have its own formatting, as specified by the CSS. Div is a block-level container, meaning that there is a line feed after the </div> tag.

For example, if we have the following CSS declaration −

Example

.large { 
  color: #ffa500; 
  font-family:arial; 
  font-size: 4pt; 
}

The HTML code

Example

<div class="large">
  This is a DIV sample. 
</div>

Result

CSS Span Tags

Span is similar to div in that they both divide the content into individual sections. The difference is that span goes into a finer level, so we can span to format a single character if needed. There is no line feed after the </span> tag.

For example, if we have the following CSS declaration −

Example

.largefont { 
  color: #0066FF; 
  font-family:arial; 
  font-size: 6px; 
}

The HTML code

Span is not at the <span class="largefont">block level</span>.