SlideShare a Scribd company logo
1 of 16
You and Your Stylesheet Virginia DeBolt BlogHer 09
30 Minute Goals Talk about what CSS can do Talk about what a style rule looks like Talk about how to identify the style that matches the part of your page you want to style Answer your specific questions
What CSS can Do Set color and background color for any element Set font and font size for any element Set margins, borders and padding around any element Create layouts  Create list appearance Create link appearance And more!
A CSS rule tells the browser how to render the HTML div#content { 	font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; 	font-size: 1em; 	line-height: 1.4; 	background:#fff; 	color:#000; 	margin:0 1em; 	padding:0 1em 0 0; }
The Selector selects the element to style div#content { 	font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; 	font-size: 1em; 	line-height: 1.4; 	background:#fff; 	color:#000; 	margin:0 1em; 	padding:0 1em 0 0; }
The declaration is inside {} div#content { font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; 	font-size: 1em; 	line-height: 1.4; 	background:#fff; 	color:#000; 	margin:0 1em; 	padding:0 1em 0 0; }
The property is a property of the element you are styling div#content{ font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; 	font-size: 1em; 	line-height: 1.4; 	background:#fff; 	color:#000; 	margin:0 1em; 	padding:0 1em 0 0; }
The value sets how you want each property of the selector to look div#content{ font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; 	line-height: 1.4; 	background:#fff; 	color:#000; 	margin:0 1em; 	padding:0 1em 0 0; }
How can you figure out which selector to change? Out of all the notes on the piano which one do you press?  Out of all the selectors and rules in the stylesheet, which one do you change?
Figuring out the Selectors with Web Developer Toolbar in Firefox
Figuring out the selectors with View Source <div id="container"> <div id="content" class="hfeed”> <div id="post-2819" class="hentryp1 post publish author-vdebolt category-blogher category-news-politics category-socialmedia category-twitter y2009 m06 d30 h04"> 				<h2 class="entry-title"><a href="http://www.webteacher.ws/2009/06/30/spreading-the-news/" title="Permalink to Spreading the News" rel="bookmark">Spreading the News</a></h2> 				<div class="entry-date"><abbr class="published" title="2009-06-30T07:18:37-0400">Tuesday, June 30, 2009</abbr></div> 				<div class="entry-content"> <p>Remember how remarkable it seemed several months ago when a plane sat down in the Hudson River and the first news and photos of the crash came from Twitter? Then the fly ash spill in TVA’s Kingston plant was covered first on Twitter. That was about the time that articles about how the old media just didn’t get digital media started appearing.</p>
Sometimes several selectors have the same rule body.single h2.entry-title, body.page h2.entry-title, body.search h2.entry-title { 	margin:1em 0 -0.5em; } A comma separated list of selectors—all follow the same rule.
Sometimes selectors get really specific div.entry-content cite, div.comments ol.commentlist cite { 	border-bottom:1px dotted #999; 	cursor:help; } Selects any cite element  that is a descendant of an ol element with a class attribute that contains the word commentlist  that is a descendant of a div element with a class attribute that contains the word comments.
When you are trying to change something, you may need to get really specific too. ol {} not specific enough? Try div.entry-content ol {} instead. .small {} not specific enough? Try div#content p.small
Let’s talk about your problems Questions?
Resources CSS cascade - a simple step-by-step presentation: http://www.maxdesign.com.au/2009/06/30/css-cascade/ Web Teacher Tips: http://www.webteacher.ws/web-teacher-tips-and-tutorials/ CSS: The Definitive Guide by Eric A. Meyer, O’Reilly, 2007

More Related Content

What's hot

1.3 creating links
1.3 creating links1.3 creating links
1.3 creating linksBulldogs83
 
Technical SEO "Overoptimization"
Technical SEO "Overoptimization"Technical SEO "Overoptimization"
Technical SEO "Overoptimization"Hamlet Batista
 
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)Michaela Lehr
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Hamlet Batista
 
What's New on the Facebook Platform, May 2011
What's New on the Facebook Platform, May 2011What's New on the Facebook Platform, May 2011
What's New on the Facebook Platform, May 2011Iskandar Najmuddin
 
The 5 minute guide to RDFa...in only 6 minutes 40 seconds
The 5 minute guide to RDFa...in only 6 minutes 40 secondsThe 5 minute guide to RDFa...in only 6 minutes 40 seconds
The 5 minute guide to RDFa...in only 6 minutes 40 secondsMark Birbeck
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examplesgopivthmk
 
merb.intro
merb.intromerb.intro
merb.intropjb3
 
Vanilla Forums Theme Guide
Vanilla Forums Theme GuideVanilla Forums Theme Guide
Vanilla Forums Theme GuideVanilla Forums
 
Customizing the Appearance and HTML Output of Visualforce Pages
Customizing the Appearance and HTML Output of VisualforcePages Customizing the Appearance and HTML Output of VisualforcePages
Customizing the Appearance and HTML Output of Visualforce Pages Mohammed Safwat Abu Kwaik
 
iGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your LibraryiGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your LibraryEdward Metz
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1nleesite
 
Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)Edwin Vijay R
 
Fundamentals Of Html
Fundamentals Of HtmlFundamentals Of Html
Fundamentals Of HtmlJLENA mOORE
 
Where to focus your SEO efforts to have the most impact Digital Summit Atlant...
Where to focus your SEO efforts to have the most impact Digital Summit Atlant...Where to focus your SEO efforts to have the most impact Digital Summit Atlant...
Where to focus your SEO efforts to have the most impact Digital Summit Atlant...patrickstox
 

What's hot (16)

1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
Html tags
Html tagsHtml tags
Html tags
 
Technical SEO "Overoptimization"
Technical SEO "Overoptimization"Technical SEO "Overoptimization"
Technical SEO "Overoptimization"
 
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
 
What's New on the Facebook Platform, May 2011
What's New on the Facebook Platform, May 2011What's New on the Facebook Platform, May 2011
What's New on the Facebook Platform, May 2011
 
The 5 minute guide to RDFa...in only 6 minutes 40 seconds
The 5 minute guide to RDFa...in only 6 minutes 40 secondsThe 5 minute guide to RDFa...in only 6 minutes 40 seconds
The 5 minute guide to RDFa...in only 6 minutes 40 seconds
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examples
 
merb.intro
merb.intromerb.intro
merb.intro
 
Vanilla Forums Theme Guide
Vanilla Forums Theme GuideVanilla Forums Theme Guide
Vanilla Forums Theme Guide
 
Customizing the Appearance and HTML Output of Visualforce Pages
Customizing the Appearance and HTML Output of VisualforcePages Customizing the Appearance and HTML Output of VisualforcePages
Customizing the Appearance and HTML Output of Visualforce Pages
 
iGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your LibraryiGoogle Gadgets @ Your Library
iGoogle Gadgets @ Your Library
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
 
Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)
 
Fundamentals Of Html
Fundamentals Of HtmlFundamentals Of Html
Fundamentals Of Html
 
Where to focus your SEO efforts to have the most impact Digital Summit Atlant...
Where to focus your SEO efforts to have the most impact Digital Summit Atlant...Where to focus your SEO efforts to have the most impact Digital Summit Atlant...
Where to focus your SEO efforts to have the most impact Digital Summit Atlant...
 

Viewers also liked

Southwest Conference on Disability 2011
Southwest Conference on Disability 2011Southwest Conference on Disability 2011
Southwest Conference on Disability 2011Virginia DeBolt
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging ChallengesAaron Irizarry
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017Drift
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 

Viewers also liked (6)

Twitter For Writers
Twitter For WritersTwitter For Writers
Twitter For Writers
 
Southwest Conference on Disability 2011
Southwest Conference on Disability 2011Southwest Conference on Disability 2011
Southwest Conference on Disability 2011
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Similar to You and Your Stylesheet

Stylesheets for Online Help - Scott DeLoach, ClickStart
Stylesheets for Online Help - Scott DeLoach, ClickStartStylesheets for Online Help - Scott DeLoach, ClickStart
Stylesheets for Online Help - Scott DeLoach, ClickStartScott DeLoach
 
The Frameless Opac
The Frameless OpacThe Frameless Opac
The Frameless OpacBill Drew
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 PresentationMichael Gwyther
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Hatem Mahmoud
 
Class 2: CSS Selectors, Classes & Ids
Class 2: CSS Selectors, Classes & IdsClass 2: CSS Selectors, Classes & Ids
Class 2: CSS Selectors, Classes & IdsErika Tarte
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technologyvikram singh
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Contentmaycourse
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from AustinLisa Adkins
 
How do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksHow do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksCompare Infobase Limited
 
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 Mistakessanjay2211
 
Web 2.0 & Search Engines
Web 2.0 & Search EnginesWeb 2.0 & Search Engines
Web 2.0 & Search EnginesAmbles Kwok
 
DG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteDG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteFranco De Bonis
 
Microformats at Web 2.0 Expo April 2007
Microformats at Web 2.0 Expo April 2007Microformats at Web 2.0 Expo April 2007
Microformats at Web 2.0 Expo April 2007John Allsopp
 
CSS For Online Journalism
CSS For Online JournalismCSS For Online Journalism
CSS For Online Journalismamherstwire
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet pptabhilashagupta
 
IML 140 Design - Basics
IML 140 Design - BasicsIML 140 Design - Basics
IML 140 Design - BasicsEvan Hughes
 

Similar to You and Your Stylesheet (20)

Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
Stylesheets for Online Help - Scott DeLoach, ClickStart
Stylesheets for Online Help - Scott DeLoach, ClickStartStylesheets for Online Help - Scott DeLoach, ClickStart
Stylesheets for Online Help - Scott DeLoach, ClickStart
 
The Frameless Opac
The Frameless OpacThe Frameless Opac
The Frameless Opac
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
 
Class 2: CSS Selectors, Classes & Ids
Class 2: CSS Selectors, Classes & IdsClass 2: CSS Selectors, Classes & Ids
Class 2: CSS Selectors, Classes & Ids
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Content
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
 
How do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksHow do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML Tricks
 
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
 
Web 2.0 & Search Engines
Web 2.0 & Search EnginesWeb 2.0 & Search Engines
Web 2.0 & Search Engines
 
DG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteDG Group - Active Or Passive Website
DG Group - Active Or Passive Website
 
Microformats at Web 2.0 Expo April 2007
Microformats at Web 2.0 Expo April 2007Microformats at Web 2.0 Expo April 2007
Microformats at Web 2.0 Expo April 2007
 
CSS For Online Journalism
CSS For Online JournalismCSS For Online Journalism
CSS For Online Journalism
 
CSS
CSSCSS
CSS
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
Introducing YUI
Introducing YUIIntroducing YUI
Introducing YUI
 
IML 140 Design - Basics
IML 140 Design - BasicsIML 140 Design - Basics
IML 140 Design - Basics
 

Recently uploaded

Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 

Recently uploaded (20)

Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 

You and Your Stylesheet

  • 1. You and Your Stylesheet Virginia DeBolt BlogHer 09
  • 2. 30 Minute Goals Talk about what CSS can do Talk about what a style rule looks like Talk about how to identify the style that matches the part of your page you want to style Answer your specific questions
  • 3. What CSS can Do Set color and background color for any element Set font and font size for any element Set margins, borders and padding around any element Create layouts Create list appearance Create link appearance And more!
  • 4. A CSS rule tells the browser how to render the HTML div#content { font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0; }
  • 5. The Selector selects the element to style div#content { font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0; }
  • 6. The declaration is inside {} div#content { font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0; }
  • 7. The property is a property of the element you are styling div#content{ font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0; }
  • 8. The value sets how you want each property of the selector to look div#content{ font-family: Frutiger, Univers, "Helvetica Neue", arial, helvetica, sans-serif; font-size: 1em; line-height: 1.4; background:#fff; color:#000; margin:0 1em; padding:0 1em 0 0; }
  • 9. How can you figure out which selector to change? Out of all the notes on the piano which one do you press? Out of all the selectors and rules in the stylesheet, which one do you change?
  • 10. Figuring out the Selectors with Web Developer Toolbar in Firefox
  • 11. Figuring out the selectors with View Source <div id="container"> <div id="content" class="hfeed”> <div id="post-2819" class="hentryp1 post publish author-vdebolt category-blogher category-news-politics category-socialmedia category-twitter y2009 m06 d30 h04"> <h2 class="entry-title"><a href="http://www.webteacher.ws/2009/06/30/spreading-the-news/" title="Permalink to Spreading the News" rel="bookmark">Spreading the News</a></h2> <div class="entry-date"><abbr class="published" title="2009-06-30T07:18:37-0400">Tuesday, June 30, 2009</abbr></div> <div class="entry-content"> <p>Remember how remarkable it seemed several months ago when a plane sat down in the Hudson River and the first news and photos of the crash came from Twitter? Then the fly ash spill in TVA’s Kingston plant was covered first on Twitter. That was about the time that articles about how the old media just didn’t get digital media started appearing.</p>
  • 12. Sometimes several selectors have the same rule body.single h2.entry-title, body.page h2.entry-title, body.search h2.entry-title { margin:1em 0 -0.5em; } A comma separated list of selectors—all follow the same rule.
  • 13. Sometimes selectors get really specific div.entry-content cite, div.comments ol.commentlist cite { border-bottom:1px dotted #999; cursor:help; } Selects any cite element that is a descendant of an ol element with a class attribute that contains the word commentlist that is a descendant of a div element with a class attribute that contains the word comments.
  • 14. When you are trying to change something, you may need to get really specific too. ol {} not specific enough? Try div.entry-content ol {} instead. .small {} not specific enough? Try div#content p.small
  • 15. Let’s talk about your problems Questions?
  • 16. Resources CSS cascade - a simple step-by-step presentation: http://www.maxdesign.com.au/2009/06/30/css-cascade/ Web Teacher Tips: http://www.webteacher.ws/web-teacher-tips-and-tutorials/ CSS: The Definitive Guide by Eric A. Meyer, O’Reilly, 2007

Editor's Notes

  1. This is a rule targeting the content div on a blog page.
  2. This is a rule targeting the content div on a blog page.
  3. This is a rule targeting the content div on a blog page.
  4. This is a rule targeting the content div on a blog page.
  5. There are several ways to figure out what selector you need to look for in the stylesheet. One uses the Web Developer Toolbar in Firefox. Other browsers have similar tools to help web developers. Or you can just search through View Source and figure it out.
  6. With Web Developer Toolbar
  7. Using View Source you can figure out approximately the same information to see which selector may be the one you want to target.