| |
Class Selector
As mentioned above, grouping is used to bring uniformity to the web pages. But, what do you do if you want to apply different styles on the same element? Class Selectors enable you to do so. A Selector can have different classes, which means allowing the same element to follow different styles.
Syntax of Class Selector |
|
| .class selector { property : value;} |
|
For example, if you want to have two different styles of lists in your document - one with red color and the other one with green color, you can write:
Example |
|
| li . red {color : red , font-size= small} |
| li . green {color : green , font size = large} |
|
To indicate the class of an element, the class attribute is specified in the HTML document.
In the following HTML document, two different classes are created. One class has the value 'red' and the other has the value 'green'. When the calss, class="red" is encountered, then the selector red will be selected. Its properties and their corresponding values will be set.
Example |
|
| < li class="red"> |
| What is the capital of America? |
| <li class="green"> |
Washington D.C. is the capital of America. |
| |
The output of this code would be as follows:
Example |
What is the capital of America? |
|
| Washington D.C. is the capital of America. |
|
Classes can also be declared without specifying the element .
In the example given below, wherever the class red or green is encountered in the html document, irrespective of the element with which it has been used, the corresponding styles would be applied.
Example |
|
| .red { font-size : small } |
| |
.green {font-size : large } |
| |
| |
| Summary |
| |
In this chapter you have learnt:
- How to add styles in a web page
- Syntax of CSS
- Uses of Grouping
- How to apply classes to select styles
|
| |
| |
| Review Questions |
| |
Fill in the Blanks
- The _____ technique is used by various tags to share same styles.
- A _____ is any HTML element on which various properties are applied.
- Besides selector, _____ enables you to apply different styles on the same element.
Solutions
- Grouping
- Selector
- Class-selector
State whether True or False
- A single selector can have only one property.
- Various properties can be shared by various HTML elements.
- Classes can be declared without specifying the element.
Solutions
- False
- True
- True
| Exercise |
Write a few problems with their solutions, with different style options, using grouping.
|
| Solution |
|
|
| |
| |
| What's Next |
The next chapter will acquaint you with the concepts of linking style sheets with your web page. It will also tell you the different ways of linking style sheets and SPAN and DIV tags.
Hop over to the next chapter to get a close-up of linking the style sheets. |
| |
|
| |
|
