SlideShare uma empresa Scribd logo
1 de 28
Cascading Style Sheets Tushar Joshi
Basic Concepts ,[object Object],[object Object],[object Object],H1 { color: blue } Selector Declaration property value Simple CSS Rule
Basic Concepts ,[object Object],[object Object],<HTML>  <HEAD>    <TITLE>title</TITLE>    <LINK REL=STYLESHEET TYPE=&quot;text/css“   HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;>   <STYLE TYPE=&quot;text/css&quot;>    @import url(http://style.com/basic);    H1 { color: blue }    </STYLE>  </HEAD>  <BODY>    <H1>Headline is blue</H1>    <P STYLE=&quot;color: green&quot;>   While the paragraph is green.  </BODY>  </HTML>
Basic Concepts ,[object Object],[object Object],<HTML>  <HEAD>    <TITLE>title</TITLE>    <LINK REL=STYLESHEET TYPE=&quot;text/css“   HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;>   <STYLE TYPE=&quot;text/css&quot;>    @import url(http://style.com/basic);    H1 { color: blue }    </STYLE>  </HEAD>  <BODY>    <H1>Headline is blue</H1>    <P STYLE=&quot;color: green&quot;>   While the paragraph is green.  </BODY>  </HTML>
Basic Concepts ,[object Object],[object Object],<HTML>  <HEAD>    <TITLE>title</TITLE>    <LINK REL=STYLESHEET TYPE=&quot;text/css“   HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;>   <STYLE TYPE=&quot;text/css&quot;>    @import url(http://style.com/basic);    H1 { color: blue }    </STYLE>  </HEAD>  <BODY>    <H1>Headline is blue</H1>    <P STYLE=&quot;color: green&quot;>   While the paragraph is green.  </BODY>  </HTML>
Basic Concepts ,[object Object],[object Object],<HTML>  <HEAD>    <TITLE>title</TITLE>    <LINK REL=STYLESHEET TYPE=&quot;text/css“   HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;>   <STYLE TYPE=&quot;text/css&quot;>    @import url(http://style.com/basic);    H1 { color: blue }    </STYLE>  </HEAD>  <BODY>    <H1>Headline is blue</H1>    <P STYLE=&quot;color: green&quot;>   While the paragraph is green.  </BODY>  </HTML>
Basic Concepts ,[object Object],[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object],<HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE=&quot;text/css&quot;> H1.pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> </BODY> </HTML>
Basic Concepts ,[object Object],[object Object],[object Object],<HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE=&quot;text/css&quot;> .pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1>   <P CLASS=pastoral>My Paragraph</P> </BODY> </HTML>
Basic Concepts ,[object Object],[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],A:link { color: red }  /* unvisited link */ A:visited { color: blue }  /* visited links */ A:active { color: lime }  /* active links */
Basic Concepts ,[object Object],[object Object],A.alpha:link { color: red }  /* unvisited link */ A.beta:visited { color: blue }  /* visited links */ A.gamma:active { color: lime }  /* active links */ <a class=alpha>Click Me</a>
Basic Concepts ,[object Object],[object Object],[object Object],A:link IMG { border: solid red } <A class=alpha><IMG SRC=flower.gif></A>
Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],In CSS1,  all '@import' statements must occur  at the start of a style sheet
Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object]
Basic Concepts ,[object Object],[object Object],[object Object],[object Object],Formatting Model
Basic Concepts ,[object Object],[object Object]
Reference Material ,[object Object],[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Mais procurados

JavaScript: Variables and Functions
JavaScript: Variables and FunctionsJavaScript: Variables and Functions
JavaScript: Variables and Functions
Jussi Pohjolainen
 

Mais procurados (20)

Css pseudo-classes
Css pseudo-classesCss pseudo-classes
Css pseudo-classes
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Css floats
Css floatsCss floats
Css floats
 
Css
CssCss
Css
 
Html
HtmlHtml
Html
 
JavaScript: Variables and Functions
JavaScript: Variables and FunctionsJavaScript: Variables and Functions
JavaScript: Variables and Functions
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
Html coding
Html codingHtml coding
Html coding
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Control Structures In Php 2
Control Structures In Php 2Control Structures In Php 2
Control Structures In Php 2
 
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
JavaScript - Chapter 5 - Operators
 JavaScript - Chapter 5 - Operators JavaScript - Chapter 5 - Operators
JavaScript - Chapter 5 - Operators
 
Jquery
JqueryJquery
Jquery
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 

Destaque

Html Css
Html CssHtml Css
Html Css
pumas26
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Paul Dionysius
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Marc Steel
 
Cascading style sheets (css)
Cascading style sheets (css)Cascading style sheets (css)
Cascading style sheets (css)
veasnarin
 
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - IntroductionCSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
Mukesh Tekwani
 
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box ModelCSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
jamiecavanaugh
 
Casestudy landscape ip park.
Casestudy landscape ip park.Casestudy landscape ip park.
Casestudy landscape ip park.
Antima Kuda
 
What is landscape? What is landscape architecture? What is landscape design? ...
What is landscape? What is landscape architecture? What is landscape design? ...What is landscape? What is landscape architecture? What is landscape design? ...
What is landscape? What is landscape architecture? What is landscape design? ...
ktball
 

Destaque (20)

Css1
Css1Css1
Css1
 
Css advanced – session 4
Css advanced – session 4Css advanced – session 4
Css advanced – session 4
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css
CssCss
Css
 
Html Css
Html CssHtml Css
Html Css
 
Cashcading stylesheets
Cashcading stylesheetsCashcading stylesheets
Cashcading stylesheets
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
 
Cascading style sheets (css)
Cascading style sheets (css)Cascading style sheets (css)
Cascading style sheets (css)
 
CSS
CSSCSS
CSS
 
Cascading style sheets - CSS
Cascading style sheets - CSSCascading style sheets - CSS
Cascading style sheets - CSS
 
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
 
CSS Selectors
CSS SelectorsCSS Selectors
CSS Selectors
 
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - IntroductionCSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
 
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box ModelCSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
 
Casestudy landscape ip park.
Casestudy landscape ip park.Casestudy landscape ip park.
Casestudy landscape ip park.
 
What is landscape? What is landscape architecture? What is landscape design? ...
What is landscape? What is landscape architecture? What is landscape design? ...What is landscape? What is landscape architecture? What is landscape design? ...
What is landscape? What is landscape architecture? What is landscape design? ...
 

Semelhante a Introduction to Cascading Style Sheets

Css Basics
Css BasicsCss Basics
Css Basics
ehorner
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSS
Vlad Posea
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Jerome Locson
 
Html Presentation Of Web Page Making
Html Presentation Of Web Page MakingHtml Presentation Of Web Page Making
Html Presentation Of Web Page Making
Sandeep Supal
 

Semelhante a Introduction to Cascading Style Sheets (20)

Design Dream
Design DreamDesign Dream
Design Dream
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
CSS
CSSCSS
CSS
 
AK css
AK cssAK css
AK css
 
Css
CssCss
Css
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 
Html intro
Html introHtml intro
Html intro
 
Html intro
Html introHtml intro
Html intro
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Diva
DivaDiva
Diva
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSS
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
CSS
CSSCSS
CSS
 
Lecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPLecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITP
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
Html Presentation Of Web Page Making
Html Presentation Of Web Page MakingHtml Presentation Of Web Page Making
Html Presentation Of Web Page Making
 
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
 

Mais de Tushar Joshi (7)

College Java vs Real Java - Tushar Joshi
College Java vs Real Java  - Tushar JoshiCollege Java vs Real Java  - Tushar Joshi
College Java vs Real Java - Tushar Joshi
 
How Google Search Works By Tushar Joshi
How Google Search Works   By Tushar Joshi How Google Search Works   By Tushar Joshi
How Google Search Works By Tushar Joshi
 
Open source software by Tushar Joshi
Open source software by Tushar JoshiOpen source software by Tushar Joshi
Open source software by Tushar Joshi
 
Technology User Group - Tushar Joshi
Technology User Group  - Tushar JoshiTechnology User Group  - Tushar Joshi
Technology User Group - Tushar Joshi
 
Working with Passion in daily life by Tushar Joshi Nagpur
Working with Passion in daily life by Tushar Joshi NagpurWorking with Passion in daily life by Tushar Joshi Nagpur
Working with Passion in daily life by Tushar Joshi Nagpur
 
PHPUnit from a developer's perspective
PHPUnit from a developer's perspectivePHPUnit from a developer's perspective
PHPUnit from a developer's perspective
 
Working With Passion by Tushar Joshi
Working With Passion by  Tushar JoshiWorking With Passion by  Tushar Joshi
Working With Passion by Tushar Joshi
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
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...
 
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...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
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?
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
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
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 

Introduction to Cascading Style Sheets

  • 1. Cascading Style Sheets Tushar Joshi
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.