css primer - basic stuff
DESCRIPTION
This is so 1999...but not all developers are aware of the basics so here's a little recap for the team.TRANSCRIPT
css the very basicscss the very basicsa primer for hk search engineersa primer for hk search engineers
kenny tang jan 2010kenny tang jan 2010
Before HTML4, styles were done with <font>, Before HTML4, styles were done with <font>, <br>, , <table> tags:<br>, , <table> tags:
CSS came along with the aim of removing CSS came along with the aim of removing formatting from HTML documentsformatting from HTML documents
markup with inline stylemarkup with inline style browser renderingbrowser rendering
CSS rules syntaxCSS rules syntax
HTML element you want HTML element you want to styleto style
property:value pairsproperty:value pairs(same line or multiple)(same line or multiple)
Choosing the correct selector:Choosing the correct selector:
which element(s) do you want to style?which element(s) do you want to style?
One single line of text? A block of YSM One single line of text? A block of YSM ads? All content wrapped with <p> tags? ads? All content wrapped with <p> tags?
The page background?The page background?
Use Use idid, , classclass and and tagtag for differentiation for differentiation
id - targets a id - targets a single, uniquesingle, unique element: element:
use use ## in css selector in css selector
use use idid in html tag in html tag
class - targets class - targets multiplemultiple elements: elements:
use use ‘.’‘.’ in css selector in css selector
use use classclass in html tag in html tagtargets all elements with class “targets all elements with class “yschysmyschysm” with html ” with html
tag “tag “lili””
tags - targets specific html elements:tags - targets specific html elements:
use use html tag namehtml tag name in css selector in css selector
no special tags needed in html tagno special tags needed in html tag
targets all elements with tag “targets all elements with tag “aa” with ” with state of “link” (static hyperlinks)state of “link” (static hyperlinks)
commonly used for removing underlines from <a> tagscommonly used for removing underlines from <a> tags
recap of selector declarations so far:recap of selector declarations so far:
class:class:
id:id:
tags:tags:
finer-grain finer-grain targeting:targeting:
targets all targets all <a><a> links in links in hover state, which are hover state, which are enclosed by enclosed by <li><li> tags, tags,
with with classclass of of ““vsearchtabsvsearchtabs” and ” and idid of of
““searchtab_tsearchtab_t””
styles possessed by each element are inherited styles possessed by each element are inherited from multiple sourcesfrom multiple sources
it’s up to css parsers and rendering engines (webkit, gecko) to analyze the style it’s up to css parsers and rendering engines (webkit, gecko) to analyze the style hierarchy and decide how to render each and every elementhierarchy and decide how to render each and every element
#heading1{text-align:center;color:red;} #heading1{text-align:center;color:red;} #heading1{text-align:center;color:red;} #heading1{text-align:center;color:red;} external .css fileexternal .css file
<head><head><style><style>#heading1{text-align:left;color:green;} #heading1{text-align:left;color:green;} </style></style></head></head>
<head><head><style><style>#heading1{text-align:left;color:green;} #heading1{text-align:left;color:green;} </style></style></head></head>
internal <style> blockinternal <style> block
inline styleinline style
browser rendering result:browser rendering result:
Quick scan of fundamental css attributes:Quick scan of fundamental css attributes:
top,right,bottom,lefttop,right,bottom,left
css browser hacks, sometimes needed for those css browser hacks, sometimes needed for those IE quirksIE quirks
Simple FE bugs troubleshooting tips: Simple FE bugs troubleshooting tips:
1. With Firebug’s inspect tool, understand the 1. With Firebug’s inspect tool, understand the basic structurebasic structure of the page first. of the page first.
Simple FE bugs troubleshooting tips: Simple FE bugs troubleshooting tips:
2. Drill down the DOM tree to locate the area/element you wish to check:2. Drill down the DOM tree to locate the area/element you wish to check:
““fcts_lpfcts_lp”: left rail”: left rail
““r-mr-m”: main search ”: main search results arearesults area
Simple FE bugs troubleshooting tips: Simple FE bugs troubleshooting tips:
3. With Firebug’s inspect tools, identify the element and look at the style info 3. With Firebug’s inspect tools, identify the element and look at the style info on the right pane.on the right pane.
Simple FE bugs troubleshooting tips: Simple FE bugs troubleshooting tips:
4. Attempt to troubleshoot/fix the problem by inserting style attributes directly 4. Attempt to troubleshoot/fix the problem by inserting style attributes directly into the style pane and observe what happens:into the style pane and observe what happens:
Required ReadingRequired Reading
links removedlinks removed