HTML Span Tutorial
- To begin, create the placeholder for the CSS style rules between the opening and closing "<head></head>" tags.
First, embed the "<style>" style tag in the head section, tell the browser what the style type is (text/css) and specify the media attribute. The media indicates where the styles can be used, such as a screen or printer. The two most-used attributes are "screen" or enter "all" to cover every output device. For example:
<head>
<style type="text/css" media="screen">
</head>
Next add the "<!-- -->" comment where the rules actually live. For example:
<head>
<style type="text/css" media="screen">
<!--
your css here
-->
</head> - A class styles common types of content, used multiple times throughout the page, and is indicated with the preceding "." period character. When you create rules, use a word that will indicate the particular style. For instance, to make the first word of each paragraph bold enter:
<!--
.first { font-weight: bold; }
-->
Now, find the paragraph in the HTML that contains the first word that you want to apply this rule to. Enter the opening and closing span tags, before and after the intended word, to call up the CSS. For example:
<p><span>This</span> is a sample paragraph.</p>
Save your file to make sure your styles take affect. - The ID selector, also used in conjunction with a span, defines an explicit element on your page and is designated by the "#" number character. Each ID span is used just once, which allows you to create a truly independent style when necessary. As with a class rule, create a word that denotes the style, but this time introduce it with the correct symbol. To demonstrate, to create a single instance of blue text, enter:
<! --
#blue { color: blue; }
-->
Again, find the desired text in the HTML and surround it with the opening and closing span tags to apply the CSS. For instance:
<span>This is the text that I want to make blue.</span>
Finally, make sure to save your document so that you verify that the CSS rule(s) are enforced.
CSS
Class Selector
ID Selector
Source...