<div> and <span> are two different useful and powerful tools when dealing with cascading style sheet. Both the tags are used to describe the contents that cannot be properly described by other HTML tags because these tags supports additional formatting capabilities both for inline elements and block elements.
On the other hand <style> tag provides a way to define style rules within the documents <head> tag. The style rules may help the developers to set the visual attributes like color,size,algnments to the elements that are displayed.
<DIV>
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 tag.
For example, if we have the following CSS declaration:
|
.large { color: #00FF00; font-family:arial; font-size: 4pt; }
The HTML code
|
<div class="large"> This is a DIV sample. </div>
|
gets displayed as
This is a DIV sample.
<Span>
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 tag.
For example, if we have the following CSS declaration:
|
.largefont { color: #0066FF; font-family:arial; font-size: 6px; }
The HTML code
|
Span is not at the <span class="largefont">block level.</span>
gets displayed as
Span is not at the
block level.
Differences and default behavior
div and
span differ from each other in one regard. In standard HTML, a
div is a block level elements
(and so visually isolates a section of a document on the page, in the same way as a paragraph) whereas a
span is an inline element (for containing a piece of information inline with the surrounding text). In practice, even this feature can be changed by the use of CSS.
<STYLE>
Whenever a browser reads a style sheet, it will format the document according to it. In the early version of html, it is only used to markup the text. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags. But as the HTML grown with new tags and attributes(such as font and color), it become more complicated for a browser to differentiate tag and text.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0. All major browsers support Cascading Style Sheets.
Usage
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
|
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag.
|
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style></head>
Inline Styles
An inline style should be used when a unique style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
|
<p style=" margin-left: 20px"> This is a paragraph </p>
Add Post To: |
|
|
|
|
|
|
|
|
Posts
