Css selectors
Download as PPTX, PDF2 likes7,174 views
There are 6 types of CSS selectors: simple, class, generic, ID, universal, and pseudo-class selectors. Simple selectors apply styles to single elements. Class selectors allow assigning different styles to the same element on different occurrences. ID selectors define special styles for specific elements. Generic selectors define styles that can be applied to any tag. Universal selectors apply styles to all elements on a page. Pseudo-class selectors give special effects like focus and hover.
Css selectors
- 1. CSS SELECTORS Prepared By: Parth Trivedi…ツ
- 2. TYPES OF SELECTORS There are 6 types of selectors 1. Simple Selector 2. Class Selector 3. Generic Selector 4. Id Selector 5. Universal Selector 6. Pseudo Classes
- 3. SIMPLE SELECTOR The Simple Selector form is a single element to which the property and value is applied For example h1 { font-size:20pt; color:red; }
- 6. CLASS SELECTOR Using Class Selector we can assign different styles to the same element. These different styles appear on different occurrences of that element. For example H1.RedText { font-size:20pt; color:red; } <body> <h1 class=“RedText”>Heading</h1> </body>
- 9. GENERIC SELECTOR We define the class in generalized form, that particular class can be applied to any tag. For example .RedText { font-size:20pt; color:red; } <body> <h1 class=“RedText”>Heading</h1> </body>
- 12. ID SELECTOR To define a special style for special element we can use “id Selector”. The id Selector is similar to the Class Selector. Syntax:- #name_of_id{property:value list;} For example #RedText { font-size:20pt; color:red; } <body> <h1 id=“RedText”>Heading</h1> </body>
- 15. UNIVERSAL SELECTOR This Selector is denoted by ”*”. This selector applied to all the elements in the document. For example * { font-size:20pt; color:red; }
- 18. PSEUDO CLASSES Using Pseudo classes we can give special effects on the selector. There some pseudo classes which are more commonly used • Focus • Hover • Hyperlink Syntax:- selector:pseudo-class {property:value list;}
- 24. Thank You...ツ