SlideShare uma empresa Scribd logo
1 de 7
Cascading Style Sheets (CSS)An introduction By Rachael Dill Boyer For COM 585
What CSS is, and isn’t A Cascading Style Sheet is a set of rules that contains the elements of style for a web page, such as background color, font type, borders, and sizes.  “Cascading” means from the homepage on down through the rest of the site. HTML or XHTML code files have the the text/content that appears on a page.  So, CSS has style, and HTML has substance.
Why CSS? Keeping style elements separate from text and content elements has several advantages:  HTML code is cleaner, with fewer errors  Code is faster to create (ex. a rule about heading style will apply to ALL headings) Changes can be made efficiently (ex. changing out company colors after a rebranding can be made in one place for all pages)
More benefits of CSS Web pages are more accessible for visitors with visual impairments Different CSS files can be linked to the same HTML file, so the same content can appear differently (mobile, print layout, different PC or Mac browsers, TV screens, etc…) Pages load faster, since the browser stores the site’s CSS from the first page visited, and just loads the HTML for each subsequent page
Types of CSS documents External Style Sheets are saved as a separate file, linked to from an HTML document. These are most versatile, and effective. Sometimes you may need to use an Internal Style Sheet within an HTML file to override a set of rules from an external CSS document.
So what does this look like?
Credits W3schools.com Intro to CSS World Wide Web Consortium (W3C), What is CSS? Ch. 9 of Beginning Web Programming with HTML, XHTML, and CSS, by Jon Duckett

Mais conteúdo relacionado

Destaque

CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - IntroductionCSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
Mukesh Tekwani
 

Destaque (12)

Css(cascading style sheets)
Css(cascading style sheets)Css(cascading style sheets)
Css(cascading style sheets)
 
Curso de cascading style sheets (css)
Curso de cascading style sheets (css)Curso de cascading style sheets (css)
Curso de cascading style sheets (css)
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
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-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - IntroductionCSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
 
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 Systems
CSS SystemsCSS Systems
CSS Systems
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The Ugly
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 

Semelhante a Cascading Style Sheets (CSS) - An introduction

Unit iii css and javascript 1
Unit iii css and javascript 1Unit iii css and javascript 1
Unit iii css and javascript 1
Jesus Obenita Jr.
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10
Sutinder Mann
 
This is css which compiled by alex that is impo
This is css which compiled by alex that is impoThis is css which compiled by alex that is impo
This is css which compiled by alex that is impo
AlebelAyalneh
 
LIS3353 SP12 Week 12
LIS3353 SP12 Week 12LIS3353 SP12 Week 12
LIS3353 SP12 Week 12
Amanda Case
 

Semelhante a Cascading Style Sheets (CSS) - An introduction (20)

Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
Css introduction
Css   introductionCss   introduction
Css introduction
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
 
intro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptxintro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptx
 
Css
CssCss
Css
 
Full
FullFull
Full
 
Css
CssCss
Css
 
Css training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentialsCss training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentials
 
New Css style
New Css styleNew Css style
New Css style
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Unit iii css and javascript 1
Unit iii css and javascript 1Unit iii css and javascript 1
Unit iii css and javascript 1
 
Introduction to CSS Class - 1
Introduction to CSS Class - 1Introduction to CSS Class - 1
Introduction to CSS Class - 1
 
Higher Computing Science CSS
Higher Computing Science CSSHigher Computing Science CSS
Higher Computing Science CSS
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10
 
This is css which compiled by alex that is impo
This is css which compiled by alex that is impoThis is css which compiled by alex that is impo
This is css which compiled by alex that is impo
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
LIS3353 SP12 Week 12
LIS3353 SP12 Week 12LIS3353 SP12 Week 12
LIS3353 SP12 Week 12
 
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxWELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 

Último

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
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
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 

Cascading Style Sheets (CSS) - An introduction

  • 1. Cascading Style Sheets (CSS)An introduction By Rachael Dill Boyer For COM 585
  • 2. What CSS is, and isn’t A Cascading Style Sheet is a set of rules that contains the elements of style for a web page, such as background color, font type, borders, and sizes. “Cascading” means from the homepage on down through the rest of the site. HTML or XHTML code files have the the text/content that appears on a page. So, CSS has style, and HTML has substance.
  • 3. Why CSS? Keeping style elements separate from text and content elements has several advantages: HTML code is cleaner, with fewer errors Code is faster to create (ex. a rule about heading style will apply to ALL headings) Changes can be made efficiently (ex. changing out company colors after a rebranding can be made in one place for all pages)
  • 4. More benefits of CSS Web pages are more accessible for visitors with visual impairments Different CSS files can be linked to the same HTML file, so the same content can appear differently (mobile, print layout, different PC or Mac browsers, TV screens, etc…) Pages load faster, since the browser stores the site’s CSS from the first page visited, and just loads the HTML for each subsequent page
  • 5. Types of CSS documents External Style Sheets are saved as a separate file, linked to from an HTML document. These are most versatile, and effective. Sometimes you may need to use an Internal Style Sheet within an HTML file to override a set of rules from an external CSS document.
  • 6. So what does this look like?
  • 7. Credits W3schools.com Intro to CSS World Wide Web Consortium (W3C), What is CSS? Ch. 9 of Beginning Web Programming with HTML, XHTML, and CSS, by Jon Duckett