SlideShare a Scribd company logo
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

More Related Content

Viewers also liked

Css(cascading style sheets)
Css(cascading style sheets)Css(cascading style sheets)
Css(cascading style sheets)
akhand Akhandenator
 
Curso de cascading style sheets (css)
Curso de cascading style sheets (css)Curso de cascading style sheets (css)
Curso de cascading style sheets (css)
Educagratis
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
Cascading style sheets - CSS
Cascading style sheets - CSSCascading style sheets - CSS
Cascading style sheets - CSS
iFour Institute - Sustainable Learning
 
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
Reshmi Rajan
 
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - IntroductionCSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
Mukesh Tekwani
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
Sun Technlogies
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
CSS Systems
CSS SystemsCSS Systems
CSS Systems
Natalie Downe
 
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
Joe Seifi
 
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
Stacy Kvernmo
 

Viewers also liked (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
 

Similar to Cascading Style Sheets (CSS) - An introduction

Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
wubiederebe1
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
Vskills
 
Css introduction
Css   introductionCss   introduction
Css introduction
AbhishekMondal42
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
jackchenvlo
 
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
AsrithaKorupolu
 
Css
CssCss
Full
FullFull
Full
sanjaykhan33
 
Css
CssCss
Css
zayhard99
 
Css training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentialsCss training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentials
QA TrainingHub
 
New Css style
New Css styleNew Css style
New Css style
BUDNET
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
nikhilsh66131
 
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.
 
Introduction to CSS Class - 1
Introduction to CSS Class - 1Introduction to CSS Class - 1
Introduction to CSS Class - 1
Nouman Baloch
 
Higher Computing Science CSS
Higher Computing Science CSSHigher Computing Science CSS
Higher Computing Science CSS
Forrester High School
 
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
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
LIS3353 SP12 Week 12
LIS3353 SP12 Week 12LIS3353 SP12 Week 12
LIS3353 SP12 Week 12
Amanda Case
 
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxWELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
HeroVins
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
Alejandro
 

Similar to 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
 

Recently uploaded

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
maazsz111
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 

Recently uploaded (20)

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 

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