Span and Div
Span and Div tags are used with CSS. Their primary use is to select an area of code to which the style sheet information can be applied. Before we see how to use span and div, we should see how to name elements.
Naming Elements
By assigning name to elements we can identify them among other elements just like we identify people by their names. This enables us to apply styles to individual elements or to a group of elements at once.
Individual Naming
This is when you apply an element a unique name so that it can be used individually. You can apply styles to that particular element you are naming.
To apply unique names we use id attribute.
Example
<p id="first-para">First Paragraph</p>
This <p> element has been assigned a name "first-para". Now styles can be applied to this element individually.
Group Naming
This is when you apply a common name to many elements so that styles can be applied to them all at once.
To apply group naming we use class attribute.
Example
<p class="content"> First paragraph</p>
<p class="content"> Second paragraph</p>
Both <p> elements have been assigned the same class "content". Now if we apply styles to content class, it will affect both <p> elements.
Span
The span element can select a span of text and other inline elements.
To select a span,
- Type <span>.
- Assign a name by id or class atribute.
- Type the text or inline elemetns to be selected.
- Type </span> to end the span.
Example
<p> Among Sun, Moon and Earth,<span class="bold-text">Sun</span> is the largest oject.</p>
In this paragraph the word Sun is enclosed in the span element and i have assigned a class named "bold-text" to it. What ever bold-text class is defined to do in the CSS, will be applied to this span.
Div
The div element is used to select large portions of code in your document. Say it another way, you can divided your large page into multiple divisions by using div element.
To select a division,
- Type <div>.
- Assign a name by id or class atribute.
- Write the contents or other elements to be selected.
- Type </div> to end the division.
Example
<div id="top">
<p>
This is the top content.
</p>
</div>
<div id="middle">
<p>
This is the middle content.
</p>
</div>
<div id="bottom">
<p>
This is the bottom contnet.
</p>
</div>
This example has three divisions, a style applited to "top" division will be applied to all contents of the top division and only to top division. The same goes for other divisions.
The div element is very usefull when we define the layout of our document using CSS. Suppose a web page has three major portions,
- A Header Section.
- A Menu.
- A Content Section.
If we break the page into three division with each one corresponding to the corresponding sections, we can easily apply styles to them and create the whole layout of the page.
Next:
Related:
Link to this page :
Copy and paste the following code in an html document to link to this page,