SlideShare uma empresa Scribd logo
1 de 15
Cascading Style Sheets
Introduction ,[object Object],[object Object],[object Object],[object Object]
Reminder: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Reminder: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Reminder: ,[object Object],[object Object],[object Object],[object Object],[object Object],<html> <head>   ...   <link href= “styles.css”  rel=“stylesheet”  type=“text/css” /> </head> <body>   ...   <p>some text</p> </body> </html>
Reminder: ,[object Object],Into HTML file <head> ... <style type= “text/css”> @import url( “styles.css”); </style> </head> Into another style sheet  - @import instruction must be first  line of file! @import url( “styles.css”); /*other stylesheet starts here*/ h1 { font-size: 200%; color: #6b84b5 }
Order of Precedence ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Types of CSS styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Class Selector Styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ID Selector styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What is the Difference between  class  &  id ? ,[object Object],[object Object]
Using Pseudoclasses ,[object Object],[object Object],[object Object]
Using Pseudoclasses Pseudoclass Match :link :visited :active :hover :focus Unvisited links Visited links Active links The link that the browser pointer is hovering over The link that currently has the user interface focus
Pseudoclasses example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Cascading -  Order of Precedence ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Html Styles-CSS
Html Styles-CSSHtml Styles-CSS
Html Styles-CSS
 
CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
HTML and CSS
HTML and CSSHTML and CSS
HTML and CSS
 
CSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And TipsCSS Basic Introduction, Rules, And Tips
CSS Basic Introduction, Rules, And Tips
 
Introduction to css & its attributes with syntax
Introduction to css & its attributes with syntaxIntroduction to css & its attributes with syntax
Introduction to css & its attributes with syntax
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Html and css
Html and cssHtml and css
Html and css
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
 
chitra
chitrachitra
chitra
 
Week11 Lecture: CSS
Week11 Lecture: CSSWeek11 Lecture: CSS
Week11 Lecture: CSS
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Css
CssCss
Css
 

Destaque

Destaque (16)

Css from scratch
Css from scratchCss from scratch
Css from scratch
 
Pseudo CSS Selectors
Pseudo CSS SelectorsPseudo CSS Selectors
Pseudo CSS Selectors
 
JDBC
JDBCJDBC
JDBC
 
CSS Pseudo Classes
CSS Pseudo ClassesCSS Pseudo Classes
CSS Pseudo Classes
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Css
CssCss
Css
 
Css pseudo-classes
Css pseudo-classesCss pseudo-classes
Css pseudo-classes
 
Css ppt
Css pptCss ppt
Css ppt
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
JDBC – Java Database Connectivity
JDBC – Java Database ConnectivityJDBC – Java Database Connectivity
JDBC – Java Database Connectivity
 
JDBC Java Database Connectivity
JDBC Java Database ConnectivityJDBC Java Database Connectivity
JDBC Java Database Connectivity
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Agile Development | Agile Process Models
Agile Development | Agile Process ModelsAgile Development | Agile Process Models
Agile Development | Agile Process Models
 
Jdbc Ppt
Jdbc PptJdbc Ppt
Jdbc Ppt
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 

Semelhante a Casc Style Sheets Ii

1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Content
maycourse
 
Semantically Correct And Standards Compliance Html
Semantically Correct And Standards Compliance HtmlSemantically Correct And Standards Compliance Html
Semantically Correct And Standards Compliance Html
sanjay2211
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSS
Vlad Posea
 

Semelhante a Casc Style Sheets Ii (20)

Css
CssCss
Css
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
Week3 css
Week3 cssWeek3 css
Week3 css
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Content
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Design Dream
Design DreamDesign Dream
Design Dream
 
Semantically Correct And Standards Compliance Html
Semantically Correct And Standards Compliance HtmlSemantically Correct And Standards Compliance Html
Semantically Correct And Standards Compliance Html
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Css intro
Css introCss intro
Css intro
 
AttributesL3.pptx
AttributesL3.pptxAttributesL3.pptx
AttributesL3.pptx
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSS
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
AK css
AK cssAK css
AK css
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
Chapter 02
Chapter 02Chapter 02
Chapter 02
 

Mais de Digital Insights - Digital Marketing Agency

Mais de Digital Insights - Digital Marketing Agency (20)

Diploma-GCD-ContentMarketing-Personas-Week2
Diploma-GCD-ContentMarketing-Personas-Week2Diploma-GCD-ContentMarketing-Personas-Week2
Diploma-GCD-ContentMarketing-Personas-Week2
 
DigitalInsights-DigitalMarketingStrategy&Planning
DigitalInsights-DigitalMarketingStrategy&PlanningDigitalInsights-DigitalMarketingStrategy&Planning
DigitalInsights-DigitalMarketingStrategy&Planning
 
DI-Facebook-DCEB-Session
DI-Facebook-DCEB-SessionDI-Facebook-DCEB-Session
DI-Facebook-DCEB-Session
 
DBS-Week2-DigitalStrategySession
DBS-Week2-DigitalStrategySessionDBS-Week2-DigitalStrategySession
DBS-Week2-DigitalStrategySession
 
GCD-Measurement&Analytics-Week11
GCD-Measurement&Analytics-Week11GCD-Measurement&Analytics-Week11
GCD-Measurement&Analytics-Week11
 
DBS-Week1-Introduction&OverviewDigitalMarketing
DBS-Week1-Introduction&OverviewDigitalMarketingDBS-Week1-Introduction&OverviewDigitalMarketing
DBS-Week1-Introduction&OverviewDigitalMarketing
 
DCEB-DigitalStrategySession-Jan24th
DCEB-DigitalStrategySession-Jan24thDCEB-DigitalStrategySession-Jan24th
DCEB-DigitalStrategySession-Jan24th
 
GCD-eCommcereCaseStudies
GCD-eCommcereCaseStudiesGCD-eCommcereCaseStudies
GCD-eCommcereCaseStudies
 
GCD-Week8-EmailMarketing
GCD-Week8-EmailMarketingGCD-Week8-EmailMarketing
GCD-Week8-EmailMarketing
 
GCD-Week7-SEO-Session
GCD-Week7-SEO-SessionGCD-Week7-SEO-Session
GCD-Week7-SEO-Session
 
Week12-DBS-ReviewAndPlanningSession
Week12-DBS-ReviewAndPlanningSessionWeek12-DBS-ReviewAndPlanningSession
Week12-DBS-ReviewAndPlanningSession
 
GCD-Week5-Facebook-LinkedIn-Ads
GCD-Week5-Facebook-LinkedIn-AdsGCD-Week5-Facebook-LinkedIn-Ads
GCD-Week5-Facebook-LinkedIn-Ads
 
DBS-Week11-Measurement&Analyics
DBS-Week11-Measurement&AnalyicsDBS-Week11-Measurement&Analyics
DBS-Week11-Measurement&Analyics
 
GCD-Week6-PPC-Ads-Session
GCD-Week6-PPC-Ads-SessionGCD-Week6-PPC-Ads-Session
GCD-Week6-PPC-Ads-Session
 
RPC-Wordpress-Session
RPC-Wordpress-SessionRPC-Wordpress-Session
RPC-Wordpress-Session
 
DBS-Week10-EcommSites&SalesFunnells
DBS-Week10-EcommSites&SalesFunnellsDBS-Week10-EcommSites&SalesFunnells
DBS-Week10-EcommSites&SalesFunnells
 
GCD-Week5-SocialMediaPlatforms
GCD-Week5-SocialMediaPlatformsGCD-Week5-SocialMediaPlatforms
GCD-Week5-SocialMediaPlatforms
 
DBS-Week3-B2C&B2B-ContentMarketing-Session
DBS-Week3-B2C&B2B-ContentMarketing-SessionDBS-Week3-B2C&B2B-ContentMarketing-Session
DBS-Week3-B2C&B2B-ContentMarketing-Session
 
ECM-PPC-Session
ECM-PPC-SessionECM-PPC-Session
ECM-PPC-Session
 
DBS-Week9-Wordpress-Session
DBS-Week9-Wordpress-SessionDBS-Week9-Wordpress-Session
DBS-Week9-Wordpress-Session
 

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Último (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 

Casc Style Sheets Ii

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. Using Pseudoclasses Pseudoclass Match :link :visited :active :hover :focus Unvisited links Visited links Active links The link that the browser pointer is hovering over The link that currently has the user interface focus
  • 14.
  • 15.