Use the SPAN Element to Define Styles Within a Block
While the DIV element can be used to designate block-level elements such as paragraphs and list items, SPAN is used within a block. And while most browsers will insert a line feed before and after the DIV tags, the text within the SPAN tags remains on the same line as the rest of the text in the larger block.
In the simple example below, I used the SPAN element and Cascading Style Sheets (CSS) to set the text of the entire paragraph to green, except for the words "SPAN element", which appear in blue. Note that all of the text will appear on one line.
<HTML>
<HEAD>
<TITLE>SPAN tip </TITLE>
<STYLE>
P {color: green}
.special {color: blue}
</STYLE>
</HEAD>
<BODY>
<P>This is an example of how you can use the
<SPAN class = special > SPAN element </SPAN> in your Web pages.
</BODY>
</HTML>
It's quick, easy and you get access to all the articles on DevX.
This registration/login is to allow you to read articles on devx.com. Already a member?
To become a member of DevX.com create your Member Profile by completing the form below. Membership is free!
If you have a hot tip and we publish it, we'll pay you. However, due to accounting overhead we no longer pay $10 for a single tip submission. You must accumulate 10 acceptable tips to receive payment. Be sure to include a clear explanation of what the technique does and why it's useful. If it includes code, limit it to 20 lines if possible. Submit your tip here.
