SlideShare a Scribd company logo
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 2016
Davide 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 1
Mohammad Shaker
 
Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
Zoe Gillenwater
 
Quarto Presentations with Reveal.js
Quarto Presentations with Reveal.jsQuarto Presentations with Reveal.js
Quarto Presentations with Reveal.js
JJAllaire1
 
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
Steven Faulkner
 
Opac customization
Opac customizationOpac customization
Opac customization
Chaudhary Ashokkumar
 
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 Design
tclanton4
 
Modernize Plone's Classic UI
Modernize Plone's Classic UIModernize Plone's Classic UI
Modernize Plone's Classic UI
PloneFoundation
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
Scottperrone
 
SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2SDN Mentor Hands On - Exercise 2
SDN Mentor Hands On - Exercise 2
dan_mcweeney
 
Windows phone and azure
Windows phone and azureWindows phone and azure
Windows phone and azure
★ Dovydas Navickas
 
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 UI
Stefan Antonelli
 
CSS3 Refresher
CSS3 RefresherCSS3 Refresher
CSS3 Refresher
Ivano Malavolta
 

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 Site
cdw9
 
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
cdw9
 
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 PDB
cdw9
 
Introduction to Transmogrifier
Introduction to TransmogrifierIntroduction to Transmogrifier
Introduction to Transmogrifier
cdw9
 
Contributing to Open Source
Contributing to Open SourceContributing to Open Source
Contributing to Open Source
cdw9
 
The Future of [Plone] Theming
The Future of [Plone] ThemingThe Future of [Plone] Theming
The Future of [Plone] Theming
cdw9
 
Unknown plone
Unknown ploneUnknown plone
Unknown plone
cdw9
 
How to Get Started Theming Plone
How to Get Started Theming PloneHow to Get Started Theming Plone
How to Get Started Theming Plone
cdw9
 
Intro to TAL
Intro to TALIntro to TAL
Intro to TAL
cdw9
 
Plone Theming in a Nutshell
Plone Theming in a NutshellPlone Theming in a Nutshell
Plone Theming in a Nutshell
cdw9
 

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

when will pi network coin be available on crypto exchange.
when will pi network coin be available on crypto exchange.when will pi network coin be available on crypto exchange.
when will pi network coin be available on crypto exchange.
DOT TECH
 
Independent Study - College of Wooster Research (2023-2024) FDI, Culture, Glo...
Independent Study - College of Wooster Research (2023-2024) FDI, Culture, Glo...Independent Study - College of Wooster Research (2023-2024) FDI, Culture, Glo...
Independent Study - College of Wooster Research (2023-2024) FDI, Culture, Glo...
AntoniaOwensDetwiler
 
Solution Manual For Financial Accounting, 8th Canadian Edition 2024, by Libby...
Solution Manual For Financial Accounting, 8th Canadian Edition 2024, by Libby...Solution Manual For Financial Accounting, 8th Canadian Edition 2024, by Libby...
Solution Manual For Financial Accounting, 8th Canadian Edition 2024, by Libby...
Donc Test
 
Seminar: Gender Board Diversity through Ownership Networks
Seminar: Gender Board Diversity through Ownership NetworksSeminar: Gender Board Diversity through Ownership Networks
Seminar: Gender Board Diversity through Ownership Networks
GRAPE
 
Donald Trump Presentation and his life.pptx
Donald Trump Presentation and his life.pptxDonald Trump Presentation and his life.pptx
Donald Trump Presentation and his life.pptx
SerdarHudaykuliyew
 
^%$Zone1:+971)581248768’][* Legit & Safe #Abortion #Pills #For #Sale In #Duba...
^%$Zone1:+971)581248768’][* Legit & Safe #Abortion #Pills #For #Sale In #Duba...^%$Zone1:+971)581248768’][* Legit & Safe #Abortion #Pills #For #Sale In #Duba...
^%$Zone1:+971)581248768’][* Legit & Safe #Abortion #Pills #For #Sale In #Duba...
mayaclinic18
 
G20 summit held in India. Proper presentation for G20 summit
G20 summit held in India. Proper presentation for G20 summitG20 summit held in India. Proper presentation for G20 summit
G20 summit held in India. Proper presentation for G20 summit
rohitsaxena882511
 
WhatsPump Thriving in the Whirlwind of Biden’s Crypto Roller Coaster
WhatsPump Thriving in the Whirlwind of Biden’s Crypto Roller CoasterWhatsPump Thriving in the Whirlwind of Biden’s Crypto Roller Coaster
WhatsPump Thriving in the Whirlwind of Biden’s Crypto Roller Coaster
muslimdavidovich670
 
一比一原版(GWU,GW毕业证)加利福尼亚大学|尔湾分校毕业证如何办理
一比一原版(GWU,GW毕业证)加利福尼亚大学|尔湾分校毕业证如何办理一比一原版(GWU,GW毕业证)加利福尼亚大学|尔湾分校毕业证如何办理
一比一原版(GWU,GW毕业证)加利福尼亚大学|尔湾分校毕业证如何办理
obyzuk
 
Instant Issue Debit Cards - High School Spirit
Instant Issue Debit Cards - High School SpiritInstant Issue Debit Cards - High School Spirit
Instant Issue Debit Cards - High School Spirit
egoetzinger
 
SWAIAP Fraud Risk Mitigation Prof Oyedokun.pptx
SWAIAP Fraud Risk Mitigation   Prof Oyedokun.pptxSWAIAP Fraud Risk Mitigation   Prof Oyedokun.pptx
SWAIAP Fraud Risk Mitigation Prof Oyedokun.pptx
Godwin Emmanuel Oyedokun MBA MSc PhD FCA FCTI FCNA CFE FFAR
 
Tdasx: Unveiling the Trillion-Dollar Potential of Bitcoin DeFi
Tdasx: Unveiling the Trillion-Dollar Potential of Bitcoin DeFiTdasx: Unveiling the Trillion-Dollar Potential of Bitcoin DeFi
Tdasx: Unveiling the Trillion-Dollar Potential of Bitcoin DeFi
nimaruinazawa258
 
1. Elemental Economics - Introduction to mining.pdf
1. Elemental Economics - Introduction to mining.pdf1. Elemental Economics - Introduction to mining.pdf
1. Elemental Economics - Introduction to mining.pdf
Neal Brewster
 
DEMAND AND SUPPLY.docx Notes for Economics
DEMAND AND SUPPLY.docx Notes for EconomicsDEMAND AND SUPPLY.docx Notes for Economics
DEMAND AND SUPPLY.docx Notes for Economics
Opanga1
 
APP I Lecture Notes to students 0f 4the year
APP I  Lecture Notes  to students 0f 4the yearAPP I  Lecture Notes  to students 0f 4the year
APP I Lecture Notes to students 0f 4the year
telilaalilemlem
 
Earn a passive income with prosocial investing
Earn a passive income with prosocial investingEarn a passive income with prosocial investing
Earn a passive income with prosocial investing
Colin R. Turner
 
Financial Assets: Debit vs Equity Securities.pptx
Financial Assets: Debit vs Equity Securities.pptxFinancial Assets: Debit vs Equity Securities.pptx
Financial Assets: Debit vs Equity Securities.pptx
Writo-Finance
 
Pensions and housing - Pensions PlayPen - 4 June 2024 v3 (1).pdf
Pensions and housing - Pensions PlayPen - 4 June 2024 v3 (1).pdfPensions and housing - Pensions PlayPen - 4 June 2024 v3 (1).pdf
Pensions and housing - Pensions PlayPen - 4 June 2024 v3 (1).pdf
Henry Tapper
 
Instant Issue Debit Cards
Instant Issue Debit CardsInstant Issue Debit Cards
Instant Issue Debit Cards
egoetzinger
 
can I really make money with pi network.
can I really make money with pi network.can I really make money with pi network.
can I really make money with pi network.
DOT TECH
 

Recently uploaded (20)

when will pi network coin be available on crypto exchange.
when will pi network coin be available on crypto exchange.when will pi network coin be available on crypto exchange.
when will pi network coin be available on crypto exchange.
 
Independent Study - College of Wooster Research (2023-2024) FDI, Culture, Glo...
Independent Study - College of Wooster Research (2023-2024) FDI, Culture, Glo...Independent Study - College of Wooster Research (2023-2024) FDI, Culture, Glo...
Independent Study - College of Wooster Research (2023-2024) FDI, Culture, Glo...
 
Solution Manual For Financial Accounting, 8th Canadian Edition 2024, by Libby...
Solution Manual For Financial Accounting, 8th Canadian Edition 2024, by Libby...Solution Manual For Financial Accounting, 8th Canadian Edition 2024, by Libby...
Solution Manual For Financial Accounting, 8th Canadian Edition 2024, by Libby...
 
Seminar: Gender Board Diversity through Ownership Networks
Seminar: Gender Board Diversity through Ownership NetworksSeminar: Gender Board Diversity through Ownership Networks
Seminar: Gender Board Diversity through Ownership Networks
 
Donald Trump Presentation and his life.pptx
Donald Trump Presentation and his life.pptxDonald Trump Presentation and his life.pptx
Donald Trump Presentation and his life.pptx
 
^%$Zone1:+971)581248768’][* Legit & Safe #Abortion #Pills #For #Sale In #Duba...
^%$Zone1:+971)581248768’][* Legit & Safe #Abortion #Pills #For #Sale In #Duba...^%$Zone1:+971)581248768’][* Legit & Safe #Abortion #Pills #For #Sale In #Duba...
^%$Zone1:+971)581248768’][* Legit & Safe #Abortion #Pills #For #Sale In #Duba...
 
G20 summit held in India. Proper presentation for G20 summit
G20 summit held in India. Proper presentation for G20 summitG20 summit held in India. Proper presentation for G20 summit
G20 summit held in India. Proper presentation for G20 summit
 
WhatsPump Thriving in the Whirlwind of Biden’s Crypto Roller Coaster
WhatsPump Thriving in the Whirlwind of Biden’s Crypto Roller CoasterWhatsPump Thriving in the Whirlwind of Biden’s Crypto Roller Coaster
WhatsPump Thriving in the Whirlwind of Biden’s Crypto Roller Coaster
 
一比一原版(GWU,GW毕业证)加利福尼亚大学|尔湾分校毕业证如何办理
一比一原版(GWU,GW毕业证)加利福尼亚大学|尔湾分校毕业证如何办理一比一原版(GWU,GW毕业证)加利福尼亚大学|尔湾分校毕业证如何办理
一比一原版(GWU,GW毕业证)加利福尼亚大学|尔湾分校毕业证如何办理
 
Instant Issue Debit Cards - High School Spirit
Instant Issue Debit Cards - High School SpiritInstant Issue Debit Cards - High School Spirit
Instant Issue Debit Cards - High School Spirit
 
SWAIAP Fraud Risk Mitigation Prof Oyedokun.pptx
SWAIAP Fraud Risk Mitigation   Prof Oyedokun.pptxSWAIAP Fraud Risk Mitigation   Prof Oyedokun.pptx
SWAIAP Fraud Risk Mitigation Prof Oyedokun.pptx
 
Tdasx: Unveiling the Trillion-Dollar Potential of Bitcoin DeFi
Tdasx: Unveiling the Trillion-Dollar Potential of Bitcoin DeFiTdasx: Unveiling the Trillion-Dollar Potential of Bitcoin DeFi
Tdasx: Unveiling the Trillion-Dollar Potential of Bitcoin DeFi
 
1. Elemental Economics - Introduction to mining.pdf
1. Elemental Economics - Introduction to mining.pdf1. Elemental Economics - Introduction to mining.pdf
1. Elemental Economics - Introduction to mining.pdf
 
DEMAND AND SUPPLY.docx Notes for Economics
DEMAND AND SUPPLY.docx Notes for EconomicsDEMAND AND SUPPLY.docx Notes for Economics
DEMAND AND SUPPLY.docx Notes for Economics
 
APP I Lecture Notes to students 0f 4the year
APP I  Lecture Notes  to students 0f 4the yearAPP I  Lecture Notes  to students 0f 4the year
APP I Lecture Notes to students 0f 4the year
 
Earn a passive income with prosocial investing
Earn a passive income with prosocial investingEarn a passive income with prosocial investing
Earn a passive income with prosocial investing
 
Financial Assets: Debit vs Equity Securities.pptx
Financial Assets: Debit vs Equity Securities.pptxFinancial Assets: Debit vs Equity Securities.pptx
Financial Assets: Debit vs Equity Securities.pptx
 
Pensions and housing - Pensions PlayPen - 4 June 2024 v3 (1).pdf
Pensions and housing - Pensions PlayPen - 4 June 2024 v3 (1).pdfPensions and housing - Pensions PlayPen - 4 June 2024 v3 (1).pdf
Pensions and housing - Pensions PlayPen - 4 June 2024 v3 (1).pdf
 
Instant Issue Debit Cards
Instant Issue Debit CardsInstant Issue Debit Cards
Instant Issue Debit Cards
 
can I really make money with pi network.
can I really make money with pi network.can I really make money with pi network.
can I really make money with pi network.
 

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