CSS - DIV and SPAN

Here you learn how to format use the DIV and SPAN tags.

The DIV and SPAN tags are used to create containers for elements on a page where we can format the elements within the container any way we want. Even though DIV and SPAN tags are HTML tags I am putting them into the CSS section because they are "empty tags". The purpose of the tags are to be blank tags which you can define what kind of fomatting applies to the element within them. Since the tags don't do anything to the elements contained in them they will almost always be used with a class or id attribute.

What is the difference? The <span> is a text-level container. It is used to define a limited amount of text or a sentence. The <div> is a block-level container. It is used to format a bigger portion of a page. Because of this it has a line break before and afterwards. You can put a SPAN within a DIV, and a DIV within a DIV, but not a DIB within a SPAN.

SPAN tag

External CSS File

This your external CSS file named "sylesheet.css".

span { font-size:20px; font-style: italic; font-family:'times new roman' }




PHP Page

<html>
<head>
<title>HTML tutorial</title>
<link rel=stylesheet type="text/css" href="stylesheet.css">
</head>

<body>

<br>
<span>This text is formatted using a span tag.</span><br><br>

</body>

</html>


This how it looks


This text is formatted using a span tag.

DIV tag

External CSS File

This your external CSS file named "sylesheet.css".

div { font-size:16px; font-family:'times new roman' }




PHP Page

<html>
<head>
<title>HTML tutorial</title>
<link rel=stylesheet type="text/css" href="stylesheet.css">
</head>

<body>

<div>
<p style="font-weight:bold;">ARTICLE HEADER</p><br>

<p>This is the second paragraph within the block of text formatted using the div tag. This whole article is contained in a div and is formatted to have a 16 point font and a time new roman font type.</p><br>

<p>This is the third paragraph within the block of text formatted using the div tag. This whole article is contained in a div and is formatted to have a 16 point font and a time new roman font type.</p><br>
</div>


</body>

</html>


This how it looks

ARTICLE HEADER


This is the second paragraph within the block of text formatted using the div tag. This whole article is contained in a div and is formatted to have a 16 point font and a time new roman font type.


This is the third paragraph within the block of text formatted using the div tag. This whole article is contained in a div and is formatted to have a 16 point font and a time new roman font type.

 
Bookmark this page: