![css the very basics ,[object Object],kenny tang jan 2010](https://image.slidesharecdn.com/cssprimersearchteam2010-100310203647-phpapp01/85/Css-Primer-basic-stuff-1-320.jpg)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Css Primer - basic stuff
Similar to Css Primer - basic stuff (20)
More from kenshin03
Recently uploaded
Recently uploaded (20)
Css Primer - basic stuff
- 2. Before HTML4, styles were done with <font>, <br>, , <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