Css Primer - basic stuff

  • 671 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
671
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. css the very basics
    • a primer for hk search engineers
    kenny tang jan 2010
  • 2. Before HTML4, styles were done with <font>, <br>, &nbsp;, <table> tags:
  • 3. CSS came along with the aim of removing formatting from HTML documents markup with inline style browser rendering
  • 4. CSS rules syntax HTML element you want to style property:value pairs (same line or multiple)
  • 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. id - targets a single, unique element: use # in css selector use id in html tag
  • 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. 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. 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. 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. Quick scan of fundamental css attributes: top,right,bottom,left
  • 12. css browser hacks, sometimes needed for those IE quirks
  • 13. Simple FE bugs troubleshooting tips: 1. With Firebug’s inspect tool, understand the basic structure of the page first.
  • 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. 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. 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. Required Reading links removed