The <span> Tag
The <span> tag is very similar to the <div> tag in that it is used to identify elements for applying styles. But where the <div> tag is a block element, the <span> tag is not. It does not define a logical division on a page -- it is simply used to identify content for specific purposes (like applying styles). Therefore, you can use the <span> tag to apply styles to elements anywhere on your page, including inside headings and paragraphs.
You can nest <span> tags within one another, but in most cases if you are applying multiple styles to an element, it will probably be best to create a new style with it's own set of declarations.
<head>
<title>Example of class attribute</title>
A <link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
B .highlight { background-color: yellow; }
</style>
</head>
<body>
<p>This is a paragraph of text where I want to highlight the C <span class="highlight">important</span> points, similar to how students use highlighters to mark D <span class="highlight">important</span> points in textbooks.</p>
For this example we have:
- Linked our main stylesheet
- Declared any elements with class="highlight" to use a yellow background
- Use the <span> tag to apply the style named "highlight"
- Use the <span> tag again to apply the style named "highlight"
Note that in this example, the style declaration for "highlight" is defined within the document and not in the main stylesheet.css file. This style would only be available to use on this page. For styles that will be used on multiple pages, save them in your central style sheet file.
|
