SlideShare a Scribd company logo
1 of 3
CSS Selectors
• Find elements by using CSS selectors and
jQuery
• Structure a CSS file by using CSS selectors
Agenda
 Choose the correct selector to reference an element.
 Define element, style, and attribute selectors.
 Find elements by using pseudo-elements and pseudo-
classes (for example, :before, :first-line, :first-letter, :target,
:lang, :checked, :first-child)Reference elements correctly.
 Implement inheritance; override inheritance by using
!important
 Style an element based on pseudo-elements and pseudo-
classes (for example, :before, :first-line, :first-letter, :target,
:lang, :checked, :first-child).
http://www.w3schools.com/cssref/css_selectors.asp
Goal and Objective
 How can control the style of the our html elements using CSS
selectors.
 how we can differentiate element or using different style for
elements of the same type.

More Related Content

Similar to CSS Selectors

CSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And TipsCSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And TipsReema
 
Web Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptxWeb Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptxclement swarnappa
 
Web 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style SheetsWeb 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style SheetsMohammad Imam Hossain
 
Session 02 - Object Identification - Part 1
Session 02 - Object Identification - Part 1Session 02 - Object Identification - Part 1
Session 02 - Object Identification - Part 1SiddharthSelenium
 
Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2hstryk
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSSMSA Technosoft
 
Caffeinated Style Sheets
Caffeinated Style SheetsCaffeinated Style Sheets
Caffeinated Style SheetsTommy Hodgins
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSSAmeer Khan
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designersSingsys Pte Ltd
 
CSS introduction
CSS introductionCSS introduction
CSS introductionCloudTech 
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Erin M. Kidwell
 
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)ghayour abbas
 

Similar to CSS Selectors (20)

CSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And TipsCSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And Tips
 
Basic css
Basic cssBasic css
Basic css
 
Web Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptxWeb Concepts_Introduction to presentation.pptx
Web Concepts_Introduction to presentation.pptx
 
Web 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style SheetsWeb 2 | CSS - Cascading Style Sheets
Web 2 | CSS - Cascading Style Sheets
 
Session 02 - Object Identification - Part 1
Session 02 - Object Identification - Part 1Session 02 - Object Identification - Part 1
Session 02 - Object Identification - Part 1
 
Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2Lesson 3 - HTML & CSS Part 2
Lesson 3 - HTML & CSS Part 2
 
Angular JS
Angular JSAngular JS
Angular JS
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 
CSS.pdf
CSS.pdfCSS.pdf
CSS.pdf
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSS
 
Caffeinated Style Sheets
Caffeinated Style SheetsCaffeinated Style Sheets
Caffeinated Style Sheets
 
CSS-part-1.ppt
CSS-part-1.pptCSS-part-1.ppt
CSS-part-1.ppt
 
Intro to css
Intro to cssIntro to css
Intro to css
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Web 102 INtro to CSS
Web 102  INtro to CSSWeb 102  INtro to CSS
Web 102 INtro to CSS
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
Web Development 4
Web Development 4Web Development 4
Web Development 4
 
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)
 

CSS Selectors

  • 1. CSS Selectors • Find elements by using CSS selectors and jQuery • Structure a CSS file by using CSS selectors
  • 2. Agenda  Choose the correct selector to reference an element.  Define element, style, and attribute selectors.  Find elements by using pseudo-elements and pseudo- classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)Reference elements correctly.  Implement inheritance; override inheritance by using !important  Style an element based on pseudo-elements and pseudo- classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child). http://www.w3schools.com/cssref/css_selectors.asp
  • 3. Goal and Objective  How can control the style of the our html elements using CSS selectors.  how we can differentiate element or using different style for elements of the same type.

Editor's Notes

  1. Use multiple points, if necessary.