Classes & IDs
Class Selectors
You can create sets of rules that can be applied to html elements. A CLASS defines several characteristics which can be applied all at once. For example, you could code the following in the CSS document:
.alttext{font-weight:bold; font-size:10em; font-family:cursive;}
where "alttext" is any text that you want to use to identify the class. Be sure to include the "." before the class name.
Then in the html document, add the class name to the tag you want to apply it to:
<p class="alttext">This text is different.</p>
Use the ID selector if you want to apply a css rule uniquely to a single area of a web page (as opposed to an element or elements spread throughout the web page).
To set up the ID in the CSS document, type:
#alttext{font-weight:bold; font-size: 10em; font-family: cursive}
where, again, "alttext" is any text you want to use to identify the ID. Then in the html document, add the ID name to the tag you want to apply it to:
<p id="altext">Only this section is different.</p>
The difference between Classes & IDs
The main difference between a class and an ID is that an ID can be used only once on the page.
In contrast,
In the example above, the second <div> tag has two classes applied to it. The classes "widget" and "big" are separated by a space within the same quotation mark set.
You can create sets of rules that can be applied to html elements. A CLASS defines several characteristics which can be applied all at once. For example, you could code the following in the CSS document:
.alttext{font-weight:bold; font-size:10em; font-family:cursive;}
where "alttext" is any text that you want to use to identify the class. Be sure to include the "." before the class name.
Then in the html document, add the class name to the tag you want to apply it to:
<p class="alttext">This text is different.</p>
- Class names should begin with a period.
- Class names should only contain letters, numbers, hyphens, and underscores.
- The first character after the period in a class name should be a letter.
- Class names are case senstive
Use the ID selector if you want to apply a css rule uniquely to a single area of a web page (as opposed to an element or elements spread throughout the web page).
To set up the ID in the CSS document, type:
#alttext{font-weight:bold; font-size: 10em; font-family: cursive}
where, again, "alttext" is any text you want to use to identify the ID. Then in the html document, add the ID name to the tag you want to apply it to:
<p id="altext">Only this section is different.</p>
The difference between Classes & IDs
The main difference between a class and an ID is that an ID can be used only once on the page.
- Each element can have only one ID.
- Each page can have only one element with that ID.
In contrast,
- you can use the same class on multiple elements of the same page
- multiple classes can be used on the same element
In the example above, the second <div> tag has two classes applied to it. The classes "widget" and "big" are separated by a space within the same quotation mark set.