SlideShare a Scribd company logo
1 of 25
Week 3 css
CSS - what? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],CSS Website Example http:// www.csszengarden.com /
CSS - why??? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
syntax ,[object Object],[object Object],[object Object],[object Object]
how to ?? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
inline and internal styles  <html> <head>  <title>Project One</title> </head>    < body    >  <p  > This is a red page. </p>  </body> </html>  <style type=&quot;text/css&quot;> body {background-color: #ff0000;} p {color: blue; margin-left:20px;} </style> style=&quot;background-color: #ff0000;&quot; style=&quot;color:blue;margin-left:20px ;&quot;
external style (1) ,[object Object],[object Object],[object Object]
external style – where to put it?
[object Object],[object Object],external style – how to write it? mystyle.css project.html ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
cascade order ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS code reference ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS code reference ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS code reference ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
4 selector types ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
tag
ID  #id ,[object Object],[object Object],<html> <head> <style type=&quot;text/css&quot;> #para1 {text-align:center; color:red;}  </style> </head> <body> <p  id=&quot;para1&quot; >Hello World!</p> <p>This paragraph is not affected.</p> </body> </html> Hello World! This paragraph is not affected. P P P P
CLASS  .classname ,[object Object],[object Object],[object Object],P h1 h4 h2
CLASS (example) <html> <head> <style type=&quot;text/css&quot;> .center{text-align:center;} </style> </head> <body> <h1  class=&quot;center&quot; >center-aligned heading</h1> <p  class=&quot;center&quot; >center-aligned paragraph.</p>  /body> </html> center-aligned heading center-aligned paragraph.
recap ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Set up the working space ,[object Object],[object Object]
create a new CSS style ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
apply existing styles ,[object Object],[object Object],[object Object]
remove a style ,[object Object],[object Object],[object Object],[object Object],[object Object]
style, style, more style ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Link to an existing CSS style sheet ,[object Object],[object Object],Attach style sheet button This is your .css file name.

More Related Content

What's hot (20)

Css
CssCss
Css
 
Css intro
Css introCss intro
Css intro
 
Css
CssCss
Css
 
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
 
CSS in HTML
CSS in HTMLCSS in HTML
CSS in HTML
 
chitra
chitrachitra
chitra
 
Css
CssCss
Css
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
Css
CssCss
Css
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
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
 
html-css
html-csshtml-css
html-css
 
Css
CssCss
Css
 
Design Dream
Design DreamDesign Dream
Design Dream
 
Class6
Class6Class6
Class6
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
HTML Email
HTML EmailHTML Email
HTML Email
 
Css
CssCss
Css
 
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
 

Viewers also liked

Week5 ap forms
Week5 ap formsWeek5 ap forms
Week5 ap formsRowena LI
 
Week7 Dreamweaver Behavior & Image Hotspots
Week7 Dreamweaver Behavior & Image HotspotsWeek7 Dreamweaver Behavior & Image Hotspots
Week7 Dreamweaver Behavior & Image HotspotsRowena LI
 
Week1 Dreamweaver and Server
Week1 Dreamweaver and ServerWeek1 Dreamweaver and Server
Week1 Dreamweaver and ServerRowena LI
 
Social media as a widget
Social media as a widgetSocial media as a widget
Social media as a widgetRowena LI
 
Web 2.0: its impact on library services
Web 2.0: its impact on library servicesWeb 2.0: its impact on library services
Web 2.0: its impact on library servicesRowena LI
 
Social and Mobile Media in the Librarian Profession
Social and Mobile Media in the Librarian ProfessionSocial and Mobile Media in the Librarian Profession
Social and Mobile Media in the Librarian ProfessionRowena LI
 
Hybrid in 5 minutes
Hybrid in 5 minutesHybrid in 5 minutes
Hybrid in 5 minutesRowena LI
 
Week 2 HTML lists, hyperlinks, tables, and images
Week 2 HTML lists, hyperlinks, tables, and imagesWeek 2 HTML lists, hyperlinks, tables, and images
Week 2 HTML lists, hyperlinks, tables, and imagesRowena LI
 
Week1 Introduction
Week1 IntroductionWeek1 Introduction
Week1 IntroductionRowena LI
 
Meet your 2014 Growth Engine: Subscription Revenues
Meet your 2014 Growth Engine:  Subscription RevenuesMeet your 2014 Growth Engine:  Subscription Revenues
Meet your 2014 Growth Engine: Subscription RevenuesServiceSource
 
3 Findings that Can Get Your Customer Revenue Back on the Path to Growth [Inf...
3 Findings that Can Get Your Customer Revenue Back on the Path to Growth [Inf...3 Findings that Can Get Your Customer Revenue Back on the Path to Growth [Inf...
3 Findings that Can Get Your Customer Revenue Back on the Path to Growth [Inf...ServiceSource
 
Customer success on salesforce platform dreamforce 2014
Customer success on salesforce platform dreamforce 2014Customer success on salesforce platform dreamforce 2014
Customer success on salesforce platform dreamforce 2014ServiceSource
 
Find New Revenue with Existing Customers
Find New Revenue with Existing CustomersFind New Revenue with Existing Customers
Find New Revenue with Existing CustomersServiceSource
 
Tribe Night Slidshare Presentation
Tribe Night Slidshare PresentationTribe Night Slidshare Presentation
Tribe Night Slidshare PresentationTribe Church
 
Dreamforce 2013 One Hit Wonder Sessions
Dreamforce 2013 One Hit Wonder SessionsDreamforce 2013 One Hit Wonder Sessions
Dreamforce 2013 One Hit Wonder SessionsServiceSource
 

Viewers also liked (20)

Week5 ap forms
Week5 ap formsWeek5 ap forms
Week5 ap forms
 
Week7 Dreamweaver Behavior & Image Hotspots
Week7 Dreamweaver Behavior & Image HotspotsWeek7 Dreamweaver Behavior & Image Hotspots
Week7 Dreamweaver Behavior & Image Hotspots
 
Week1 Dreamweaver and Server
Week1 Dreamweaver and ServerWeek1 Dreamweaver and Server
Week1 Dreamweaver and Server
 
Social media as a widget
Social media as a widgetSocial media as a widget
Social media as a widget
 
PHP
PHPPHP
PHP
 
Web 2.0: its impact on library services
Web 2.0: its impact on library servicesWeb 2.0: its impact on library services
Web 2.0: its impact on library services
 
Social and Mobile Media in the Librarian Profession
Social and Mobile Media in the Librarian ProfessionSocial and Mobile Media in the Librarian Profession
Social and Mobile Media in the Librarian Profession
 
Hybrid in 5 minutes
Hybrid in 5 minutesHybrid in 5 minutes
Hybrid in 5 minutes
 
Week 2 HTML lists, hyperlinks, tables, and images
Week 2 HTML lists, hyperlinks, tables, and imagesWeek 2 HTML lists, hyperlinks, tables, and images
Week 2 HTML lists, hyperlinks, tables, and images
 
Week1 Introduction
Week1 IntroductionWeek1 Introduction
Week1 Introduction
 
Week 2
Week 2Week 2
Week 2
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Meet your 2014 Growth Engine: Subscription Revenues
Meet your 2014 Growth Engine:  Subscription RevenuesMeet your 2014 Growth Engine:  Subscription Revenues
Meet your 2014 Growth Engine: Subscription Revenues
 
3 Findings that Can Get Your Customer Revenue Back on the Path to Growth [Inf...
3 Findings that Can Get Your Customer Revenue Back on the Path to Growth [Inf...3 Findings that Can Get Your Customer Revenue Back on the Path to Growth [Inf...
3 Findings that Can Get Your Customer Revenue Back on the Path to Growth [Inf...
 
Customer success on salesforce platform dreamforce 2014
Customer success on salesforce platform dreamforce 2014Customer success on salesforce platform dreamforce 2014
Customer success on salesforce platform dreamforce 2014
 
Find New Revenue with Existing Customers
Find New Revenue with Existing CustomersFind New Revenue with Existing Customers
Find New Revenue with Existing Customers
 
Tribe Night Slidshare Presentation
Tribe Night Slidshare PresentationTribe Night Slidshare Presentation
Tribe Night Slidshare Presentation
 
Dreamforce 2013 One Hit Wonder Sessions
Dreamforce 2013 One Hit Wonder SessionsDreamforce 2013 One Hit Wonder Sessions
Dreamforce 2013 One Hit Wonder Sessions
 
Trabajo de majo
Trabajo de majoTrabajo de majo
Trabajo de majo
 
social work
social worksocial work
social work
 

Similar to Week3 css (20)

CSS Part I
CSS Part ICSS Part I
CSS Part I
 
CSS
CSSCSS
CSS
 
CSS.pdf
CSS.pdfCSS.pdf
CSS.pdf
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
Class 2: CSS Selectors, Classes & Ids
Class 2: CSS Selectors, Classes & IdsClass 2: CSS Selectors, Classes & Ids
Class 2: CSS Selectors, Classes & Ids
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
CSS
CSSCSS
CSS
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Casc Style Sheets Ii
 
Css.html
Css.htmlCss.html
Css.html
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Css Primer - basic stuff
Css Primer - basic stuffCss Primer - basic stuff
Css Primer - basic stuff
 
Cascstylesheets
CascstylesheetsCascstylesheets
Cascstylesheets
 
IP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).pptIP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).ppt
 
Css 2010
Css 2010Css 2010
Css 2010
 

Recently uploaded

microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpinRaunakKeshri1
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesFatimaKhan178732
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room servicediscovermytutordmt
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...Sapna Thakur
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 

Recently uploaded (20)

microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 

Week3 css

  • 2.
  • 3.
  • 4.
  • 5.
  • 6. inline and internal styles <html> <head> <title>Project One</title> </head> < body > <p > This is a red page. </p> </body> </html> <style type=&quot;text/css&quot;> body {background-color: #ff0000;} p {color: blue; margin-left:20px;} </style> style=&quot;background-color: #ff0000;&quot; style=&quot;color:blue;margin-left:20px ;&quot;
  • 7.
  • 8. external style – where to put it?
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. tag
  • 16.
  • 17.
  • 18. CLASS (example) <html> <head> <style type=&quot;text/css&quot;> .center{text-align:center;} </style> </head> <body> <h1 class=&quot;center&quot; >center-aligned heading</h1> <p class=&quot;center&quot; >center-aligned paragraph.</p> /body> </html> center-aligned heading center-aligned paragraph.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.