SlideShare a Scribd company logo
1 of 10
CSS
Makes our website look like a website
CSS
(Cascading Style Sheets)
 Describes the presentation of your
HTML document.
 Our CSS code belongs in a separate
document.
 Do do not work with CSS in our HTML
document.
 .HTML
 .CSS
Why do we need CSS?
 To organize our website. Tells our
HTML where to go AND what to look
like.
 We can make and design comment
boxes
 We can change the background and
color of our font.
 We can add margins and create a
navigation bar.
 Makes our website look like a website
1st thing’s 1st
 We need to connect our HTML
document to our CSS document
 This is very easy, we start by opening
our HTML document.
 Inside your <head> tag is where we
will write the code linking our HTML
document to our CSS document.
The code
 <link rel="stylesheet" type="text/css" href="style.css">
 Linking a style sheet
 Giving it a type
 Telling Komodo where to find our CSS
document.
What your code should look
like
 <!DOCTYPE html>
 <html>
 <head>
 <title>Your Website</title>
 <link rel="stylesheet" type="text/css"
href="style.css">
 </head>
So what does CSS code look
like?
 CSS needs to know what it’s editing.
 You can edit every part of your
website individually if you just tell CSS
what you want to change.
 Example…
 Lets change the font color of our
Header <h1>
Changing Font Color
 We know what we want to change is
in-between the <h1> and </h1> tags
 Tell CSS this by inputting this code
 h1{
Font-color:blue;
}
What did we just do?
 h1{
Font-color:blue;
}
 Selected our the header by typing h1
 We start the command with a {
 We insert the command after, Font-Color
 We place a semi colon : after the command
then we give it a value.
 To end our CSS code we need 2 things.
 Semi colon after the value ; and a closing }
to end the code
CSS isn’t that difficult.
 You need to practice and CSS will
become easier.
 We find what we want to edit.
 We tell CSS how we want to edit it.

More Related Content

What's hot (20)

HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
Html
HtmlHtml
Html
 
PPT on Basic HTML Tags
PPT on Basic HTML TagsPPT on Basic HTML Tags
PPT on Basic HTML Tags
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
HTML 5 Simple Tutorial Part 1
HTML 5 Simple Tutorial Part 1HTML 5 Simple Tutorial Part 1
HTML 5 Simple Tutorial Part 1
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
 
Css
CssCss
Css
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
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
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Html notes
Html notesHtml notes
Html notes
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Html
HtmlHtml
Html
 
Basics Of Html
Basics Of HtmlBasics Of Html
Basics Of Html
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
 
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)
 

Similar to Css

Similar to Css (20)

Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Css
Css Css
Css
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
CSS
CSSCSS
CSS
 
Basic CSS concepts by naveen kumar veligeti
Basic CSS concepts by naveen kumar veligetiBasic CSS concepts by naveen kumar veligeti
Basic CSS concepts by naveen kumar veligeti
 
Css intro
Css introCss intro
Css intro
 
CSS Selectors: element, class, id
CSS  Selectors: element, class, idCSS  Selectors: element, class, id
CSS Selectors: element, class, id
 
David Weliver
David WeliverDavid Weliver
David Weliver
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfINTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdf
 
Htmlcss1
Htmlcss1Htmlcss1
Htmlcss1
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 

More from mreckman

Unit 1 "Offline" Vocabulary Quiz
Unit 1 "Offline" Vocabulary QuizUnit 1 "Offline" Vocabulary Quiz
Unit 1 "Offline" Vocabulary Quizmreckman
 
7th-8th grade
7th-8th grade7th-8th grade
7th-8th grademreckman
 
7th-8th grade
7th-8th grade7th-8th grade
7th-8th grademreckman
 
4-6th grade
4-6th grade4-6th grade
4-6th grademreckman
 
4-6th grade
4-6th grade4-6th grade
4-6th grademreckman
 
Grade 7-8 Quiz (Computer Bacis) 08/26/15
Grade 7-8 Quiz (Computer Bacis) 08/26/15Grade 7-8 Quiz (Computer Bacis) 08/26/15
Grade 7-8 Quiz (Computer Bacis) 08/26/15mreckman
 
Grade 3-6 Quiz (Computer Basics) 08/26/15
Grade 3-6 Quiz (Computer Basics) 08/26/15Grade 3-6 Quiz (Computer Basics) 08/26/15
Grade 3-6 Quiz (Computer Basics) 08/26/15mreckman
 

More from mreckman (8)

Unit 1 "Offline" Vocabulary Quiz
Unit 1 "Offline" Vocabulary QuizUnit 1 "Offline" Vocabulary Quiz
Unit 1 "Offline" Vocabulary Quiz
 
7th-8th grade
7th-8th grade7th-8th grade
7th-8th grade
 
7th-8th grade
7th-8th grade7th-8th grade
7th-8th grade
 
4-6th grade
4-6th grade4-6th grade
4-6th grade
 
4-6th grade
4-6th grade4-6th grade
4-6th grade
 
Blender
BlenderBlender
Blender
 
Grade 7-8 Quiz (Computer Bacis) 08/26/15
Grade 7-8 Quiz (Computer Bacis) 08/26/15Grade 7-8 Quiz (Computer Bacis) 08/26/15
Grade 7-8 Quiz (Computer Bacis) 08/26/15
 
Grade 3-6 Quiz (Computer Basics) 08/26/15
Grade 3-6 Quiz (Computer Basics) 08/26/15Grade 3-6 Quiz (Computer Basics) 08/26/15
Grade 3-6 Quiz (Computer Basics) 08/26/15
 

Recently uploaded

Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsPrecisely
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsAndrey Dotsenko
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfngoud9212
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Science&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdfScience&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdfjimielynbastida
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 

Recently uploaded (20)

Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power Systems
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdf
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Science&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdfScience&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdf
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 

Css

  • 1. CSS Makes our website look like a website
  • 2. CSS (Cascading Style Sheets)  Describes the presentation of your HTML document.  Our CSS code belongs in a separate document.  Do do not work with CSS in our HTML document.  .HTML  .CSS
  • 3. Why do we need CSS?  To organize our website. Tells our HTML where to go AND what to look like.  We can make and design comment boxes  We can change the background and color of our font.  We can add margins and create a navigation bar.  Makes our website look like a website
  • 4. 1st thing’s 1st  We need to connect our HTML document to our CSS document  This is very easy, we start by opening our HTML document.  Inside your <head> tag is where we will write the code linking our HTML document to our CSS document.
  • 5. The code  <link rel="stylesheet" type="text/css" href="style.css">  Linking a style sheet  Giving it a type  Telling Komodo where to find our CSS document.
  • 6. What your code should look like  <!DOCTYPE html>  <html>  <head>  <title>Your Website</title>  <link rel="stylesheet" type="text/css" href="style.css">  </head>
  • 7. So what does CSS code look like?  CSS needs to know what it’s editing.  You can edit every part of your website individually if you just tell CSS what you want to change.  Example…  Lets change the font color of our Header <h1>
  • 8. Changing Font Color  We know what we want to change is in-between the <h1> and </h1> tags  Tell CSS this by inputting this code  h1{ Font-color:blue; }
  • 9. What did we just do?  h1{ Font-color:blue; }  Selected our the header by typing h1  We start the command with a {  We insert the command after, Font-Color  We place a semi colon : after the command then we give it a value.  To end our CSS code we need 2 things.  Semi colon after the value ; and a closing } to end the code
  • 10. CSS isn’t that difficult.  You need to practice and CSS will become easier.  We find what we want to edit.  We tell CSS how we want to edit it.