Making CSS and Firebug Your New Friends


Published on

A basic introduction to CSS and Firebug

1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Making CSS and Firebug Your New Friends

  1. PLONE CONFERENCE 2011Making 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 2011The cascade determines the order in which theCSS is prioritized.Factors include:* order of importation (Plone CSS Registry)* specificity of selectors* !important flickr/Cayusa
  4. How to insert CSS PLONE CONFERENCE 2011External:<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 2011h1,.documentFirstHeading { color: #333333; font-size: 24px; border-bottom: 1px solid #333333;}
  6. Selectors PLONE CONFERENCE 2011Tags:h1, p, span, divIDs:#visual-portal-wrapper, #portal-logoClasses:.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 2011h1 { 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 2011Most popularly used on anchors for applyingstyles to their different states: a:hover a:active a:visited flickr/Plbmak
  10. Shorthand Properties PLONE CONFERENCE 2011background: #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 2011border-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 2011li { display: block; }Block level elements start on anew line and fill the space oftheir parent. (p, div)Inline items appear in line withthe text. (span, em, img) flickr/lobo235
  13. Display Options PLONE CONFERENCE 2011 oneblock two three fourinline one two three four one two < for bullet display on lilist-item three fournone < 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 2011img { float: right; }Floats will push an element to one side and allowcontent to wrap around it
  18. Floats & Clears PLONE CONFERENCE 20111. Containers don’t expandfor the floating content2. You may not want thenext element to wraparound 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 { 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 { border: 1px solid #ffffff; border-radius: 0 30px 30px 30px;}* clockwise from top left* can make circles
  27. Shadows PLONE CONFERENCE 2011h1 { 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 elementThis will highlight the element in the HTML tab
  31. Firebug Inspector PLONE CONFERENCE 2011With an element highlighted in the HTML tab,you can see the styles applied to it.
  32. Firebug Styles PLONE CONFERENCE 2011The style tab shows how the styles are cascadingin descending order
  33. Firebug Styles PLONE CONFERENCE 2011In the Style tab, styles canbe adjusted, and newproperties can be added.The browser will displaythe changes. Values canbe typed or adjusted witharrow keys
  34. Firebug Styles PLONE CONFERENCE 2011The Layout tab shows box model styles. Valuescan be adjusted here, and will only apply to theselected element.
  35. Firebug Styles PLONE CONFERENCE 2011To disable a style, hover over it, then click theicon that will appear to the left
  36. Add-ons For Your Add-on PLONE CONFERENCE 2011Firebug Extensions:* Pixel Perfect* FireDiffOther Firefox Extensions:* MeasureIt* ColorZilla* Web Developer Toolkit
  37. Further Reading & Resources PLONE CONFERENCE 2011http://procssor.com
  38. PLONE CONFERENCE 2011 eck outCh .com/ demossix feetup