This document provides an introduction to CSS (Cascading Style Sheets) for engineers. It explains that CSS was created to separate formatting from HTML content. It describes CSS syntax using selectors to target specific HTML elements and applying property-value pairs to style them. It also discusses inheritance of styles from multiple sources and how browsers render elements based on the calculated style.
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
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:
![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)
