How to: A CSS Tag
A Cascading Style Sheets (CSS) tag, or rule, enables you to specify certain styles, such as font size and color, that you want to apply to your text. Once you create this rule, you can assign it to the HyperText Markup Language (HTML) elements of your choice, which gives you total control over how your Web site appears in a browser. Understanding how to create a CSS tag will help you design your Web page.
Other People Are Reading
Instructions
-
-
1
Start your computer's text editor application, and open the Web page document that you want to apply the CSS tag to.
-
2
Position your cursor before the closing "</head>" element at the top and enter the following CSS code:
<style type="text/css">
{ ; }
</style>
-
-
3
Enter the name of a CSS selector by typing in a term of your choosing before the curly brackets. Further, precede this entry with a period to create a CSS class tag that is used multiple times, or use a number sign to make a CSS id tag that is applied just once. For example:
#term { ; }
-
4
Type a property, such as "color:," between the brackets and enter a value like "green" after the colon. The complete CSS code looks as follows:
<style type="text/css">
#term { color: green; }
</style>
The property and value are known as a declaration, and each declaration instructs the browser on how to present the text that is tagged with this CSS rule.
-
5
Find the opening element, such as "<p>," that contains the content you want to apply the CSS tag to and enter "id=" if you created an id, or type "class=" if you made a class. Follow this entry with the name of your rule, but do not include the preceding period or number sign. For instance:
<p id="term">
-
6
Save your file and preview your work in your Web browser to ensure the tag is working correctly.
-
1
Tips & Warnings
A CSS class is a rule you apply to more than one section of your Web page, while a CSS id is assigned to just one particular area. For example, a CSS class may apply to all of the paragraphs you designate, while the id may only affect your navigation bar.
You also have the option to use an HTML element name, such as "body," as your CSS selector (Step 3) to apply the style to all of the text found between these tags. CSS rules that have HTML element names do not require a preceding number sign or period and they are automatically applied to the affected content.
If you add more than one declaration to your CSS rule, separate each one with a semicolon. For example:
#term { color:green; font-size: 12px; }
View your page in a Web browser by clicking the browser's "File" menu, selecting the "Open" or "Open File" option and choosing your document in the dialog window that appears.
