Successfully reported this slideshow.

Css Primer - basic stuff


Published on

This is so 1999...but not all developers are aware of the basics so here's a little recap for the team.

Published in: Technology
  • Be the first to comment

Css Primer - basic stuff

  1. 1. css the very basics <ul><li>a primer for hk search engineers </li></ul>kenny tang jan 2010
  2. 2. Before HTML4, styles were done with <font>, <br>, &nbsp;, <table> tags:
  3. 3. CSS came along with the aim of removing formatting from HTML documents markup with inline style browser rendering
  4. 4. CSS rules syntax HTML element you want to style property:value pairs (same line or multiple)
  5. 5. Choosing the correct selector: which element(s) do you want to style? One single line of text? A block of YSM ads? All content wrapped with <p> tags? The page background? Use id , class and tag for differentiation
  6. 6. id - targets a single, unique element: use # in css selector use id in html tag
  7. 7. class - targets multiple elements: use ‘.’ in css selector use class in html tag targets all elements with class “ yschysm ” with html tag “ li ”
  8. 8. tags - targets specific html elements: use html tag name in css selector no special tags needed in html tag targets all elements with tag “ a ” with state of “link” (static hyperlinks) commonly used for removing underlines from <a> tags
  9. 9. recap of selector declarations so far: class: id: tags: finer-grain targeting: targets all <a> links in hover state, which are enclosed by <li> tags, with class of “ vsearchtabs ” and id of “ searchtab_t ”
  10. 10. styles possessed by each element are inherited from multiple sources it’s up to css parsers and rendering engines (webkit, gecko) to analyze the style hierarchy and decide how to render each and every element #heading1{text-align:center;color:red;} external .css file <head> <style> #heading1{text-align:left;color:green;} </style> </head> internal <style> block inline style browser rendering result:
  11. 11. Quick scan of fundamental css attributes: top,right,bottom,left
  12. 12. css browser hacks, sometimes needed for those IE quirks
  13. 13. Simple FE bugs troubleshooting tips: 1. With Firebug’s inspect tool, understand the basic structure of the page first.
  14. 14. Simple FE bugs troubleshooting tips: 2. Drill down the DOM tree to locate the area/element you wish to check: “ fcts_lp ”: left rail “ r-m ”: main search results area
  15. 15. Simple FE bugs troubleshooting tips: 3. With Firebug’s inspect tools, identify the element and look at the style info on the right pane.
  16. 16. Simple FE bugs troubleshooting tips: 4. Attempt to troubleshoot/fix the problem by inserting style attributes directly into the style pane and observe what happens:
  17. 17. Required Reading links removed