SlideShare a Scribd company logo
CSS Methodology by Zohar Arad
What is CSS? CSS stands for Cascading Style Sheets and is the language used for implementing designs on HTML documents. CSS is a declarative language, not a programmable language. Currently the main-stream version of CSS supported by all major browsers is CSS 2.1
CSS Basics - Selectors CSS declarations are comprised of "selectors" and "properties". Selectors are used to select the element(s) in the page the declaration is applied to. Properties are used to denote which styling properties should be applied to the selected element(s) Example: selector{      property:value; }
CSS Basics - Selectors Selector Pattern Description Universal * Matches any element Type (element) E Matches any E element Class .class Matches any element with class="class" ID #id Matches any element with id="id" Descendant E D Matches any element D who is a descendant of element E Child E > D Matches any element D who is a direct child of element E Sibling E + D Matches any element D who is a direct sibling (adjacent) of element E Attribute E[attr] E[attr=val] E[attr~=val1 val2] E[attr|=val] Match element with attr attribute is equal to val attribute is equal to val1 or val2 attribute is not equal to val Pseudo-classes :hover, :active, :visited, :link, :first-child, :first-line, :first-letter :before, :after
CSS Basics - Selectors The following selectors are not supported in IE6: Child selectors - E > D Sibling selectors - E + D Attribute selectors - E[attr] ... Multiple class selectors - E.myclass.active Pseudo-classes - :before, :after, :first-child, :focus, :lang :hover pseudo-class only works on <a> elements   You can use this to target IE6 specific CSS:   #myID #container { background-image:url(/transparent.gif); } /* IE6 */ #myID > #container { background-image:url(/transparent.png); }
CSS Basics - Conflict Resolution When two CSS selectors target the same element(s), how does the browser know which declaration (CSS block) should be applied? This problem is known as  CSS Conflict Resolution  and is resolved on three levels: Cascade - selector level Importance - declaration level Specificity - selector level
CSS Basics - Conflict Resolution p - 0,0,0,1   p.class - 0,0,1,1   #nav li.active - 0,1,1,1 .ie .menu a:hover - 0,0,3,1 form input[type=submit] - 0,0,0,2 inline styles ID selectors Class selectors Type selectors 1 1 1 1
CSS Basics - Conflict Resolution Using the specificity table above we can determine how the browser will choose between two selectors that target the same element(s). Specific selectors will always take precedence over less specific selectors. Specificity works at the  selector level .   If two selectors with different specificity contain  different  CSS properties, there will be  no conflict  between them.
CSS Basics - Conflict Resolution For example:    a:hover{ /* specificity 0,0,0,1 */      color:blue; /* affects link color */ } li a:hover{ /* specificity 0,0,0,2 */      text-decoration:underline; /* affects link decoration */ } #post a:hover{ /* specificity 0,1,0,1 */      color:red; /* affects link color - conflicts with a:hover */ }
CSS Basics - Conflict Resolution When two or more CSS selectors have the same specificity and target the same element(s), how will the browser choose which will take precedence? According to the cascade, selectors are evaluated in the order they appear in the document.   Therefore, selectors that appear late in the document will take precedence over selectors that appear early in the document.
CSS Basics - Conflict Resolution When a browser evaluates CSS document it does so in the following order: User-agent CSS - lowest precedence Developer CSS - second-lowest precedence User-defined CSS - highest precedence   The rules of the cascade will be applied to the above CSS in ascending order. Like specificity, the cascade works at the selector level. Two overlapping selectors with different CSS properties will not cause a conflict.
CSS Basics - Conflict Resolution When two conflicting selectors contain the same CSS property / properties, how does the browser choose which property to apply? CSS properties can be marked as &quot;important&quot; which will mean they should take precedence over identical properties in conflicting selectors. For example: body { color:black !important; } div a { color:blue; }
CSS Basics - Conflict Resolution Putting everything together: When two or more selectors target the same element(s) the browser will: Try to resolve conflicting properties using specificity Try to resolve conflicting selectors using the cascade Try to resolve conflicting selectors using importance   Specificity has the lowest precedence and importance has the highest precedence. When resolving conflicts using importance, the rules of the cascade still apply!
CSS Basics - The Box Model The box model defines how the browser should handle the rectangular boxes that are generated for elements.   See image below or a  3D diagram  
CSS Basics - The Box Model In simple terms we can say that the box model defines the calculation of box dimensions as following: total width = border-right + padding-right + width + padding-left + border-left total height = border-top + padding-top + height + padding-bottom + border-bottom   Why is this important you ask? Simple - So we can calculate element dimensions when planning our layout.
CSS Basics - The Box Model A few things to remember: Block-level elements have explicit dimensions Inline-level elements have implicit dimensions Floating an element will cause an element to lose its width, unless set explicitly (as required by CSS specifications) Vertical margins are collapsed by the browser only so the larger of the two will take effect.
CSS Basics  Feedback and 5min break
CSS Best Practices & Tips Reset styles to eliminate browser inconsistencies ( example )   Use meaningful markup Separate content from display Use meaningful class and ID names Use specific selectors for faster parsing Harness the power of the cascade and CSS inheritance to your advantage    
CSS Best Practices & Tips Plan your layout carefully during the HTML coding stage  Group similar-styled page components together Define typography once at the beginning of your CSS document Use browser-specific CSS handicap to your advantage when trying to handle browser-specific problems #nav li a { ...some css for ie6 } #nav li > a { ...some css for all browsers }
CSS Best Practices & Tips Use IE conditional comments to apply global IE selectors:   <!--[if lt IE 7 ]> <body class=&quot; ie &quot; id=&quot; ie6 &quot;> <![endif]--> <!--[if IE 7 ]> <body class=&quot; ie &quot; id=&quot; ie7 &quot;> <![endif]--> <!--[if IE 8 ]> <body class=&quot; ie &quot; id=&quot; ie8 &quot;> <![endif]--> <!--[if !IE]><!--> <body> <!--<![endif]-->
Design Deconstruction When approaching a new project, it might be useful to deconstruct the design as follows: Look at content without design - Analyze what's the site's content structure so you can plan your HTML accordingly Analyze the proposed layout and identify common patterns and pitfalls Analyze the design's typographic structure and implement at the beginning of your CSS Identify graphic patterns that should be grouped into a CSS sprite. Use as few sprites as possible. If needed separate pattern sprites from icon sprites.
Design Deconstruction Try to identify browser-specific pitfalls in the design and either account for them in your plan or remove from design Try to identify what kind of interaction effects you should implement in the design and opt for CSS-driven effects whenever possible. Implement your UI once! If there are UI inconsistencies, either ignore or educate your designer. Identify resource-hungry decorations and put them on low-graphics diet. Reuse! Reuse! Reuse!   Lets look at  Ars Technica ,  Smashing Mag.  and  Linux.com
Break...  
Javascript Javascript is a fickle friend!!! Its a bit old, its a bit off-standard, it sort-of has an OOP model, but when you get to know it, its oodles of fun!
Javascript - The basics Javascript runs on the client which means that execution speed depends on the  rendering engine  and the  user's computer In other words - The same Javascript code will run differently on two computers.
Javascript - The basics If you can't beat them, join them! Minimize DOM complexity Include your Javascript where appropriate in the DOM Load Javascript on-demand if possible Cache your Javascript whenever possible Reduce file size to reduce initial parsing time Reduce network traffic to minimum Simplify your code to optimize execution time Validate your code with JSLint or similar
Javascript - The basics Understand Javascript variable-scope. Javascript variables has no private/public name-spaces Variables can be either global or local - beware of collision Declare variables explicitly to denote type and initial value and avoid name collisions Optionally, use Javascript Objects as variable containers   var  params = {      name  : 'zohar',      age  : 34,      height : 187,      skills  : ['css', 'js', 'xhtml']  }
Javascript - The basics Know thy DOM DOM is the mechanism we use to reference and manipulate our document's HTML.   The DOM is a programmatic, object-oriented way to represent and handle HTML (XML) structure.   In relation to text manipulation, DOM and XML parsing are very slow.   Each rendering engine implements the DOM a bit differently.
Javascript - The basics Know thy DOM DOM calls are expensive. Use the when appropriate Be specific in your DOM calls. Use  getElementById  when possible Cache DOM calls Although considered &quot;less&quot; elegant, innerHTML is much faster than  document .appendChild()
Javascript - The basics Understand the meaning of  &quot;this&quot; &quot;this&quot;  refers to the scope of code execution at any given point in the code, during  execution time  (not parse time). The easiest way to remember what is &quot;this&quot; is as follows: &quot;this&quot;  will always refer to the object before the &quot;.&quot; sign in the calling code.
Javascript - The basics function  test(){      var  _this =  this ; //this points to the window object } myObj = {      run  :  function (){          console.log( this .name); // this points to myObj      } ,      name : 'zohar' } myObj.run(); myElement. onclick  =  function (){      this .className = 'active'; // this points to myElement }
Javascript - Programming Tips Javascript short-hand is cool. Use it! //one-line variable assignment var   i  = 0,  arr  = [],  el  =  document .getElementById(' id ');   // default value assignment //arg1 is passed to the function   var   status  =  arg1  || ' active ';  //variable assignment in if statement var  el; if ( el =  document .getElementById(' id ') ){ ..... }
Javascript - Programming Tips // selective method execution myObj = {      func1 :  function () {},      func1 :  function () {}  } function  test( status ){      myObj[ status  == 'active' ? ' func1 ' : ' func2 ']();  }
Javascript - Programming Tips Use JSON for both parameters and code clusters to make your code more ordered and readable. var  tabManager = {      init :  function (){ ... }      onTabChange :  function () { ... }      params : {          active  : 'active',          inactive  : 'inactive'          tabsParentID  : 'tabs'      } }
Javascript - Programming Tips Try thinking OOP in Javascript:   var  Class =  function (obj){      return   function (){         if( typeof  obj.initialize ===  'function' ){             obj.initialize. apply (obj,arguments);         }         return obj;     } } Function . prototype .bind =  function (tgt){     var self =  this ;      return function (){         self. apply (tgt, arguments);     }(); }
Javascript - Programming Tips Try thinking OOP in Javascript:   var  Test =  new  Class({      initialize : function (){         console.log('starting', arguments , this );          this .run.bind( this );         bindTest.bind( this );     },      run :function(){         console.log( this ,'running');     } }); function bindTest(){     console.log( this ,'bindTest'); } var t = new Test(true,10);
Javascript  Questions Time
Ad

More Related Content

What's hot (19)

Basic css
Basic cssBasic css
Basic css
Gopinath Ambothi
 
Dominate The Theme Layer
Dominate The Theme LayerDominate The Theme Layer
Dominate The Theme Layer
Jesper Wøldiche
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
Abhishek Kesharwani
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
Achmad Solichin
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!
Syahmi RH
 
Internet tech &amp; web prog. p4,5
Internet tech &amp; web prog.  p4,5Internet tech &amp; web prog.  p4,5
Internet tech &amp; web prog. p4,5
Taymoor Nazmy
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
Sohail Christoper
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
CSS3 Introduction
CSS3 IntroductionCSS3 Introduction
CSS3 Introduction
Jaeni Sahuri
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
Shawn Calvert
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
Biswadip Goswami
 
Css3
Css3Css3
Css3
Deepak Mangal
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
Sanjoy Kr. Paul
 
Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!
FITC
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
William Myers
 
Css
CssCss
Css
mohamed ashraf
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!
Syahmi RH
 
Internet tech &amp; web prog. p4,5
Internet tech &amp; web prog.  p4,5Internet tech &amp; web prog.  p4,5
Internet tech &amp; web prog. p4,5
Taymoor Nazmy
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
Shawn Calvert
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
Sanjoy Kr. Paul
 
Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!
FITC
 

Viewers also liked (6)

Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
Zohar Arad
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Jer Clarke
 
Rolling Your Own CSS Methodology
Rolling Your Own CSS MethodologyRolling Your Own CSS Methodology
Rolling Your Own CSS Methodology
FITC
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
Nicole Sullivan
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
Bob Donderwinkel
 
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
Zohar Arad
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Jer Clarke
 
Rolling Your Own CSS Methodology
Rolling Your Own CSS MethodologyRolling Your Own CSS Methodology
Rolling Your Own CSS Methodology
FITC
 
Ad

Similar to CSS Methodology (20)

Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
Andolasoft Inc
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
tutorialsruby
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
tutorialsruby
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
Doncho Minkov
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
jackchenvlo
 
Css and its future
Css and its futureCss and its future
Css and its future
Alex Bondarev
 
Css
CssCss
Css
NIRMAL FELIX
 
Css
CssCss
Css
Jahid Blackrose
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
SURYANARAYANBISWAL1
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
Strongback Consulting
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
Amey Parab
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
Webpage style with CSS
Webpage style with CSSWebpage style with CSS
Webpage style with CSS
Hemant Patidar
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
adelaticleanu
 
CSS 101
CSS 101CSS 101
CSS 101
dunclair
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
Michael Anthony
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
CK Yang
 
Ad

Recently uploaded (20)

Transcript: Canadian book publishing: Insights from the latest salary survey ...
Transcript: Canadian book publishing: Insights from the latest salary survey ...Transcript: Canadian book publishing: Insights from the latest salary survey ...
Transcript: Canadian book publishing: Insights from the latest salary survey ...
BookNet Canada
 
UiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer OpportunitiesUiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer Opportunities
DianaGray10
 
UiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer OpportunitiesUiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer Opportunities
DianaGray10
 
How to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabberHow to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabber
eGrabber
 
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptxWebinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
MSP360
 
The Changing Compliance Landscape in 2025.pdf
The Changing Compliance Landscape in 2025.pdfThe Changing Compliance Landscape in 2025.pdf
The Changing Compliance Landscape in 2025.pdf
Precisely
 
DevOpsDays SLC - Platform Engineers are Product Managers.pptx
DevOpsDays SLC - Platform Engineers are Product Managers.pptxDevOpsDays SLC - Platform Engineers are Product Managers.pptx
DevOpsDays SLC - Platform Engineers are Product Managers.pptx
Justin Reock
 
AI Agents at Work: UiPath, Maestro & the Future of Documents
AI Agents at Work: UiPath, Maestro & the Future of DocumentsAI Agents at Work: UiPath, Maestro & the Future of Documents
AI Agents at Work: UiPath, Maestro & the Future of Documents
UiPathCommunity
 
IT484 Cyber Forensics_Information Technology
IT484 Cyber Forensics_Information TechnologyIT484 Cyber Forensics_Information Technology
IT484 Cyber Forensics_Information Technology
SHEHABALYAMANI
 
Slack like a pro: strategies for 10x engineering teams
Slack like a pro: strategies for 10x engineering teamsSlack like a pro: strategies for 10x engineering teams
Slack like a pro: strategies for 10x engineering teams
Nacho Cougil
 
Design pattern talk by Kaya Weers - 2025 (v2)
Design pattern talk by Kaya Weers - 2025 (v2)Design pattern talk by Kaya Weers - 2025 (v2)
Design pattern talk by Kaya Weers - 2025 (v2)
Kaya Weers
 
Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)
Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)
Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)
CSUC - Consorci de Serveis Universitaris de Catalunya
 
AI You Can Trust: The Critical Role of Governance and Quality.pdf
AI You Can Trust: The Critical Role of Governance and Quality.pdfAI You Can Trust: The Critical Role of Governance and Quality.pdf
AI You Can Trust: The Critical Role of Governance and Quality.pdf
Precisely
 
machines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdfmachines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdf
AmirStern2
 
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz
 
Shoehorning dependency injection into a FP language, what does it take?
Shoehorning dependency injection into a FP language, what does it take?Shoehorning dependency injection into a FP language, what does it take?
Shoehorning dependency injection into a FP language, what does it take?
Eric Torreborre
 
Bepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firmBepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firm
Benard76
 
Viam product demo_ Deploying and scaling AI with hardware.pdf
Viam product demo_ Deploying and scaling AI with hardware.pdfViam product demo_ Deploying and scaling AI with hardware.pdf
Viam product demo_ Deploying and scaling AI with hardware.pdf
camilalamoratta
 
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
Lorenzo Miniero
 
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...
Raffi Khatchadourian
 
Transcript: Canadian book publishing: Insights from the latest salary survey ...
Transcript: Canadian book publishing: Insights from the latest salary survey ...Transcript: Canadian book publishing: Insights from the latest salary survey ...
Transcript: Canadian book publishing: Insights from the latest salary survey ...
BookNet Canada
 
UiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer OpportunitiesUiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer Opportunities
DianaGray10
 
UiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer OpportunitiesUiPath Agentic Automation: Community Developer Opportunities
UiPath Agentic Automation: Community Developer Opportunities
DianaGray10
 
How to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabberHow to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabber
eGrabber
 
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptxWebinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
MSP360
 
The Changing Compliance Landscape in 2025.pdf
The Changing Compliance Landscape in 2025.pdfThe Changing Compliance Landscape in 2025.pdf
The Changing Compliance Landscape in 2025.pdf
Precisely
 
DevOpsDays SLC - Platform Engineers are Product Managers.pptx
DevOpsDays SLC - Platform Engineers are Product Managers.pptxDevOpsDays SLC - Platform Engineers are Product Managers.pptx
DevOpsDays SLC - Platform Engineers are Product Managers.pptx
Justin Reock
 
AI Agents at Work: UiPath, Maestro & the Future of Documents
AI Agents at Work: UiPath, Maestro & the Future of DocumentsAI Agents at Work: UiPath, Maestro & the Future of Documents
AI Agents at Work: UiPath, Maestro & the Future of Documents
UiPathCommunity
 
IT484 Cyber Forensics_Information Technology
IT484 Cyber Forensics_Information TechnologyIT484 Cyber Forensics_Information Technology
IT484 Cyber Forensics_Information Technology
SHEHABALYAMANI
 
Slack like a pro: strategies for 10x engineering teams
Slack like a pro: strategies for 10x engineering teamsSlack like a pro: strategies for 10x engineering teams
Slack like a pro: strategies for 10x engineering teams
Nacho Cougil
 
Design pattern talk by Kaya Weers - 2025 (v2)
Design pattern talk by Kaya Weers - 2025 (v2)Design pattern talk by Kaya Weers - 2025 (v2)
Design pattern talk by Kaya Weers - 2025 (v2)
Kaya Weers
 
AI You Can Trust: The Critical Role of Governance and Quality.pdf
AI You Can Trust: The Critical Role of Governance and Quality.pdfAI You Can Trust: The Critical Role of Governance and Quality.pdf
AI You Can Trust: The Critical Role of Governance and Quality.pdf
Precisely
 
machines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdfmachines-for-woodworking-shops-en-compressed.pdf
machines-for-woodworking-shops-en-compressed.pdf
AmirStern2
 
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz
 
Shoehorning dependency injection into a FP language, what does it take?
Shoehorning dependency injection into a FP language, what does it take?Shoehorning dependency injection into a FP language, what does it take?
Shoehorning dependency injection into a FP language, what does it take?
Eric Torreborre
 
Bepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firmBepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firm
Benard76
 
Viam product demo_ Deploying and scaling AI with hardware.pdf
Viam product demo_ Deploying and scaling AI with hardware.pdfViam product demo_ Deploying and scaling AI with hardware.pdf
Viam product demo_ Deploying and scaling AI with hardware.pdf
camilalamoratta
 
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
RTP Over QUIC: An Interesting Opportunity Or Wasted Time?
Lorenzo Miniero
 
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...
Raffi Khatchadourian
 

CSS Methodology

  • 1. CSS Methodology by Zohar Arad
  • 2. What is CSS? CSS stands for Cascading Style Sheets and is the language used for implementing designs on HTML documents. CSS is a declarative language, not a programmable language. Currently the main-stream version of CSS supported by all major browsers is CSS 2.1
  • 3. CSS Basics - Selectors CSS declarations are comprised of &quot;selectors&quot; and &quot;properties&quot;. Selectors are used to select the element(s) in the page the declaration is applied to. Properties are used to denote which styling properties should be applied to the selected element(s) Example: selector{      property:value; }
  • 4. CSS Basics - Selectors Selector Pattern Description Universal * Matches any element Type (element) E Matches any E element Class .class Matches any element with class=&quot;class&quot; ID #id Matches any element with id=&quot;id&quot; Descendant E D Matches any element D who is a descendant of element E Child E > D Matches any element D who is a direct child of element E Sibling E + D Matches any element D who is a direct sibling (adjacent) of element E Attribute E[attr] E[attr=val] E[attr~=val1 val2] E[attr|=val] Match element with attr attribute is equal to val attribute is equal to val1 or val2 attribute is not equal to val Pseudo-classes :hover, :active, :visited, :link, :first-child, :first-line, :first-letter :before, :after
  • 5. CSS Basics - Selectors The following selectors are not supported in IE6: Child selectors - E > D Sibling selectors - E + D Attribute selectors - E[attr] ... Multiple class selectors - E.myclass.active Pseudo-classes - :before, :after, :first-child, :focus, :lang :hover pseudo-class only works on <a> elements   You can use this to target IE6 specific CSS:   #myID #container { background-image:url(/transparent.gif); } /* IE6 */ #myID > #container { background-image:url(/transparent.png); }
  • 6. CSS Basics - Conflict Resolution When two CSS selectors target the same element(s), how does the browser know which declaration (CSS block) should be applied? This problem is known as CSS Conflict Resolution and is resolved on three levels: Cascade - selector level Importance - declaration level Specificity - selector level
  • 7. CSS Basics - Conflict Resolution p - 0,0,0,1   p.class - 0,0,1,1   #nav li.active - 0,1,1,1 .ie .menu a:hover - 0,0,3,1 form input[type=submit] - 0,0,0,2 inline styles ID selectors Class selectors Type selectors 1 1 1 1
  • 8. CSS Basics - Conflict Resolution Using the specificity table above we can determine how the browser will choose between two selectors that target the same element(s). Specific selectors will always take precedence over less specific selectors. Specificity works at the selector level .   If two selectors with different specificity contain different CSS properties, there will be no conflict between them.
  • 9. CSS Basics - Conflict Resolution For example:   a:hover{ /* specificity 0,0,0,1 */     color:blue; /* affects link color */ } li a:hover{ /* specificity 0,0,0,2 */     text-decoration:underline; /* affects link decoration */ } #post a:hover{ /* specificity 0,1,0,1 */     color:red; /* affects link color - conflicts with a:hover */ }
  • 10. CSS Basics - Conflict Resolution When two or more CSS selectors have the same specificity and target the same element(s), how will the browser choose which will take precedence? According to the cascade, selectors are evaluated in the order they appear in the document.   Therefore, selectors that appear late in the document will take precedence over selectors that appear early in the document.
  • 11. CSS Basics - Conflict Resolution When a browser evaluates CSS document it does so in the following order: User-agent CSS - lowest precedence Developer CSS - second-lowest precedence User-defined CSS - highest precedence   The rules of the cascade will be applied to the above CSS in ascending order. Like specificity, the cascade works at the selector level. Two overlapping selectors with different CSS properties will not cause a conflict.
  • 12. CSS Basics - Conflict Resolution When two conflicting selectors contain the same CSS property / properties, how does the browser choose which property to apply? CSS properties can be marked as &quot;important&quot; which will mean they should take precedence over identical properties in conflicting selectors. For example: body { color:black !important; } div a { color:blue; }
  • 13. CSS Basics - Conflict Resolution Putting everything together: When two or more selectors target the same element(s) the browser will: Try to resolve conflicting properties using specificity Try to resolve conflicting selectors using the cascade Try to resolve conflicting selectors using importance   Specificity has the lowest precedence and importance has the highest precedence. When resolving conflicts using importance, the rules of the cascade still apply!
  • 14. CSS Basics - The Box Model The box model defines how the browser should handle the rectangular boxes that are generated for elements.   See image below or a 3D diagram  
  • 15. CSS Basics - The Box Model In simple terms we can say that the box model defines the calculation of box dimensions as following: total width = border-right + padding-right + width + padding-left + border-left total height = border-top + padding-top + height + padding-bottom + border-bottom   Why is this important you ask? Simple - So we can calculate element dimensions when planning our layout.
  • 16. CSS Basics - The Box Model A few things to remember: Block-level elements have explicit dimensions Inline-level elements have implicit dimensions Floating an element will cause an element to lose its width, unless set explicitly (as required by CSS specifications) Vertical margins are collapsed by the browser only so the larger of the two will take effect.
  • 17. CSS Basics Feedback and 5min break
  • 18. CSS Best Practices & Tips Reset styles to eliminate browser inconsistencies ( example )   Use meaningful markup Separate content from display Use meaningful class and ID names Use specific selectors for faster parsing Harness the power of the cascade and CSS inheritance to your advantage    
  • 19. CSS Best Practices & Tips Plan your layout carefully during the HTML coding stage Group similar-styled page components together Define typography once at the beginning of your CSS document Use browser-specific CSS handicap to your advantage when trying to handle browser-specific problems #nav li a { ...some css for ie6 } #nav li > a { ...some css for all browsers }
  • 20. CSS Best Practices & Tips Use IE conditional comments to apply global IE selectors:   <!--[if lt IE 7 ]> <body class=&quot; ie &quot; id=&quot; ie6 &quot;> <![endif]--> <!--[if IE 7 ]> <body class=&quot; ie &quot; id=&quot; ie7 &quot;> <![endif]--> <!--[if IE 8 ]> <body class=&quot; ie &quot; id=&quot; ie8 &quot;> <![endif]--> <!--[if !IE]><!--> <body> <!--<![endif]-->
  • 21. Design Deconstruction When approaching a new project, it might be useful to deconstruct the design as follows: Look at content without design - Analyze what's the site's content structure so you can plan your HTML accordingly Analyze the proposed layout and identify common patterns and pitfalls Analyze the design's typographic structure and implement at the beginning of your CSS Identify graphic patterns that should be grouped into a CSS sprite. Use as few sprites as possible. If needed separate pattern sprites from icon sprites.
  • 22. Design Deconstruction Try to identify browser-specific pitfalls in the design and either account for them in your plan or remove from design Try to identify what kind of interaction effects you should implement in the design and opt for CSS-driven effects whenever possible. Implement your UI once! If there are UI inconsistencies, either ignore or educate your designer. Identify resource-hungry decorations and put them on low-graphics diet. Reuse! Reuse! Reuse!   Lets look at Ars Technica , Smashing Mag. and Linux.com
  • 24. Javascript Javascript is a fickle friend!!! Its a bit old, its a bit off-standard, it sort-of has an OOP model, but when you get to know it, its oodles of fun!
  • 25. Javascript - The basics Javascript runs on the client which means that execution speed depends on the rendering engine and the user's computer In other words - The same Javascript code will run differently on two computers.
  • 26. Javascript - The basics If you can't beat them, join them! Minimize DOM complexity Include your Javascript where appropriate in the DOM Load Javascript on-demand if possible Cache your Javascript whenever possible Reduce file size to reduce initial parsing time Reduce network traffic to minimum Simplify your code to optimize execution time Validate your code with JSLint or similar
  • 27. Javascript - The basics Understand Javascript variable-scope. Javascript variables has no private/public name-spaces Variables can be either global or local - beware of collision Declare variables explicitly to denote type and initial value and avoid name collisions Optionally, use Javascript Objects as variable containers   var params = {     name : 'zohar',     age : 34,     height : 187,     skills : ['css', 'js', 'xhtml'] }
  • 28. Javascript - The basics Know thy DOM DOM is the mechanism we use to reference and manipulate our document's HTML.   The DOM is a programmatic, object-oriented way to represent and handle HTML (XML) structure.   In relation to text manipulation, DOM and XML parsing are very slow.   Each rendering engine implements the DOM a bit differently.
  • 29. Javascript - The basics Know thy DOM DOM calls are expensive. Use the when appropriate Be specific in your DOM calls. Use getElementById when possible Cache DOM calls Although considered &quot;less&quot; elegant, innerHTML is much faster than document .appendChild()
  • 30. Javascript - The basics Understand the meaning of &quot;this&quot; &quot;this&quot; refers to the scope of code execution at any given point in the code, during execution time (not parse time). The easiest way to remember what is &quot;this&quot; is as follows: &quot;this&quot; will always refer to the object before the &quot;.&quot; sign in the calling code.
  • 31. Javascript - The basics function test(){     var _this = this ; //this points to the window object } myObj = {     run : function (){          console.log( this .name); // this points to myObj     } ,     name : 'zohar' } myObj.run(); myElement. onclick = function (){     this .className = 'active'; // this points to myElement }
  • 32. Javascript - Programming Tips Javascript short-hand is cool. Use it! //one-line variable assignment var i = 0, arr = [], el = document .getElementById(' id ');   // default value assignment //arg1 is passed to the function var status = arg1 || ' active ';  //variable assignment in if statement var el; if ( el = document .getElementById(' id ') ){ ..... }
  • 33. Javascript - Programming Tips // selective method execution myObj = {     func1 : function () {},     func1 : function () {} } function test( status ){     myObj[ status == 'active' ? ' func1 ' : ' func2 '](); }
  • 34. Javascript - Programming Tips Use JSON for both parameters and code clusters to make your code more ordered and readable. var tabManager = {     init : function (){ ... }      onTabChange : function () { ... }     params : {         active : 'active',         inactive : 'inactive'         tabsParentID : 'tabs'     } }
  • 35. Javascript - Programming Tips Try thinking OOP in Javascript:   var Class = function (obj){     return function (){         if( typeof obj.initialize === 'function' ){             obj.initialize. apply (obj,arguments);         }         return obj;     } } Function . prototype .bind = function (tgt){     var self = this ;     return function (){         self. apply (tgt, arguments);     }(); }
  • 36. Javascript - Programming Tips Try thinking OOP in Javascript:   var Test = new Class({      initialize : function (){         console.log('starting', arguments , this );          this .run.bind( this );         bindTest.bind( this );     },      run :function(){         console.log( this ,'running');     } }); function bindTest(){     console.log( this ,'bindTest'); } var t = new Test(true,10);
  翻译: