SlideShare a Scribd company logo
1 of 43
Download to read offline
Introduction to Cascading Style Sheets
Agenda! ,[object Object],[object Object],[object Object],[object Object]
What are some of the similarities between: a  Word Document and a  Web Page ?
Differences? image audio style sheet javascript video
HTML Document CSS Document Headings Fonts Colors Background images Borders Margins Padding Letter Spacing Positioning Alignment Stacking Order More, More, More! Image or Video Placeholders Paragraph text that’s lovely to read… ,[object Object],[object Object],[object Object],[object Object]
HTML Document CSS Document Headings Be Blue Be Centered Be Aligned Right Image or Video Placeholders Paragraph text that’s lovely to read… ,[object Object],[object Object],[object Object],[object Object]
Example: http:// www.msu.edu
CSS Showcase Examples CSS Zen Garden
How does it work?
Changing Properties of an HTML Element <p> Paragraph text. </p> HTML document says:
Changing Properties of an HTML Element p {   color :   red;   } “ selector” “ property” “ value” CSS document says:
The Result:  Paragraph text.
Creating your own “class” .myClass {   color :   green;   } “ selector” “ property” “ value” CSS document says:
Creating your own “class” <p class= “myClass” > Paragraph text. </p> HTML document says:
The Result:  Paragraph text.
What if we combine what  we have so far? .myClass {   color :   green;   } p {   color :   red;   } CSS HTML <p class= “myClass” > Paragraph text. </p> <p> Paragraph text. </p>
The Result Paragraph text. Paragraph text.
Other Examples  <table class= “myClass”> <img class= “myClass”> <object class= “myClass”> HTML document says:
Remember, we can control a LOT with CSS! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Maintenance example Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. Title Some random text here.  You can’t read it anyway!  Har har har!  Use Css. CSS
“Boxes” block level element (div, paragraph, heading) content area margin border padding
Box Example block level element (div, paragraph, heading) block level element (div, paragraph, heading) block level element (div, paragraph, heading)
Dreamweaver Examples  & Workflow
 
 
 
 
 
 
 
 
 
 
Main Container
Sidebar Container
Main  Content Container
HTML Document CSS Document <div id=“ mainContainer ”> </div> #mainContainer { width: 780px; margin: 0 auto; }
Width = 780px
HTML Document CSS Document <div id=“ sidebar ”> </div> #sidebar { float:left; width:200px; }
Width = 200px
HTML Document CSS Document <div id=“ mainContent ”> </div> #mainContent { margin: 0 0 0 250px; } 0 0 0 250
Width  automatically fills the remaining  space Margin of 250 pixels on the left side
Increase the “width” property Increase the left “margin”

More Related Content

Recently uploaded

Michael Vidyakin: Introduction to PMO (UA)
Michael Vidyakin: Introduction to PMO (UA)Michael Vidyakin: Introduction to PMO (UA)
Michael Vidyakin: Introduction to PMO (UA)Lviv Startup Club
 
MC Heights construction company in Jhang
MC Heights construction company in JhangMC Heights construction company in Jhang
MC Heights construction company in Jhangmcgroupjeya
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsWristbands Ireland
 
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...TalentView
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access
 
7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.ukaroemirsr
 
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxWorkforce Group
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access
 
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdfAMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdfJohnCarloValencia4
 
Developing Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursDeveloping Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursKaiNexus
 
Slicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup BerlinSlicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup BerlinAnton Skornyakov
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examplesamberjiles31
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023Steve Rader
 
Live-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarLive-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarNathanielSchmuck
 
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdfChicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdfSourav Sikder
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.mcshagufta46
 
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John MeulemansBCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John MeulemansBBPMedia1
 
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)tazeenaila12
 
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGUNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGlokeshwarmaha
 

Recently uploaded (20)

Michael Vidyakin: Introduction to PMO (UA)
Michael Vidyakin: Introduction to PMO (UA)Michael Vidyakin: Introduction to PMO (UA)
Michael Vidyakin: Introduction to PMO (UA)
 
MC Heights construction company in Jhang
MC Heights construction company in JhangMC Heights construction company in Jhang
MC Heights construction company in Jhang
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and Festivals
 
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
TalentView Webinar: Empowering the Modern Workforce_ Redefininig Success from...
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024
 
WAM Corporate Presentation Mar 25 2024.pdf
WAM Corporate Presentation Mar 25 2024.pdfWAM Corporate Presentation Mar 25 2024.pdf
WAM Corporate Presentation Mar 25 2024.pdf
 
7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.uk
 
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024
 
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdfAMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
 
Developing Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursDeveloping Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, Ours
 
Slicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup BerlinSlicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup Berlin
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examples
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023
 
Live-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarLive-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry Webinar
 
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdfChicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
Chicago Medical Malpractice Lawyer Chicago Medical Malpractice Lawyer.pdf
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.
 
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John MeulemansBCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
 
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
 
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGUNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
 

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Beginning Css

  • 2.
  • 3. What are some of the similarities between: a Word Document and a Web Page ?
  • 4. Differences? image audio style sheet javascript video
  • 5.
  • 6.
  • 8. CSS Showcase Examples CSS Zen Garden
  • 9. How does it work?
  • 10. Changing Properties of an HTML Element <p> Paragraph text. </p> HTML document says:
  • 11. Changing Properties of an HTML Element p { color : red; } “ selector” “ property” “ value” CSS document says:
  • 12. The Result: Paragraph text.
  • 13. Creating your own “class” .myClass { color : green; } “ selector” “ property” “ value” CSS document says:
  • 14. Creating your own “class” <p class= “myClass” > Paragraph text. </p> HTML document says:
  • 15. The Result: Paragraph text.
  • 16. What if we combine what we have so far? .myClass { color : green; } p { color : red; } CSS HTML <p class= “myClass” > Paragraph text. </p> <p> Paragraph text. </p>
  • 17. The Result Paragraph text. Paragraph text.
  • 18. Other Examples <table class= “myClass”> <img class= “myClass”> <object class= “myClass”> HTML document says:
  • 19.
  • 20. Maintenance example Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. Title Some random text here. You can’t read it anyway! Har har har! Use Css. CSS
  • 21. “Boxes” block level element (div, paragraph, heading) content area margin border padding
  • 22. Box Example block level element (div, paragraph, heading) block level element (div, paragraph, heading) block level element (div, paragraph, heading)
  • 23. Dreamweaver Examples & Workflow
  • 24.  
  • 25.  
  • 26.  
  • 27.  
  • 28.  
  • 29.  
  • 30.  
  • 31.  
  • 32.  
  • 33.  
  • 36. Main Content Container
  • 37. HTML Document CSS Document <div id=“ mainContainer ”> </div> #mainContainer { width: 780px; margin: 0 auto; }
  • 39. HTML Document CSS Document <div id=“ sidebar ”> </div> #sidebar { float:left; width:200px; }
  • 41. HTML Document CSS Document <div id=“ mainContent ”> </div> #mainContent { margin: 0 0 0 250px; } 0 0 0 250
  • 42. Width automatically fills the remaining space Margin of 250 pixels on the left side
  • 43. Increase the “width” property Increase the left “margin”