SlideShare a Scribd company logo

Css selectors

•Download as PPTX, PDF•
•
Parth Trivedi
Parth Trivedi

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.

Related slideshows

CSS
CSSCSS
CSS
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
1 of 24
CSS SELECTORS Prepared By: Parth Trivedi…ツ
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
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; }
Css selectors
Css selectors
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>
Css selectors
Css selectors
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>
Css selectors
Css selectors
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>
Css selectors
Css selectors
UNIVERSAL SELECTOR This Selector is denoted by ”*”. This selector applied to all the elements in the document. For example * { font-size:20pt; color:red; }
Css selectors
Css selectors
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;}
Css selectors
Css selectors
Css selectors
Css selectors
Css selectors
Thank You...ツ

More Related Content

Css selectors

  • 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;}