SlideShare a Scribd company logo
CSS Methodology by Zohar Arad
What is CSS? ,[object Object],[object Object],[object Object]
CSS Basics - Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - Conflict Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - The Box Model ,[object Object],[object Object],[object Object],[object Object]
CSS Basics - The Box Model ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics - The Box Model ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Basics  ,[object Object]
CSS Best Practices & Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Best Practices & Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Best Practices & Tips ,[object Object],[object Object],[object Object]
Design Deconstruction ,[object Object],[object Object],[object Object],[object Object],[object Object]
Design Deconstruction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Break... ,[object Object]
Javascript ,[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object]
Javascript - The basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object]
Javascript - Programming Tips ,[object Object],[object Object],[object Object]
Javascript  ,[object Object]

More Related Content

What's hot

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
 
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 & web prog. p4,5
Internet tech & web prog.  p4,5Internet tech & web prog.  p4,5
Internet tech & web prog. p4,5
Taymoor Nazmy
 
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
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
 

What's hot (19)

Basic css
Basic cssBasic css
Basic css
 
Dominate The Theme Layer
Dominate The Theme LayerDominate The Theme Layer
Dominate The Theme Layer
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
 
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
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!
 
Internet tech & web prog. p4,5
Internet tech & web prog.  p4,5Internet tech & web prog.  p4,5
Internet tech & web prog. p4,5
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
CSS3 Introduction
CSS3 IntroductionCSS3 Introduction
CSS3 Introduction
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Css3
Css3Css3
Css3
 
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
 
Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Css
CssCss
Css
 

Viewers also liked

Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end appsZohar 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
 

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
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
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...
 
Rolling Your Own CSS Methodology
Rolling Your Own CSS MethodologyRolling Your Own CSS Methodology
Rolling Your Own CSS Methodology
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
 

Similar to CSS Methodology

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
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
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
 
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 4Erin 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 & css4 essentials
Css training tutorial css3 & css4 essentialsCss training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentials
QA TrainingHub
 
Webpage style with CSS
Webpage style with CSSWebpage style with CSS
Webpage style with CSS
Hemant Patidar
 
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 layoutCK Yang
 

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
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
 
Css and its future
Css and its futureCss and its future
Css and its future
 
Css
CssCss
Css
 
Css
CssCss
Css
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
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
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
 
Css training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentialsCss training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentials
 
Webpage style with CSS
Webpage style with CSSWebpage style with CSS
Webpage style with CSS
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
 
CSS 101
CSS 101CSS 101
CSS 101
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
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
 

Recently uploaded

How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 

Recently uploaded (20)

How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 

CSS Methodology

  • 1. CSS Methodology by Zohar Arad
  • 2.
  • 3.
  • 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="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
  • 5.
  • 6.
  • 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.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.