SlideShare une entreprise Scribd logo
1  sur  7
Télécharger pour lire hors ligne
WDES106
CSS Advanced -- Part 2




                    about.me/babon
CSS Advanced Topics
CSS Pseudo-class (Part 2)
CSS Pseudo-element (Part 2)
CSS Navigation Bar (Part 1)
CSS Image Gallery (Part 1)
CSS Image Opacity (Part 1)
CSS Image Sprites (Part 1)
CSS Media Types (Part 2)
CSS Attribute Selectors (Part 2)

                                   about.me/babon
CSS Pseudo-class
CSS pseudo-classes are used to add special
effects to some selectors.

Selector       Example     LOVE | HATE
:link          a:link
:visited       a:visited
:hover         a:hover
:active        a:active

                                about.me/babon
CSS Pseudo-element
Selector        Example
:focus          input:focus
:first-letter   p:first-letter
:first-line     p:first-line
:first-child    p:first-child
:before         p:before
:after          p:after
:lang(language) p:lang(it)

                                 about.me/babon
CSS Pseudo-element
Example:

pseudo_class.html




                     about.me/babon
CSS Media Types
The @media rule allows different style rules for
different media in the same style sheet.

See Responsive Design example:

CSS3: The Missing Manual




                                  about.me/babon
CSS Attribute Selectors




                          about.me/babon

Contenu connexe

Similaire à WDES106 CSS Advanced Part 2

3-CSS_essentials.ppt
3-CSS_essentials.ppt3-CSS_essentials.ppt
3-CSS_essentials.pptscet315
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbookjackchenvlo
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style SheetsMarc Steel
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSSMSA Technosoft
 
3 css essentials
3 css essentials3 css essentials
3 css essentialsAnchu S
 
Intro to CSS Selectors in Drupal
Intro to CSS Selectors in DrupalIntro to CSS Selectors in Drupal
Intro to CSS Selectors in Drupalcgmonroe
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS WorkshopJulie Cameron
 
CSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI DevelopersCSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI DevelopersDarren Gideon
 
Css jon duckett - flashcards
Css   jon duckett - flashcardsCss   jon duckett - flashcards
Css jon duckett - flashcardsChirag Aggarwal
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
 
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
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
TMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS BasicsTMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS Basicsnolly00
 

Similaire à WDES106 CSS Advanced Part 2 (20)

3-CSS_essentials.ppt
3-CSS_essentials.ppt3-CSS_essentials.ppt
3-CSS_essentials.ppt
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSS
 
Css and its future
Css and its futureCss and its future
Css and its future
 
3 css essentials
3 css essentials3 css essentials
3 css essentials
 
Intro to CSS Selectors in Drupal
Intro to CSS Selectors in DrupalIntro to CSS Selectors in Drupal
Intro to CSS Selectors in Drupal
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS Workshop
 
Css
CssCss
Css
 
The Cascade is Dead
The Cascade is DeadThe Cascade is Dead
The Cascade is Dead
 
CSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI DevelopersCSS101 - Concept Fundamentals for non UI Developers
CSS101 - Concept Fundamentals for non UI Developers
 
Css
CssCss
Css
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
Css jon duckett - flashcards
Css   jon duckett - flashcardsCss   jon duckett - flashcards
Css jon duckett - flashcards
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
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
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
TMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS BasicsTMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS Basics
 
Css1
Css1Css1
Css1
 

Plus de Gene Babon

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysGene Babon
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingGene Babon
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Gene Babon
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web DeveloperGene Babon
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web TechnologyGene Babon
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things DoneGene Babon
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4Gene Babon
 

Plus de Gene Babon (20)

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling Alleys
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch Meeting
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web Developer
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web Technology
 
Info Session
Info SessionInfo Session
Info Session
 
Info session
Info sessionInfo session
Info session
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things Done
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 18
Lesson 18Lesson 18
Lesson 18
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 16
Lesson 16Lesson 16
Lesson 16
 
Lesson 15
Lesson 15Lesson 15
Lesson 15
 
Lesson 11
Lesson 11Lesson 11
Lesson 11
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
 
Lesson 09
Lesson 09Lesson 09
Lesson 09
 
Lesson 05
Lesson 05Lesson 05
Lesson 05
 
Lesson 04
Lesson 04Lesson 04
Lesson 04
 
Lesson 03
Lesson 03Lesson 03
Lesson 03
 

WDES106 CSS Advanced Part 2