|
|
Sometimes you may want to apply a particular style to a small section of text, say a word or two, in a paragraph or to a larger range of content. HTML offers two mark-up tags that are ideally suited for use with style sheets to accomplish this. The <span> and <div> tags have no attributes of their own but can be used to format content of a web page.
Let's say you wanted to display the word using inverse video, that is white text on a black background. You would do it by creating a class in a style sheet similar to the one shown below called button. Note the easily overlooked period that precedes the name of the class.
<style>
.button {color: white; background-color: black;}
</style>
Once you have created the style class, you can use it anywhere in a document by including class="button" to the mark-up tag to which you want to apply that style. For instance, the tag <p class="button"> would apply the style to a paragraph. To apply it to a single word, use the <span> tag as shown in the following example:
It's all spelled out in black and <span class="button">white</span>, plus a little gray.
which is rendered thusly by the browser:
It's all spelled out in black and , plus a little gray.
If you need to apply a style to a larger body of content, use the <div> tag in a similar manner. For instance, if you wanted to set the width of a page to 600 pixels, create a style sheet class like the following and apply it by enclosing the content with <div class="wd600"> and </div> tags. Again, note that period that precedes the class name.
<style>
.wd600 {width: 600px;}
</style>
No font tags were used or harmed in the preparation of this web document.