Identifying CSS Selector

0
64
views
CSS Selector
Identifying CSS Selector

Consider an example where you want to stylize a specific <P> tag differently from the rest of the paragraphs in the same Web page. Therefore, this <P> tag needs to be uniquely identified for the application of a distinct style.

On the other hand, you may want to specify a common style for different elements, such as headings, lists, and paragraphs, on a Web page. In both these cases, you need to create your own CSS selector.

These user-defined CSS selector are classified as ID and class selector.

Implementing the ID Selector

CSS styles can be applied to an element with a specific ID by using an ID selector. An ID selector is used to identify an element that you need to style differently from the rest of the page. An ID selector is defined by using the hash symbol (#).

Consider a scenario where you need to specify a unique style for the paragraph that displays the welcome message on your website. This can be accomplished by adding an ID attribute to the paragraph that displays this message and using that ID to specify the style that needs to be applied to this paragraph.

Consider the following code to use an ID selector:

<!DOCTYPE HTML> <HTML> <HEAD> <STYLE> p { color:red; } #pname { color:green; font-size=20; font-weight:bold; } </STYLE> </HEAD> <BODY> <P ID=”pname”>Welcome to BookYourHotel Website.</P> <P> Hoatel booking facility at your doorstep</P> </BODY> <HTML>

In the preceding code, the first <P> tag is given the ID, Pname, which is being used as the ID selector in the <STYLE> tag to define a style rule for this <P> tag.

Therefore, the first <P> tag will be stylized as per the ID selector, #pname. However, the second <P> tag will appear in red color as defined by the internal style sheet.

The output derived after using an ID selector is displayed, as shown in the following figure.


Selector
The Output Derived After Using an ID Selector

Implementing the Class Selectors

A CSS style can be applied to a group of elements by using the class selector. The class selector is used when there is a need to apply the same style on different types of elements in the HTML document.

Multiple elements can belong to the same class. Hence, you can set a particular style for many HTML elements with the same class. The class selector is defined by using a dot (.).

Consider an example of a Web page where you need to apply the same formatting rules on paragraphs and headings of the Web page.

You can accomplish this by using the internal style sheets, as shown in the following code:

<!DOCTYPE HTML> <HTML> <HEAD> <STYLE> p{ font-size:20px; color: red; font-weight:bold; } h1{ font-size:20px; color: red; font-weight:bold; } h2{ font-size:20px; color: red; font-weight:bold; } </STYLE> </HEAD> <BODY> <H1>Welcome to BookYourHotelwebsite.</H1> <H2>This site is very user friendly.</H2> <P>This site gives information of all the hotels in USA.</P> <P>You can book your hotel while sitting in your room.</P> </BODY> </HTML>

Although the preceding code gives the desired output, it has certain drawbacks associated with it. The code is redundant as the same style has been defined more than once for different selectors.

Therefore, it makes the code bulky. In such a case, instead of defining the same style repeatedly for different elements, you should use a class selector.

All the elements with the same class can be assigned the same style. Consider the following code snippet to create a class selector for styling various HTML elements of the Web page:

.first { font-size:20px; color: red; font-weight:bold; }

In addition, you can also set a class selector in such a way that only specific HTML elements should get affected by a class. You can do this by placing the type selector before the dot of the class selector.

Consider an example where you want HTML elements in your Web page to be colored blue. This can be implemented by creating a class selector. However, you also want some specific tags to be colored red.

This can be done by creating a class selector specifically for these paragraphs. Its name is preceded by the type selector, p. Consider the following code snippet to specify that only specific

Selector
The Output Derived After Using a Class Selector

LEAVE A REPLY

Please enter your comment!
Please enter your name here