Scribd
Upload
6 views2 pages

Types of Selectors

The document outlines different types of CSS selectors including ID, Class, Universal, and Group selectors, detailing how to declare and apply them to HTML elements. Each selector type is accompanied by examples demonstrating their usage and effects on specific elements. The conclusion emphasizes that attributes assigned to selectors will affect the corresponding elements in the HTML document.

Uploaded by

shail
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views2 pages

Types of Selectors

The document outlines different types of CSS selectors including ID, Class, Universal, and Group selectors, detailing how to declare and apply them to HTML elements. Each selector type is accompanied by examples demonstrating their usage and effects on specific elements. The conclusion emphasizes that attributes assigned to selectors will affect the corresponding elements in the HTML document.

Uploaded by

shail
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

TYPES OF SELECTOR

1.ID SELECTOR

1. DECLARE ID WITH (#) HASH TAG

2. ASSIGN ATTRIBUTES TO ID SELECTOR

3. ATTACH ID TO PARTICULAR ELEMENTS.

CONCLUSION: ATTRIBUTES OF ID WILL BE ASSIGNED TO THAT ELEMENT.

1. <! DOCTYPE HTML> <Html><head><style> #para1{text-align: center; color: blue;}


</style></head><body><p id="para1">Hello Students</p> <p>This paragraph will not be affected.
</p></body></html>

2. <! DOCTYPE HTML> <Html><head><style> #para1{text-align: center; color: blue;} #para2{text-align:


center; color: red;} </style></head><body><p id="para1">Hello Students</p> <p id="para2">This
paragraph will not be affected. </p></body></html>

2. CLASS SELECTOR

1. DECLARE CLASS WITH (.) PERIOD

2. ASSIGN ATTRIBUTES TO CLASS

3. ATTACH CLASS TO PARTICULAR ELEMENTS

CONCLUSION: ATTRIBUTES OF CLASS WILL BE ASSIGNED TO THAT ELEMENT

1. <! DOCTYPE HTML> <HTML><head><style>. intro {text-align: center; color: blue} </style></head>
<body> <h1 class="intro">This heading is blue and center-aligned. </h1> <p class="intro">This
paragraph is blue and center-aligned. </p> </body></html>

CLASS SELECTOR RESTRICTED TO PARTICULAR ELEMENT.

1. <! DOCTYPE HTML> <HTML><head><style> p. intro {text-align: center; color: blue} </style></head>
<body> <h1 class="intro">This heading is not affected</h1> <p class="intro">This paragraph is blue
and center-aligned. </p> </body></html>

2. <! DOCTYPE HTML> <HTML><head><style> H1. intro {text-align: center; color: blue}
</style></head><body> <h1 class="intro">This heading is not affected</h1> <p class="intro">This
paragraph is blue and center-aligned. </p> </body></html>

3. UNIVERSAL SELECTOR

1. DECLARE UNIVERSAL SELECTOR WITH HELP OF ASTRIX (*).

2. ASSIGN ATTRIBUTES TO UNIVERSAL SELECTOR.

3. ATTACH OR DO NOT ATTACH UNIVERSAL SELECTOR TO PARTICULAR ELEMENT.


CONCLUSION: ATTRIBUTES ARE ASSIGINED TO BOTH ATTACHED AND NOT ATTACH ELEMENTS.

1. <! DOCTYPE html> <html><head><style> * {color: green; font-size: 20px;} </style></head><body> This
css style will be applied on Entire page. It does not check tag or plain text<br> <h2>This css is applied
to heading</h2> <p id="para1">it is applied to first paragraph</p> <p>Also to second paragraph!
</p></body></html>

4.GROUP SELECTOR

1. DECLARE GROUP SELECTOR FOR SIMILAR ELEMENTS.

2. ELEMENTS ARE SEPERATED BY COMMA.

3. CALL THIS ELEMENTS INSIDE BODY TAG.

CONCLUSION: SIMILAR ELEMENTS CAN BE GROUPED TOGETHER SEPERATED BY COMMA.

1. <! DOCTYPE html><html><head><style> h1, h2, p {text-align: center; color: blue}


</style></head><body> <h1>Hello Heading 1</h1> <h2>HelloHeading2(In smaller font) </h2> <p>This
is a paragraph. </p> </body></html>

2. <! DOCTYPE html> <html><head><style> h1, h2, h3, h4, h5, h6, p {text-align: center; color: blue}
</style></head><body> <h1>Hello Heading 1</h1><br> <h2>HelloHeading2(In smaller font) </h2><br>
<h3>HelloHeading3(In smaller font) </h3><br> <h4>HelloHeading4(In smaller font) </h4><br>
<h5>HelloHeading5(In smaller font) </h5><br> <h6>HelloHeading6(In smallest font) </h6><br> <p>This
is a paragraph. </p> </body></html>

-END-

You might also like