SlideShare une entreprise Scribd logo
1  sur  24
 
Font-size : x-large ; p { Background-color : purple ; } Selector Property names Declarations or values
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Applies to common tags Applies to anything ID DIV isions
HEAD BODY <title>  </title> <p> </p> <h1> </h1> <style type=&quot;text/css&quot;> <!-- .style1 { font-size: xx-large; font-family: Georgia, serif; color: #FF0000; } --> </style> <h1 class=&quot;style1&quot;>This is an H1 Style</h1> ADD CSS for Styles Internal CSS Sheet
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Font Size Color Background Links Headings Font-family: Font-size: color: a:link a:visited H1 H2 P
 
[object Object]
 
 
[object Object],[object Object]
[object Object]
[object Object],[object Object]
 
Pixels for relative size (exc IE) Ems for relative sizes Numbers for absolute size Relative Sizes based on default
Size Matters Pixel  – dot on computer monitor – exc. IE Points  – 1/72 inch Inch Centimeter Millimeter Pica Ems Exs Percentages
 
[object Object],[object Object],Link Add Edit Delete
Stay Out of  TR ou BL e ,[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],[object Object],[object Object],[object Object],[object Object],[object Object],http://webdesign.about.com/od/css/a/aa071204.htm
[object Object],[object Object],[object Object],[object Object],http://www.blogherald.com/2006/09/08/css-tips-and-tricks/
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Contenu connexe

Tendances

HTML Tutorial: Chapters 1 & 2
HTML Tutorial: Chapters 1 & 2HTML Tutorial: Chapters 1 & 2
HTML Tutorial: Chapters 1 & 2
michaeljm007
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
Bulldogs83
 
HTML Tutorial: Chapter 3
HTML Tutorial: Chapter 3HTML Tutorial: Chapter 3
HTML Tutorial: Chapter 3
michaeljm007
 
HTML Tutorial: Chapters 5 & 6
HTML Tutorial: Chapters 5 & 6HTML Tutorial: Chapters 5 & 6
HTML Tutorial: Chapters 5 & 6
michaeljm007
 
1.1 xhtml basics
1.1 xhtml basics1.1 xhtml basics
1.1 xhtml basics
Bulldogs83
 
somethin about FED
somethin about FEDsomethin about FED
somethin about FED
jonny yan
 

Tendances (20)

Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
HTML to FTP
HTML to FTPHTML to FTP
HTML to FTP
 
YL basic tag
YL basic tagYL basic tag
YL basic tag
 
HTML Tutorial: Chapters 1 & 2
HTML Tutorial: Chapters 1 & 2HTML Tutorial: Chapters 1 & 2
HTML Tutorial: Chapters 1 & 2
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
SEO Structures by Yavor Milchev
SEO Structures by Yavor MilchevSEO Structures by Yavor Milchev
SEO Structures by Yavor Milchev
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
HTML Tutorial: Chapter 3
HTML Tutorial: Chapter 3HTML Tutorial: Chapter 3
HTML Tutorial: Chapter 3
 
Html ppt
Html pptHtml ppt
Html ppt
 
HTML Tutorial: Chapters 5 & 6
HTML Tutorial: Chapters 5 & 6HTML Tutorial: Chapters 5 & 6
HTML Tutorial: Chapters 5 & 6
 
Html basics IML 140 (weeks 2-3)
Html basics IML 140 (weeks 2-3)Html basics IML 140 (weeks 2-3)
Html basics IML 140 (weeks 2-3)
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Introduction To HTML
Introduction To HTMLIntroduction To HTML
Introduction To HTML
 
Html
HtmlHtml
Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
1.1 xhtml basics
1.1 xhtml basics1.1 xhtml basics
1.1 xhtml basics
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
somethin about FED
somethin about FEDsomethin about FED
somethin about FED
 
Basics Of Html
Basics Of HtmlBasics Of Html
Basics Of Html
 

En vedette (9)

Css
CssCss
Css
 
Js
JsJs
Js
 
Week 2
Week 2Week 2
Week 2
 
WWW
WWWWWW
WWW
 
Intro webtechstc
Intro webtechstcIntro webtechstc
Intro webtechstc
 
11. session 11 functions and objects
11. session 11   functions and objects11. session 11   functions and objects
11. session 11 functions and objects
 
Week 8
Week 8Week 8
Week 8
 
Java script Learn Easy
Java script Learn Easy Java script Learn Easy
Java script Learn Easy
 
Iwt note(module 2)
Iwt note(module 2)Iwt note(module 2)
Iwt note(module 2)
 

Similaire à C S S Top Elements

Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Jerome Locson
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
Kml Basics Chpt 2 Placemarks
Kml Basics Chpt  2   PlacemarksKml Basics Chpt  2   Placemarks
Kml Basics Chpt 2 Placemarks
tcooper66
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 

Similaire à C S S Top Elements (20)

Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
CSS
CSSCSS
CSS
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
CSS For Online Journalism
CSS For Online JournalismCSS For Online Journalism
CSS For Online Journalism
 
AK css
AK cssAK css
AK css
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Kml Basics Chpt 2 Placemarks
Kml Basics Chpt  2   PlacemarksKml Basics Chpt  2   Placemarks
Kml Basics Chpt 2 Placemarks
 
XHTML and CSS
XHTML and CSS XHTML and CSS
XHTML and CSS
 
CSS
CSSCSS
CSS
 
YL Intro html
YL Intro htmlYL Intro html
YL Intro html
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
Html intro
Html introHtml intro
Html intro
 
Html intro
Html introHtml intro
Html intro
 
CSS
CSSCSS
CSS
 
HTML5 Fundamentals
HTML5 FundamentalsHTML5 Fundamentals
HTML5 Fundamentals
 
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
 
HTML and CSS workshop
HTML and CSS workshopHTML and CSS workshop
HTML and CSS workshop
 

Dernier

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Dernier (20)

Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 

C S S Top Elements

  • 1.  
  • 2. Font-size : x-large ; p { Background-color : purple ; } Selector Property names Declarations or values
  • 3.
  • 4. HEAD BODY <title> </title> <p> </p> <h1> </h1> <style type=&quot;text/css&quot;> <!-- .style1 { font-size: xx-large; font-family: Georgia, serif; color: #FF0000; } --> </style> <h1 class=&quot;style1&quot;>This is an H1 Style</h1> ADD CSS for Styles Internal CSS Sheet
  • 5.
  • 6. Font Size Color Background Links Headings Font-family: Font-size: color: a:link a:visited H1 H2 P
  • 7.  
  • 8.
  • 9.  
  • 10.  
  • 11.
  • 12.
  • 13.
  • 14.  
  • 15. Pixels for relative size (exc IE) Ems for relative sizes Numbers for absolute size Relative Sizes based on default
  • 16. Size Matters Pixel – dot on computer monitor – exc. IE Points – 1/72 inch Inch Centimeter Millimeter Pica Ems Exs Percentages
  • 17.  
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.