SlideShare a Scribd company logo
css the very basics a primer for hk search engineers kenny tang jan 2010
Before HTML4, styles were done with <font>, <br>, &nbsp;, <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

More Related Content

PPTX
Class7
PPTX
Class6
PPTX
Webdesign
PDF
Web Development 3 (HTML & CSS)
PDF
Web Development 1 (HTML & CSS)
PPT
Week3 css
PDF
Html tags
PDF
CSS Selectors
Class7
Class6
Webdesign
Web Development 3 (HTML & CSS)
Web Development 1 (HTML & CSS)
Week3 css
Html tags
CSS Selectors

What's hot (20)

PPT
Higher Computing Science HTML
PPTX
Meta Tag Presentation
PPTX
The html tag
PPTX
Design Dream
PPTX
Computer fundamentals-internet p2
PPT
Frederick Highbaugh Jr Art 2830 Meta tag presentation
PDF
Introduction to web development - HTML 5
PDF
10x10 slides
PPT
Higher Computing Science CSS
PPTX
Web Page Designing
PPTX
Web Development - Lecture 2
PPTX
Seas the day our top 5 features you might not know
PPTX
Web Development - Lecture 3
PPTX
Presentation html
PDF
Intro to HTML
PPTX
Basic html structure
PPTX
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
PPTX
Css intro
PPTX
Class13
PPTX
Meta tags
Higher Computing Science HTML
Meta Tag Presentation
The html tag
Design Dream
Computer fundamentals-internet p2
Frederick Highbaugh Jr Art 2830 Meta tag presentation
Introduction to web development - HTML 5
10x10 slides
Higher Computing Science CSS
Web Page Designing
Web Development - Lecture 2
Seas the day our top 5 features you might not know
Web Development - Lecture 3
Presentation html
Intro to HTML
Basic html structure
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Css intro
Class13
Meta tags
Ad

Viewers also liked (7)

PDF
Curr opin hiv blips 2006
PPT
Natur net ieia_presentation_bg
PDF
Apertureshutterspeed
PDF
Googlewave
KEY
Googlewave
PDF
My Daily Commute Sf Bay May July 10
PPS
sweet babies, aranyos babák, süsse babys
Curr opin hiv blips 2006
Natur net ieia_presentation_bg
Apertureshutterspeed
Googlewave
Googlewave
My Daily Commute Sf Bay May July 10
sweet babies, aranyos babák, süsse babys
Ad

Similar to Css Primer - basic stuff (20)

PDF
Pfnp slides
PPT
Make Css easy(part:2) : easy tips for css(part:2)
PPTX
Web 102 INtro to CSS
PDF
Css tutorial by viveksingh698@gmail.com
PDF
Css tutorial
PDF
Css tutorial
PDF
Css tutorial
DOCX
PPTX
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
PPT
Basic css
PPTX
HTMLforbeginerslearntocodeforbeginersinfh
PDF
Intro to HTML and CSS - Class 2 Slides
PPTX
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
PPT
How Cascading Style Sheets (CSS) Works
RTF
Vijay it 2 year
PDF
Introduction to HTML-CSS-Javascript.pdf
PPTX
css v1 guru
PPTX
gdg Introduction to HTML-CSS-Javascript.pptx
PPTX
Introduction to HTML-CSS-Javascript.pptx
Pfnp slides
Make Css easy(part:2) : easy tips for css(part:2)
Web 102 INtro to CSS
Css tutorial by viveksingh698@gmail.com
Css tutorial
Css tutorial
Css tutorial
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Basic css
HTMLforbeginerslearntocodeforbeginersinfh
Intro to HTML and CSS - Class 2 Slides
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
How Cascading Style Sheets (CSS) Works
Vijay it 2 year
Introduction to HTML-CSS-Javascript.pdf
css v1 guru
gdg Introduction to HTML-CSS-Javascript.pptx
Introduction to HTML-CSS-Javascript.pptx

More from kenshin03 (8)

KEY
Apple inc and Steve Jobs - a bit of history
KEY
Visualizing the Search Tail
PDF
Good presentation styles
KEY
Iphone os dev sharing with new examples
PDF
Search Monkey Overview
PPT
Yahoo! Search Monkey in 3 slides
PDF
Geo search introduction
PDF
iPhone SDK dev sharing - the very basics
Apple inc and Steve Jobs - a bit of history
Visualizing the Search Tail
Good presentation styles
Iphone os dev sharing with new examples
Search Monkey Overview
Yahoo! Search Monkey in 3 slides
Geo search introduction
iPhone SDK dev sharing - the very basics

Recently uploaded (20)

PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PPTX
Big Data Technologies - Introduction.pptx
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PPTX
Spectroscopy.pptx food analysis technology
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PPTX
Cloud computing and distributed systems.
PDF
Encapsulation_ Review paper, used for researhc scholars
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Approach and Philosophy of On baking technology
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
DOCX
The AUB Centre for AI in Media Proposal.docx
PPTX
Programs and apps: productivity, graphics, security and other tools
“AI and Expert System Decision Support & Business Intelligence Systems”
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Big Data Technologies - Introduction.pptx
MYSQL Presentation for SQL database connectivity
Unlocking AI with Model Context Protocol (MCP)
MIND Revenue Release Quarter 2 2025 Press Release
Building Integrated photovoltaic BIPV_UPV.pdf
Mobile App Security Testing_ A Comprehensive Guide.pdf
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Spectroscopy.pptx food analysis technology
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Cloud computing and distributed systems.
Encapsulation_ Review paper, used for researhc scholars
Digital-Transformation-Roadmap-for-Companies.pptx
Approach and Philosophy of On baking technology
Reach Out and Touch Someone: Haptics and Empathic Computing
The Rise and Fall of 3GPP – Time for a Sabbatical?
The AUB Centre for AI in Media Proposal.docx
Programs and apps: productivity, graphics, security and other tools

Css Primer - basic stuff

  • 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: