Css Primer - basic stuff

css the very basics
a primer for hk search engineers
kenny tang jan 2010

Before HTML4, styles were done with <font>, <br>, , <table> tags:

CSS came along with the aim of removing formatting from HTML documents markup with inline style browser rendering

CSS rules syntax HTML element you want to style property:value pairs (same line or multiple)

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

id - targets a single, unique element: use # in css selector use id in html tag

class - targets multiple elements: use ‘.’ in css selector use class in html tag targets all elements with class “ yschysm ” with html tag “ li ”

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

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 ”

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:

Quick scan of fundamental css attributes: top,right,bottom,left

css browser hacks, sometimes needed for those IE quirks

Simple FE bugs troubleshooting tips: 1. With Firebug’s inspect tool, understand the basic structure of the page first.

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

Simple FE bugs troubleshooting tips: 3. With Firebug’s inspect tools, identify the element and look at the style info on the right pane.

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:

Required Reading links removed

http://www.corgitoergosum.net	61
http://www.slideshare.net	1
http://translate.googleusercontent.com	1

Css Primer - basic stuff

by kenshin03 on Mar 10, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 63

Statistics

Css Primer - basic stuff — Presentation Transcript