SlideShare a Scribd company logo
1 of 38
Download to read offline
PLONE CONFERENCE 2011




Making CSS and Firebug
  Your New Friends
     Chrissy Wainwright
What is CSS?
                                             PLONE CONFERENCE 2011




* Cascading Style Sheets
* Controls colors, fonts, sizes, positioning, etc
What is CSS?
                                        PLONE CONFERENCE 2011




The cascade determines the order in which the
CSS is prioritized.

Factors include:
* order of importation
  (Plone CSS Registry)
* specificity of selectors
* !important

                                        flickr/Cayusa
How to insert CSS
                                         PLONE CONFERENCE 2011


External:
<link rel=”stylesheet” type=”text/css”
      href=”public.css”>

Embedded:
<style type=”text/css”>
   body { background-color: #f1f1f1; }
</style>

Inline:
<p style=”color: #333333;”>
Syntax
                                        PLONE CONFERENCE 2011




h1,
.documentFirstHeading {
    color: #333333;
    font-size: 24px;
    border-bottom: 1px solid #333333;
}
Selectors
                                       PLONE CONFERENCE 2011




Tags:
h1, p, span, div

IDs:
#visual-portal-wrapper, #portal-logo

Classes:
.section-news, .visualClear
Selector Specificity
                                           PLONE CONFERENCE 2011




 h1.documentFirstHeading { ... }

  - an h1 with the class documentFirstHeading

 .section-news #content { ... }
  - styles for #content when inside .section-news

 #region-content.documentContent { ... }
  - an element with both the id region-content
    and class documentContent
A Matter of !Importance
                                          PLONE CONFERENCE 2011




h1 { color: #ff0000 !important; }

  will override

.section-news #content h1 { color: #333333; }

  even though the second is more specific.


Use !important sparingly!
Pseudo Selectors
                                         PLONE CONFERENCE 2011




Most popularly used on anchors for applying
styles to their different states:
  a:hover
  a:active
  a:visited




                                        flickr/Plbmak
Shorthand Properties
                                          PLONE CONFERENCE 2011




background: #fff url(bg.jpg) repeat-x top right;
background-color: #ffffff;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-position: top right;

border: 1px solid #333333;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #333333;
Shorthand Properties
                                 PLONE CONFERENCE 2011




border-width: 2px 2px 2px 2px;

border-width: 2px;

padding: 5px 10px 5px 10px;

padding: 5px 10px;

margin: 0 10px 20px 10px;

margin: 0 10px 20px;
Block vs Inline
                                   PLONE CONFERENCE 2011




li { display: block; }


Block level elements start on a
new line and fill the space of
their parent. (p, div)


Inline items appear in line with
the text. (span, em, img)             flickr/lobo235
Display Options
                                                 PLONE CONFERENCE 2011

            one
block       two
            three
            four


inline      one two three four


            one
            two           < for bullet display on li
list-item   three
            four



none                      < similar to visibility: hidden,
                          but doesn’t leave a space
Display Options
                                           PLONE CONFERENCE 2011




* Block items should not be put inside inline items


* Inline items can be made “block” for applying
  width and height


* Also, there is inline-block!
Box Model
                                    PLONE CONFERENCE 2011




            flickr/cmdshiftdesign
Box Model
            PLONE CONFERENCE 2011
Floats & Clears
                                          PLONE CONFERENCE 2011




img { float: right; }

Floats will push an element to one side and allow
content to wrap around it
Floats & Clears
                                             PLONE CONFERENCE 2011




1. Containers don’t expand
for the floating content


2. You may not want the
next element to wrap
around the float.

You can use Plone’s .visualClear on a div, or :after
Floats & Clears
                                      PLONE CONFERENCE 2011



                  With a clear: both; at the
                  end of the purple div.
                  overflow: auto; would also
                  do this


                  With a clear before the
                  next paragraph
Positioning
                                      PLONE CONFERENCE 2011




              #container {
                width: 350px;
                position: relative;
              }
              #container div {
                float: left;
                width: 100px;
                height: 100px;
                border: 1px solid #000000;
                margin: 0 10px 10px 0;
                position: static;
              }
Positioning
                                      PLONE CONFERENCE 2011



              .box5 {
                position: relative;
                top: 30px;
                left: 30px;
              }


              .box5 {
                position: absolute;
                top: 30px;
                left: 30px;
              }
Positioning
                                           PLONE CONFERENCE 2011




* space is removed
* positioned within parent that
  has position: relative;
  (body, if none)
* position: fixed is similar, but
  will stay in place when scrolling
* z-index can be applied for determining
  top to bottom order
New CSS3 Properties
                          PLONE CONFERENCE 2011




* Opacity, RGB alpha
* Multiple backgrounds
* Rounded corners
* Shadows
* + more




                         flickr/cdw9
Colors, Opacity
                                         PLONE CONFERENCE 2011




             .box1 {
               background-color: #123456;
             }
             .box2 {
               background-color: rgb(18,52,86);
               opacity: 0.7;
             }
             .box3 {
               background-color: rgba(18,52,86,0.7);
             }
Multiple Backgrounds
                                             PLONE CONFERENCE 2011




.box {
  background:
    url(‘base.jpg’) repeat-x bottom left,
    url(‘top.jpg’) repeat-x top left,
    url(‘middle.jpg’) repeat-y top center;
}


* separate with comma
* order from front to back
* only last can have a background color
Rounded Corners
                                     PLONE CONFERENCE 2011




.box {
  border: 1px solid #ffffff;
  border-radius: 0 30px 30px 30px;
}


* clockwise from top left
* can make circles
Shadows
                                           PLONE CONFERENCE 2011




h1 {
  text-shadow: 3px 3px #ff0000;
}
.box {
  box-shadow: 5px 5px 10px 10px #333333;
}


 inset/outset, x, y,
 blur, spread, color
Browser Stats
                                      PLONE CONFERENCE 2011




                             X CSS3




                    ~ CSS3
                X CSS3

            X CSS3
Firebug
                                       PLONE CONFERENCE 2011




* Firefox web development tool
* Live Source Code (with JS applied)
* Styles
* Code is editable on the fly for
  display in the browser. Changes
  are not saved, and will reset on
  refresh.
Firebug Inspector
                                           PLONE CONFERENCE 2011




* Right click an element, select “Inspect Element”
* Or with Firebug open, click the Inspector, then
  click an element


This will highlight the element in the HTML tab
Firebug Inspector
                                        PLONE CONFERENCE 2011




With an element highlighted in the HTML tab,
you can see the styles applied to it.
Firebug Styles
                                         PLONE CONFERENCE 2011




The style tab shows how the styles are cascading
in descending order
Firebug Styles
                               PLONE CONFERENCE 2011




In the Style tab, styles can
be adjusted, and new
properties can be added.
The browser will display
the changes. Values can
be typed or adjusted with
arrow keys
Firebug Styles
                                           PLONE CONFERENCE 2011




The Layout tab shows box model styles. Values
can be adjusted here, and will only apply to the
selected element.
Firebug Styles
                                              PLONE CONFERENCE 2011




To disable a style, hover over it, then click the
icon that will appear to the left
Add-ons For Your Add-on
                            PLONE CONFERENCE 2011




Firebug Extensions:
* Pixel Perfect
* FireDiff


Other Firefox Extensions:
* MeasureIt
* ColorZilla
* Web Developer Toolkit
Further Reading & Resources
                                              PLONE CONFERENCE 2011




http://procssor.com
http://css-tricks.com/6386-efficiently-rendering-css
http://css-tricks.com/795-all-about-floats/
http://css3.info
http://css3please.com
http://gs.statcounter.com
http://getfirebug.com
http://caniuse.com
PLONE CONFERENCE 2011




   eck out
Ch
           .com/ demos
six feetup

More Related Content

Similar to Making CSS and Firebug Your New Friends

Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Davide Di Pumpo
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!Scott Vandehey
 
"CSS you've never known" by Bohdan Rusinka
"CSS you've never known" by Bohdan Rusinka "CSS you've never known" by Bohdan Rusinka
"CSS you've never known" by Bohdan Rusinka Binary Studio
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Stephen Hay
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Zoe Gillenwater
 
XNA L10–Shaders Part 1
XNA L10–Shaders Part 1XNA L10–Shaders Part 1
XNA L10–Shaders Part 1Mohammad Shaker
 
Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into PracticeZoe Gillenwater
 
Quarto Presentations with Reveal.js
Quarto Presentations with Reveal.jsQuarto Presentations with Reveal.js
Quarto Presentations with Reveal.jsJJAllaire1
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Steven Faulkner
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Zoe Gillenwater
 
Chapter 6 - Web Design
Chapter 6 - Web DesignChapter 6 - Web Design
Chapter 6 - Web Designtclanton4
 
Modernize Plone's Classic UI
Modernize Plone's Classic UIModernize Plone's Classic UI
Modernize Plone's Classic UIPloneFoundation
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2dan_mcweeney
 
Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)
Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)
Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)Ricardo Castelhano
 
Modernize Plone's Classic UI
Modernize Plone's Classic UIModernize Plone's Classic UI
Modernize Plone's Classic UIStefan Antonelli
 

Similar to Making CSS and Firebug Your New Friends (20)

Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016
 
Flexbox Will Shock You!
Flexbox Will Shock You!Flexbox Will Shock You!
Flexbox Will Shock You!
 
"CSS you've never known" by Bohdan Rusinka
"CSS you've never known" by Bohdan Rusinka "CSS you've never known" by Bohdan Rusinka
"CSS you've never known" by Bohdan Rusinka
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
 
XNA L10–Shaders Part 1
XNA L10–Shaders Part 1XNA L10–Shaders Part 1
XNA L10–Shaders Part 1
 
Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
 
Quarto Presentations with Reveal.js
Quarto Presentations with Reveal.jsQuarto Presentations with Reveal.js
Quarto Presentations with Reveal.js
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
 
Opac customization
Opac customizationOpac customization
Opac customization
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
 
Chapter 6 - Web Design
Chapter 6 - Web DesignChapter 6 - Web Design
Chapter 6 - Web Design
 
Modernize Plone's Classic UI
Modernize Plone's Classic UIModernize Plone's Classic UI
Modernize Plone's Classic UI
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2
 
Windows phone and azure
Windows phone and azureWindows phone and azure
Windows phone and azure
 
Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)
Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)
Developing silverlight 4 applications with expression blend 4 (30 Abr 2010)
 
Modernize Plone's Classic UI
Modernize Plone's Classic UIModernize Plone's Classic UI
Modernize Plone's Classic UI
 
CSS3 Refresher
CSS3 RefresherCSS3 Refresher
CSS3 Refresher
 

More from cdw9

Debugging Your Plone Site
Debugging Your Plone SiteDebugging Your Plone Site
Debugging Your Plone Sitecdw9
 
Crafting an Impactful Home Page That Your Editors Will Love
Crafting an Impactful Home Page That Your Editors Will LoveCrafting an Impactful Home Page That Your Editors Will Love
Crafting an Impactful Home Page That Your Editors Will Lovecdw9
 
Contributing to Open Source (Lightning Talk version)
Contributing to Open Source (Lightning Talk version)Contributing to Open Source (Lightning Talk version)
Contributing to Open Source (Lightning Talk version)cdw9
 
Debugging with PDB
Debugging with PDBDebugging with PDB
Debugging with PDBcdw9
 
Introduction to Transmogrifier
Introduction to TransmogrifierIntroduction to Transmogrifier
Introduction to Transmogrifiercdw9
 
Contributing to Open Source
Contributing to Open SourceContributing to Open Source
Contributing to Open Sourcecdw9
 
The Future of [Plone] Theming
The Future of [Plone] ThemingThe Future of [Plone] Theming
The Future of [Plone] Themingcdw9
 
Unknown plone
Unknown ploneUnknown plone
Unknown plonecdw9
 
How to Get Started Theming Plone
How to Get Started Theming PloneHow to Get Started Theming Plone
How to Get Started Theming Plonecdw9
 
Intro to TAL
Intro to TALIntro to TAL
Intro to TALcdw9
 
Plone Theming in a Nutshell
Plone Theming in a NutshellPlone Theming in a Nutshell
Plone Theming in a Nutshellcdw9
 

More from cdw9 (11)

Debugging Your Plone Site
Debugging Your Plone SiteDebugging Your Plone Site
Debugging Your Plone Site
 
Crafting an Impactful Home Page That Your Editors Will Love
Crafting an Impactful Home Page That Your Editors Will LoveCrafting an Impactful Home Page That Your Editors Will Love
Crafting an Impactful Home Page That Your Editors Will Love
 
Contributing to Open Source (Lightning Talk version)
Contributing to Open Source (Lightning Talk version)Contributing to Open Source (Lightning Talk version)
Contributing to Open Source (Lightning Talk version)
 
Debugging with PDB
Debugging with PDBDebugging with PDB
Debugging with PDB
 
Introduction to Transmogrifier
Introduction to TransmogrifierIntroduction to Transmogrifier
Introduction to Transmogrifier
 
Contributing to Open Source
Contributing to Open SourceContributing to Open Source
Contributing to Open Source
 
The Future of [Plone] Theming
The Future of [Plone] ThemingThe Future of [Plone] Theming
The Future of [Plone] Theming
 
Unknown plone
Unknown ploneUnknown plone
Unknown plone
 
How to Get Started Theming Plone
How to Get Started Theming PloneHow to Get Started Theming Plone
How to Get Started Theming Plone
 
Intro to TAL
Intro to TALIntro to TAL
Intro to TAL
 
Plone Theming in a Nutshell
Plone Theming in a NutshellPlone Theming in a Nutshell
Plone Theming in a Nutshell
 

Recently uploaded

20240315 _E-Invoicing Digiteal. .pptx
20240315 _E-Invoicing Digiteal.    .pptx20240315 _E-Invoicing Digiteal.    .pptx
20240315 _E-Invoicing Digiteal. .pptxFinTech Belgium
 
ACCOUNTING FOR BUSINESS.II DEPARTMENTAL ACCOUNTS.
ACCOUNTING FOR BUSINESS.II DEPARTMENTAL ACCOUNTS.ACCOUNTING FOR BUSINESS.II DEPARTMENTAL ACCOUNTS.
ACCOUNTING FOR BUSINESS.II DEPARTMENTAL ACCOUNTS.KumarJayaraman3
 
Work and Pensions report into UK corporate DB funding
Work and Pensions report into UK corporate DB fundingWork and Pensions report into UK corporate DB funding
Work and Pensions report into UK corporate DB fundingHenry Tapper
 
Stock Market Brief Deck for March 19 2024.pdf
Stock Market Brief Deck for March 19 2024.pdfStock Market Brief Deck for March 19 2024.pdf
Stock Market Brief Deck for March 19 2024.pdfMichael Silva
 
RWA Report 2024: Rise of Real-World Assets in Crypto | CoinGecko
RWA Report 2024: Rise of Real-World Assets in Crypto | CoinGeckoRWA Report 2024: Rise of Real-World Assets in Crypto | CoinGecko
RWA Report 2024: Rise of Real-World Assets in Crypto | CoinGeckoCoinGecko
 
Stock Market Brief Deck for 3/22/2024.pdf
Stock Market Brief Deck for 3/22/2024.pdfStock Market Brief Deck for 3/22/2024.pdf
Stock Market Brief Deck for 3/22/2024.pdfMichael Silva
 
The Power Laws of Bitcoin: How can an S-curve be a power law?
The Power Laws of Bitcoin: How can an S-curve be a power law?The Power Laws of Bitcoin: How can an S-curve be a power law?
The Power Laws of Bitcoin: How can an S-curve be a power law?Stephen Perrenod
 
Stock Market Brief Deck for March 26.pdf
Stock Market Brief Deck for March 26.pdfStock Market Brief Deck for March 26.pdf
Stock Market Brief Deck for March 26.pdfMichael Silva
 
2024.03 Strategic Resources Presentation
2024.03 Strategic Resources Presentation2024.03 Strategic Resources Presentation
2024.03 Strategic Resources PresentationAdnet Communications
 
The unequal battle of inflation and the appropriate sustainable solution | Eu...
The unequal battle of inflation and the appropriate sustainable solution | Eu...The unequal battle of inflation and the appropriate sustainable solution | Eu...
The unequal battle of inflation and the appropriate sustainable solution | Eu...Antonis Zairis
 
ACCOUNTING FOR BUSINESS.II BRANCH ACCOUNTS NOTES
ACCOUNTING FOR BUSINESS.II BRANCH ACCOUNTS NOTESACCOUNTING FOR BUSINESS.II BRANCH ACCOUNTS NOTES
ACCOUNTING FOR BUSINESS.II BRANCH ACCOUNTS NOTESKumarJayaraman3
 
Slideshare - ONS Economic Forum Slidepack - 18 March 2024.pptx
Slideshare - ONS Economic Forum Slidepack - 18 March 2024.pptxSlideshare - ONS Economic Forum Slidepack - 18 March 2024.pptx
Slideshare - ONS Economic Forum Slidepack - 18 March 2024.pptxOffice for National Statistics
 
India Economic Survey Complete for the year of 2022 to 2023
India Economic Survey Complete for the year of 2022 to 2023India Economic Survey Complete for the year of 2022 to 2023
India Economic Survey Complete for the year of 2022 to 2023SkillCircle
 
Contracts with Interdependent Preferences
Contracts with Interdependent PreferencesContracts with Interdependent Preferences
Contracts with Interdependent PreferencesGRAPE
 
20240314 Calibre March 2024 Investor Presentation (FINAL).pdf
20240314 Calibre March 2024 Investor Presentation (FINAL).pdf20240314 Calibre March 2024 Investor Presentation (FINAL).pdf
20240314 Calibre March 2024 Investor Presentation (FINAL).pdfAdnet Communications
 
Introduction to Entrepreneurship and Characteristics of an Entrepreneur
Introduction to Entrepreneurship and Characteristics of an EntrepreneurIntroduction to Entrepreneurship and Characteristics of an Entrepreneur
Introduction to Entrepreneurship and Characteristics of an Entrepreneurabcisahunter
 

Recently uploaded (20)

20240315 _E-Invoicing Digiteal. .pptx
20240315 _E-Invoicing Digiteal.    .pptx20240315 _E-Invoicing Digiteal.    .pptx
20240315 _E-Invoicing Digiteal. .pptx
 
New Monthly Enterprises Survey. Issue 21. (01.2024) Ukrainian Business in War...
New Monthly Enterprises Survey. Issue 21. (01.2024) Ukrainian Business in War...New Monthly Enterprises Survey. Issue 21. (01.2024) Ukrainian Business in War...
New Monthly Enterprises Survey. Issue 21. (01.2024) Ukrainian Business in War...
 
ACCOUNTING FOR BUSINESS.II DEPARTMENTAL ACCOUNTS.
ACCOUNTING FOR BUSINESS.II DEPARTMENTAL ACCOUNTS.ACCOUNTING FOR BUSINESS.II DEPARTMENTAL ACCOUNTS.
ACCOUNTING FOR BUSINESS.II DEPARTMENTAL ACCOUNTS.
 
Work and Pensions report into UK corporate DB funding
Work and Pensions report into UK corporate DB fundingWork and Pensions report into UK corporate DB funding
Work and Pensions report into UK corporate DB funding
 
Stock Market Brief Deck for March 19 2024.pdf
Stock Market Brief Deck for March 19 2024.pdfStock Market Brief Deck for March 19 2024.pdf
Stock Market Brief Deck for March 19 2024.pdf
 
RWA Report 2024: Rise of Real-World Assets in Crypto | CoinGecko
RWA Report 2024: Rise of Real-World Assets in Crypto | CoinGeckoRWA Report 2024: Rise of Real-World Assets in Crypto | CoinGecko
RWA Report 2024: Rise of Real-World Assets in Crypto | CoinGecko
 
Stock Market Brief Deck for 3/22/2024.pdf
Stock Market Brief Deck for 3/22/2024.pdfStock Market Brief Deck for 3/22/2024.pdf
Stock Market Brief Deck for 3/22/2024.pdf
 
The Power Laws of Bitcoin: How can an S-curve be a power law?
The Power Laws of Bitcoin: How can an S-curve be a power law?The Power Laws of Bitcoin: How can an S-curve be a power law?
The Power Laws of Bitcoin: How can an S-curve be a power law?
 
Stock Market Brief Deck for March 26.pdf
Stock Market Brief Deck for March 26.pdfStock Market Brief Deck for March 26.pdf
Stock Market Brief Deck for March 26.pdf
 
2024.03 Strategic Resources Presentation
2024.03 Strategic Resources Presentation2024.03 Strategic Resources Presentation
2024.03 Strategic Resources Presentation
 
Monthly Economic Monitoring of Ukraine No.230, March 2024
Monthly Economic Monitoring of Ukraine No.230, March 2024Monthly Economic Monitoring of Ukraine No.230, March 2024
Monthly Economic Monitoring of Ukraine No.230, March 2024
 
The unequal battle of inflation and the appropriate sustainable solution | Eu...
The unequal battle of inflation and the appropriate sustainable solution | Eu...The unequal battle of inflation and the appropriate sustainable solution | Eu...
The unequal battle of inflation and the appropriate sustainable solution | Eu...
 
Commercial Bank Economic Capsule - March 2024
Commercial Bank Economic Capsule - March 2024Commercial Bank Economic Capsule - March 2024
Commercial Bank Economic Capsule - March 2024
 
Effects & Policies Of Bank Consolidation
Effects & Policies Of Bank ConsolidationEffects & Policies Of Bank Consolidation
Effects & Policies Of Bank Consolidation
 
ACCOUNTING FOR BUSINESS.II BRANCH ACCOUNTS NOTES
ACCOUNTING FOR BUSINESS.II BRANCH ACCOUNTS NOTESACCOUNTING FOR BUSINESS.II BRANCH ACCOUNTS NOTES
ACCOUNTING FOR BUSINESS.II BRANCH ACCOUNTS NOTES
 
Slideshare - ONS Economic Forum Slidepack - 18 March 2024.pptx
Slideshare - ONS Economic Forum Slidepack - 18 March 2024.pptxSlideshare - ONS Economic Forum Slidepack - 18 March 2024.pptx
Slideshare - ONS Economic Forum Slidepack - 18 March 2024.pptx
 
India Economic Survey Complete for the year of 2022 to 2023
India Economic Survey Complete for the year of 2022 to 2023India Economic Survey Complete for the year of 2022 to 2023
India Economic Survey Complete for the year of 2022 to 2023
 
Contracts with Interdependent Preferences
Contracts with Interdependent PreferencesContracts with Interdependent Preferences
Contracts with Interdependent Preferences
 
20240314 Calibre March 2024 Investor Presentation (FINAL).pdf
20240314 Calibre March 2024 Investor Presentation (FINAL).pdf20240314 Calibre March 2024 Investor Presentation (FINAL).pdf
20240314 Calibre March 2024 Investor Presentation (FINAL).pdf
 
Introduction to Entrepreneurship and Characteristics of an Entrepreneur
Introduction to Entrepreneurship and Characteristics of an EntrepreneurIntroduction to Entrepreneurship and Characteristics of an Entrepreneur
Introduction to Entrepreneurship and Characteristics of an Entrepreneur
 

Making CSS and Firebug Your New Friends

  • 1. PLONE CONFERENCE 2011 Making CSS and Firebug Your New Friends Chrissy Wainwright
  • 2. What is CSS? PLONE CONFERENCE 2011 * Cascading Style Sheets * Controls colors, fonts, sizes, positioning, etc
  • 3. What is CSS? PLONE CONFERENCE 2011 The cascade determines the order in which the CSS is prioritized. Factors include: * order of importation (Plone CSS Registry) * specificity of selectors * !important flickr/Cayusa
  • 4. How to insert CSS PLONE CONFERENCE 2011 External: <link rel=”stylesheet” type=”text/css” href=”public.css”> Embedded: <style type=”text/css”> body { background-color: #f1f1f1; } </style> Inline: <p style=”color: #333333;”>
  • 5. Syntax PLONE CONFERENCE 2011 h1, .documentFirstHeading { color: #333333; font-size: 24px; border-bottom: 1px solid #333333; }
  • 6. Selectors PLONE CONFERENCE 2011 Tags: h1, p, span, div IDs: #visual-portal-wrapper, #portal-logo Classes: .section-news, .visualClear
  • 7. Selector Specificity PLONE CONFERENCE 2011 h1.documentFirstHeading { ... } - an h1 with the class documentFirstHeading .section-news #content { ... } - styles for #content when inside .section-news #region-content.documentContent { ... } - an element with both the id region-content and class documentContent
  • 8. A Matter of !Importance PLONE CONFERENCE 2011 h1 { color: #ff0000 !important; } will override .section-news #content h1 { color: #333333; } even though the second is more specific. Use !important sparingly!
  • 9. Pseudo Selectors PLONE CONFERENCE 2011 Most popularly used on anchors for applying styles to their different states: a:hover a:active a:visited flickr/Plbmak
  • 10. Shorthand Properties PLONE CONFERENCE 2011 background: #fff url(bg.jpg) repeat-x top right; background-color: #ffffff; background-image: url(bg.jpg); background-repeat: repeat-x; background-position: top right; border: 1px solid #333333; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #333333;
  • 11. Shorthand Properties PLONE CONFERENCE 2011 border-width: 2px 2px 2px 2px; border-width: 2px; padding: 5px 10px 5px 10px; padding: 5px 10px; margin: 0 10px 20px 10px; margin: 0 10px 20px;
  • 12. Block vs Inline PLONE CONFERENCE 2011 li { display: block; } Block level elements start on a new line and fill the space of their parent. (p, div) Inline items appear in line with the text. (span, em, img) flickr/lobo235
  • 13. Display Options PLONE CONFERENCE 2011 one block two three four inline one two three four one two < for bullet display on li list-item three four none < similar to visibility: hidden, but doesn’t leave a space
  • 14. Display Options PLONE CONFERENCE 2011 * Block items should not be put inside inline items * Inline items can be made “block” for applying width and height * Also, there is inline-block!
  • 15. Box Model PLONE CONFERENCE 2011 flickr/cmdshiftdesign
  • 16. Box Model PLONE CONFERENCE 2011
  • 17. Floats & Clears PLONE CONFERENCE 2011 img { float: right; } Floats will push an element to one side and allow content to wrap around it
  • 18. Floats & Clears PLONE CONFERENCE 2011 1. Containers don’t expand for the floating content 2. You may not want the next element to wrap around the float. You can use Plone’s .visualClear on a div, or :after
  • 19. Floats & Clears PLONE CONFERENCE 2011 With a clear: both; at the end of the purple div. overflow: auto; would also do this With a clear before the next paragraph
  • 20. Positioning PLONE CONFERENCE 2011 #container { width: 350px; position: relative; } #container div { float: left; width: 100px; height: 100px; border: 1px solid #000000; margin: 0 10px 10px 0; position: static; }
  • 21. Positioning PLONE CONFERENCE 2011 .box5 { position: relative; top: 30px; left: 30px; } .box5 { position: absolute; top: 30px; left: 30px; }
  • 22. Positioning PLONE CONFERENCE 2011 * space is removed * positioned within parent that has position: relative; (body, if none) * position: fixed is similar, but will stay in place when scrolling * z-index can be applied for determining top to bottom order
  • 23. New CSS3 Properties PLONE CONFERENCE 2011 * Opacity, RGB alpha * Multiple backgrounds * Rounded corners * Shadows * + more flickr/cdw9
  • 24. Colors, Opacity PLONE CONFERENCE 2011 .box1 { background-color: #123456; } .box2 { background-color: rgb(18,52,86); opacity: 0.7; } .box3 { background-color: rgba(18,52,86,0.7); }
  • 25. Multiple Backgrounds PLONE CONFERENCE 2011 .box { background: url(‘base.jpg’) repeat-x bottom left, url(‘top.jpg’) repeat-x top left, url(‘middle.jpg’) repeat-y top center; } * separate with comma * order from front to back * only last can have a background color
  • 26. Rounded Corners PLONE CONFERENCE 2011 .box { border: 1px solid #ffffff; border-radius: 0 30px 30px 30px; } * clockwise from top left * can make circles
  • 27. Shadows PLONE CONFERENCE 2011 h1 { text-shadow: 3px 3px #ff0000; } .box { box-shadow: 5px 5px 10px 10px #333333; } inset/outset, x, y, blur, spread, color
  • 28. Browser Stats PLONE CONFERENCE 2011 X CSS3 ~ CSS3 X CSS3 X CSS3
  • 29. Firebug PLONE CONFERENCE 2011 * Firefox web development tool * Live Source Code (with JS applied) * Styles * Code is editable on the fly for display in the browser. Changes are not saved, and will reset on refresh.
  • 30. Firebug Inspector PLONE CONFERENCE 2011 * Right click an element, select “Inspect Element” * Or with Firebug open, click the Inspector, then click an element This will highlight the element in the HTML tab
  • 31. Firebug Inspector PLONE CONFERENCE 2011 With an element highlighted in the HTML tab, you can see the styles applied to it.
  • 32. Firebug Styles PLONE CONFERENCE 2011 The style tab shows how the styles are cascading in descending order
  • 33. Firebug Styles PLONE CONFERENCE 2011 In the Style tab, styles can be adjusted, and new properties can be added. The browser will display the changes. Values can be typed or adjusted with arrow keys
  • 34. Firebug Styles PLONE CONFERENCE 2011 The Layout tab shows box model styles. Values can be adjusted here, and will only apply to the selected element.
  • 35. Firebug Styles PLONE CONFERENCE 2011 To disable a style, hover over it, then click the icon that will appear to the left
  • 36. Add-ons For Your Add-on PLONE CONFERENCE 2011 Firebug Extensions: * Pixel Perfect * FireDiff Other Firefox Extensions: * MeasureIt * ColorZilla * Web Developer Toolkit
  • 37. Further Reading & Resources PLONE CONFERENCE 2011 http://procssor.com http://css-tricks.com/6386-efficiently-rendering-css http://css-tricks.com/795-all-about-floats/ http://css3.info http://css3please.com http://gs.statcounter.com http://getfirebug.com http://caniuse.com
  • 38. PLONE CONFERENCE 2011 eck out Ch .com/ demos six feetup