SlideShare a Scribd company logo
1 of 24
CSS- Cascading Stylesheets   Layout for web  and XML
Cascading Stylesheets ,[object Object],[object Object],[object Object]
CSS - Historical perspektive ,[object Object],[object Object],[object Object],[object Object]
Examples ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Before File a.html [
] <p> <font face=&quot;Helvetica&quot;> Text in Helvetica </font> </p> [
]
Internal or external CSS ,[object Object],[object Object],[object Object]
Associating an  XML-document ->CSS ,[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]
Associating an  HTML-document ->CSS ,[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],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Basic principle: Pattern -> Behaviour ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Selector: All p-elements Property Property value
Different selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Matches   all elements matches all a-elements which are decendents to p-elements
Different selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Matches a-elements which are children to p-elements. Matches all a-elements which directly follows a p-elements (siblings) Example: <p> <a></a> </p> <p> <strong> <a>Hej</a> </strong> </p> Matches Matches inte
Matching attributes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Pseudo classes and pseudo elements ,[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],[object Object],[object Object],[object Object],[object Object],Properties: Height/length/size Obs! TvÄ properties till samma selektor, separerat med semikolon
Properties:Fonter ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Properties:Texts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Properties:Colours ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Advanced 1: Counters ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Advanced 2: Classes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Advanced 3:  Pseudoclasses for links ,[object Object],[object Object],[object Object],[object Object],[object Object]
Advanced 4:  media types ,[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],[object Object],[object Object],[object Object]
Advanced 5: the print media type ,[object Object],[object Object],[object Object],[object Object]
Advanced 6: mediatypen aural ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Browsersupport ,[object Object],[object Object],[object Object]
Limitations and possibilities ,[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot

Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
BG Java EE Course
 
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
Michael(tm) Smith
 

What's hot (20)

Class2
Class2Class2
Class2
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
 
What is xml
What is xmlWhat is xml
What is xml
 
[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags
 
Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
The Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for BeginnersThe Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for Beginners
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
 
Html
HtmlHtml
Html
 
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
 
HTML Basic Tags
HTML Basic Tags HTML Basic Tags
HTML Basic Tags
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
Html For Beginners 2
Html For Beginners 2Html For Beginners 2
Html For Beginners 2
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)
 
Ict html
Ict htmlIct html
Ict html
 
Html 5
Html 5Html 5
Html 5
 
Quick Referance to WML
Quick Referance to WMLQuick Referance to WML
Quick Referance to WML
 
Xhtml
XhtmlXhtml
Xhtml
 
Html
HtmlHtml
Html
 

Viewers also liked (7)

Presentacion Gpe 2005
Presentacion Gpe 2005Presentacion Gpe 2005
Presentacion Gpe 2005
 
Now We Are Friends, Now We Are
Now We Are Friends, Now We AreNow We Are Friends, Now We Are
Now We Are Friends, Now We Are
 
Medical images in the "cloud" by Ándago
Medical images in the "cloud" by ÁndagoMedical images in the "cloud" by Ándago
Medical images in the "cloud" by Ándago
 
mareke
marekemareke
mareke
 
Placas Rojas
Placas RojasPlacas Rojas
Placas Rojas
 
Organise your information chaos
Organise your information chaosOrganise your information chaos
Organise your information chaos
 
Monday Notes #9 11 4 07
Monday Notes #9 11 4 07Monday Notes #9 11 4 07
Monday Notes #9 11 4 07
 

Similar to CSS

Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
Mark Frydenberg
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSS
Vlad Posea
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
sanjay2211
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 

Similar to CSS (20)

Web Designing
Web DesigningWeb Designing
Web Designing
 
CSS For Online Journalism
CSS For Online JournalismCSS For Online Journalism
CSS For Online Journalism
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
Html
HtmlHtml
Html
 
CSS
CSSCSS
CSS
 
XHTML and CSS
XHTML and CSS XHTML and CSS
XHTML and CSS
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
Css advanced – session 5
Css advanced – session 5Css advanced – session 5
Css advanced – session 5
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
Css
CssCss
Css
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
KMUTNB - Internet Programming 4/7
KMUTNB - Internet Programming 4/7KMUTNB - Internet Programming 4/7
KMUTNB - Internet Programming 4/7
 
HTML
HTMLHTML
HTML
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSS
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
HTML5 Fundamentals
HTML5 FundamentalsHTML5 Fundamentals
HTML5 Fundamentals
 
CSS
CSSCSS
CSS
 

More from bjornh

Info kexjobb-2013-11-11
Info kexjobb-2013-11-11Info kexjobb-2013-11-11
Info kexjobb-2013-11-11
bjornh
 
LIKT seminar on mobile learning
LIKT seminar on mobile learningLIKT seminar on mobile learning
LIKT seminar on mobile learning
bjornh
 
Location-based mLearning reminders
Location-based mLearning remindersLocation-based mLearning reminders
Location-based mLearning reminders
bjornh
 
Podcastseminarium
PodcastseminariumPodcastseminarium
Podcastseminarium
bjornh
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
bjornh
 
Device Independence
Device IndependenceDevice Independence
Device Independence
bjornh
 

More from bjornh (20)

Info kexjobb-2013-11-11
Info kexjobb-2013-11-11Info kexjobb-2013-11-11
Info kexjobb-2013-11-11
 
Info om masterval och kexjobb, medieteknik KTH VT2013
Info om masterval och kexjobb, medieteknik KTH VT2013Info om masterval och kexjobb, medieteknik KTH VT2013
Info om masterval och kexjobb, medieteknik KTH VT2013
 
Teaching procrastination - A way of helping students to improve their study h...
Teaching procrastination - A way of helping students to improve their study h...Teaching procrastination - A way of helping students to improve their study h...
Teaching procrastination - A way of helping students to improve their study h...
 
Info masterval medieteknik pÄ KTH 2012-05-03
Info masterval medieteknik pÄ KTH 2012-05-03Info masterval medieteknik pÄ KTH 2012-05-03
Info masterval medieteknik pÄ KTH 2012-05-03
 
Info masterval och kexjobb i medieteknik KTH HT 2011
Info masterval och kexjobb i medieteknik KTH HT 2011Info masterval och kexjobb i medieteknik KTH HT 2011
Info masterval och kexjobb i medieteknik KTH HT 2011
 
LIKT seminar on mobile learning
LIKT seminar on mobile learningLIKT seminar on mobile learning
LIKT seminar on mobile learning
 
Location-based mLearning reminders
Location-based mLearning remindersLocation-based mLearning reminders
Location-based mLearning reminders
 
K-Seminar on mobile learning
K-Seminar on mobile learningK-Seminar on mobile learning
K-Seminar on mobile learning
 
Podcastseminarium
PodcastseminariumPodcastseminarium
Podcastseminarium
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
XML Schemas
XML SchemasXML Schemas
XML Schemas
 
XSL-FO
XSL-FOXSL-FO
XSL-FO
 
RDF och RSS
RDF och RSSRDF och RSS
RDF och RSS
 
Namespaces
NamespacesNamespaces
Namespaces
 
Device Independence
Device IndependenceDevice Independence
Device Independence
 
XSLT
XSLTXSLT
XSLT
 
CSS
CSSCSS
CSS
 
PHP och MySQL
PHP och MySQLPHP och MySQL
PHP och MySQL
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
XML och DTD
XML och DTDXML och DTD
XML och DTD
 

Recently uploaded

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

Recently uploaded (20)

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?
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
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
 
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
 
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
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
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
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
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
 
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
 
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
 

CSS

  • 1. CSS- Cascading Stylesheets Layout for web and XML
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.