SlideShare a Scribd company logo
Cascading Style Sheets (CSS) – Part I Svetlin Nakov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http:// www.nakov.com
Table of Contents (Part I) ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS: A New Philosophy ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Bold Italics Indent Content  (HTML document) Presentation (CSS Document)
The Resulting Page ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Intro Styling with Cascading Stylesheets
CSS Introduction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Introduction (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Why “Cascading”? ,[object Object],[object Object],[object Object],[object Object],[object Object]
Why “Cascading”? (2)
Why “Cascading”? (3) ,[object Object],[object Object],[object Object],[object Object]
Style Sheets Syntax ,[object Object],[object Object],[object Object],[object Object],h1,h2,h3 { color: green; font-weight: bold; } http://css.maxdesign.com.au/
Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],.header a { color: green } #menu>li { padding-top: 8px }
Selectors (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],h1 { font-family: verdana,sans-serif; } #element_id { color: #ff0000; } .myClass {border: 1px solid red} h1, .link, #top-link {font-weight: bold}
Selectors (3) ,[object Object],[object Object],[object Object],[object Object],a:hover { color: red; } p:first-line { text-transform: uppercase; } .title:before { content: "»"; } .title:after { content: "«"; }
Selectors (4) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],p a {text-decoration: underline} p * {color: black} img + .link {float:right}
Selectors (5) ,[object Object],[object Object],[object Object],[object Object],[object Object],p > .error {font-size: 8px} img[alt~=logo] {border: none}
Values in the CSS Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Default Browser Styles ,[object Object],[object Object],[object Object],[object Object],* { margin: 0; padding: 0; } body, h1, p, ul, li { margin: 0; padding: 0; }
Linking HTML and CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Linking HTML and CSS (2) ,[object Object],[object Object],[object Object]
Inline Styles: Example <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Inline Styles</title> </head> <body> <p>Here is some text</p> <!--Separate multiple styles with a semicolon--> <p style=&quot;font-size: 20pt&quot;>Here is some more text</p> <p style=&quot;font-size: 20pt;color: #0000FF&quot; >Even more text</p>  </body> </html> inline-styles.html
Inline Styles: Example <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Inline Styles</title> </head> <body> <p>Here is some text</p> <!--Separate multiple styles with a semicolon--> <p style=&quot;font-size: 20pt&quot;>Here is some more text</p> <p style=&quot;font-size: 20pt;color: #0000FF&quot; >Even more text</p>  </body> </html> inline-styles.html
CSS Cascade (Precedence) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],a { color: red !important ; } http://www.slideshare.net/maxdesign/css-cascade-1658158
CSS Specificity ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Rules Precedence  ,[object Object],precedence.html
Embedded Styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<style type=&quot;text/css&quot;>
Embedded Styles: Example <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Style Sheets</title> <style type=&quot;text/css&quot;> em {background-color:#8000FF; color:white} h1 {font-family:Arial, sans-serif} p  {font-size:18pt} .blue {color:blue} </style> <head> embedded-stylesheets.html
Embedded Styles: Example (2) … <body> <h1 class=&quot;blue&quot;>A Heading</h1> <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.</p>  <h1>Another Heading</h1>  <p class=&quot;blue&quot;>Here is some more text. Here is some more text.</p> <p class=&quot;blue&quot;>Here is some <em>more</em> text. Here is some more text.</p>  </body> </html>
Embedded Styles: Example (3) … <body> <h1 class=&quot;blue&quot;>A Heading</h1> <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.</p>  <h1>Another Heading</h1>  <p class=&quot;blue&quot;>Here is some more text. Here is some more text.</p> <p class=&quot;blue&quot;>Here is some <em>more</em> text. Here is some more text.</p>  </body> </html>
External CSS Styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot;>
External CSS Styles (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],<style type=&quot;text/css&quot;> @import url(&quot;styles.css&quot;);   /* same as */ @import &quot;styles.css&quot;; </style>
External Styles: Example /* CSS Document */ a    { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #CCFFCC } li em  { color: red;  font-weight: bold } ul   { margin-left: 2cm } ul ul   { text-decoration: underline;  margin-left: .5cm } styles.css
External Styles: Example (2) <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0  Transitional//EN&quot;  &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Importing style sheets</title> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;  /> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <li>Milk</li> … external-styles.html
External Styles: Example (3) … <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <a href=&quot;http://food.com&quot; title=&quot;grocery store&quot;>Go to the Grocery store</a> </body> </html>
External Styles: Example (4) … <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <a href=&quot;http://food.com&quot; title=&quot;grocery store&quot;>Go to the Grocery store</a> </body> </html>
Text-related CSS Properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Rules for Fonts (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Shorthand Font Property ,[object Object],[object Object],[object Object],font:italic normal bold 12px/16px verdana font-style: italic; font-variant: normal; font-weight: bold; font-size: 12px; line-height: 16px; font-family: verdana;
Fonts ,[object Object],font-rules.html
Backgrounds ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],background-image:url(&quot;back.gif&quot;);
Backgrounds (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],background-position: top left; ,[object Object]
Background Shorthand Property ,[object Object],[object Object],[object Object],background: #FFF0C0 url(&quot;back.gif&quot;) no-repeat fixed top; background-color: #FFF0C0; background-image: url(&quot;back.gif&quot;); background-repeat: no-repeat; background-attachment: fixed; background-position: top;
Background-image or  <img> ? ,[object Object],[object Object],[object Object],[object Object]
Background Styles ,[object Object],background-rules.html
Borders ,[object Object],[object Object],[object Object],[object Object],[object Object]
Border Shorthand Property ,[object Object],[object Object],[object Object],[object Object],border: 1px solid red border-width:1px; border-color:red; border-style:solid;
Borders ,[object Object],border-rules.html
CSS Reference ,[object Object]
CSS – Part I ,[object Object],http://frontendcourse.telerik.com
Exercises ,[object Object]
Exercises (2) ,[object Object]
Exercises (3) ,[object Object],[object Object]

More Related Content

What's hot

CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Propertieshstryk
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Hatem Mahmoud
 
Responsive web design with html5 and css3
Responsive web design with html5 and css3Responsive web design with html5 and css3
Responsive web design with html5 and css3
Divya Tiwari
 
Cascading style sheets - CSS
Cascading style sheets - CSSCascading style sheets - CSS
Cascading style sheets - CSS
iFour Institute - Sustainable Learning
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
EPAM Systems
 
Css
CssCss
Css.html
Css.htmlCss.html
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 Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
CSS 101
CSS 101CSS 101
CSS 101
dunclair
 
FFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSSFFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSS
Toni Kolev
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSSLarry King
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
Reshmi Rajan
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
Michael Jhon
 

What's hot (20)

CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
 
CSS
CSSCSS
CSS
 
Responsive web design with html5 and css3
Responsive web design with html5 and css3Responsive web design with html5 and css3
Responsive web design with html5 and css3
 
Cascading style sheets - CSS
Cascading style sheets - CSSCascading style sheets - CSS
Cascading style sheets - CSS
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
 
Css
CssCss
Css
 
Css.html
Css.htmlCss.html
Css.html
 
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
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Css
CssCss
Css
 
CSS 101
CSS 101CSS 101
CSS 101
 
FFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSSFFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSS
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Css ppt
Css pptCss ppt
Css ppt
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 

Similar to CSS Part I

CSS.pptx
CSS.pptxCSS.pptx
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style SheetsMarc Steel
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
Tushar Rajput
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssTesfaye Yenealem
 
Css introduction
Css introductionCss introduction
Css introductionSridhar P
 
Web technology Unit-II Part-C
Web technology Unit-II Part-CWeb technology Unit-II Part-C
Web technology Unit-II Part-C
SSN College of Engineering, Kalavakkam
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Css basics
Css basicsCss basics
Css basics
mirza asif haider
 
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
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Erin M. Kidwell
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
GmachImen
 
CSS
CSSCSS
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
Hatem Mahmoud
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 

Similar to CSS Part I (20)

CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
CSS
CSSCSS
CSS
 
Week3 css
Week3 cssWeek3 css
Week3 css
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Cascstylesheets
CascstylesheetsCascstylesheets
Cascstylesheets
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
Css introduction
Css introductionCss introduction
Css introduction
 
Web technology Unit-II Part-C
Web technology Unit-II Part-CWeb technology Unit-II Part-C
Web technology Unit-II Part-C
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Css basics
Css basicsCss basics
Css basics
 
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
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
Css
CssCss
Css
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
 
CSS
CSSCSS
CSS
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 

More from Doncho Minkov

HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and FormsDoncho Minkov
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPFDoncho Minkov
 
WPF Layout Containers
WPF Layout ContainersWPF Layout Containers
WPF Layout ContainersDoncho Minkov
 
WPF Templating and Styling
WPF Templating and StylingWPF Templating and Styling
WPF Templating and StylingDoncho Minkov
 
WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and AnimationsDoncho Minkov
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data BindingDoncho Minkov
 
Model View ViewModel
Model View ViewModelModel View ViewModel
Model View ViewModelDoncho Minkov
 
Introduction to Cross-platform Mobile Development Course
Introduction to Cross-platform Mobile Development CourseIntroduction to Cross-platform Mobile Development Course
Introduction to Cross-platform Mobile Development CourseDoncho Minkov
 

More from Doncho Minkov (20)

Web Design Concepts
Web Design ConceptsWeb Design Concepts
Web Design Concepts
 
Web design Tools
Web design ToolsWeb design Tools
Web design Tools
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
CSS Presentation
CSS PresentationCSS Presentation
CSS Presentation
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
 
CSS 3
CSS 3CSS 3
CSS 3
 
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
 
Slice and Dice
Slice and DiceSlice and Dice
Slice and Dice
 
Introduction to XAML and WPF
Introduction to XAML and WPFIntroduction to XAML and WPF
Introduction to XAML and WPF
 
WPF Layout Containers
WPF Layout ContainersWPF Layout Containers
WPF Layout Containers
 
WPF Controls
WPF ControlsWPF Controls
WPF Controls
 
WPF Templating and Styling
WPF Templating and StylingWPF Templating and Styling
WPF Templating and Styling
 
WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and Animations
 
Simple Data Binding
Simple Data BindingSimple Data Binding
Simple Data Binding
 
Complex Data Binding
Complex Data BindingComplex Data Binding
Complex Data Binding
 
WPF Concepts
WPF ConceptsWPF Concepts
WPF Concepts
 
Model View ViewModel
Model View ViewModelModel View ViewModel
Model View ViewModel
 
WPF and Databases
WPF and DatabasesWPF and Databases
WPF and Databases
 
Introduction to Cross-platform Mobile Development Course
Introduction to Cross-platform Mobile Development CourseIntroduction to Cross-platform Mobile Development Course
Introduction to Cross-platform Mobile Development Course
 

Recently uploaded

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
 
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
 
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
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
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
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
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
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
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
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
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
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
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
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
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
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 

Recently uploaded (20)

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
 
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...
 
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 !
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
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 -...
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
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...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
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
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
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...
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
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...
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
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
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 

CSS Part I

  • 1. Cascading Style Sheets (CSS) – Part I Svetlin Nakov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http:// www.nakov.com
  • 2.
  • 3.
  • 4.
  • 5. CSS Intro Styling with Cascading Stylesheets
  • 6.
  • 7.
  • 8.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21. Inline Styles: Example <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Inline Styles</title> </head> <body> <p>Here is some text</p> <!--Separate multiple styles with a semicolon--> <p style=&quot;font-size: 20pt&quot;>Here is some more text</p> <p style=&quot;font-size: 20pt;color: #0000FF&quot; >Even more text</p> </body> </html> inline-styles.html
  • 22. Inline Styles: Example <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Inline Styles</title> </head> <body> <p>Here is some text</p> <!--Separate multiple styles with a semicolon--> <p style=&quot;font-size: 20pt&quot;>Here is some more text</p> <p style=&quot;font-size: 20pt;color: #0000FF&quot; >Even more text</p> </body> </html> inline-styles.html
  • 23.
  • 24.
  • 25.
  • 26.
  • 27. Embedded Styles: Example <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Style Sheets</title> <style type=&quot;text/css&quot;> em {background-color:#8000FF; color:white} h1 {font-family:Arial, sans-serif} p {font-size:18pt} .blue {color:blue} </style> <head> embedded-stylesheets.html
  • 28. Embedded Styles: Example (2) … <body> <h1 class=&quot;blue&quot;>A Heading</h1> <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.</p> <h1>Another Heading</h1> <p class=&quot;blue&quot;>Here is some more text. Here is some more text.</p> <p class=&quot;blue&quot;>Here is some <em>more</em> text. Here is some more text.</p> </body> </html>
  • 29. Embedded Styles: Example (3) … <body> <h1 class=&quot;blue&quot;>A Heading</h1> <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.</p> <h1>Another Heading</h1> <p class=&quot;blue&quot;>Here is some more text. Here is some more text.</p> <p class=&quot;blue&quot;>Here is some <em>more</em> text. Here is some more text.</p> </body> </html>
  • 30.
  • 31.
  • 32. External Styles: Example /* CSS Document */ a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #CCFFCC } li em { color: red; font-weight: bold } ul { margin-left: 2cm } ul ul { text-decoration: underline; margin-left: .5cm } styles.css
  • 33. External Styles: Example (2) <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <title>Importing style sheets</title> <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; /> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <li>Milk</li> … external-styles.html
  • 34. External Styles: Example (3) … <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <a href=&quot;http://food.com&quot; title=&quot;grocery store&quot;>Go to the Grocery store</a> </body> </html>
  • 35. External Styles: Example (4) … <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <a href=&quot;http://food.com&quot; title=&quot;grocery store&quot;>Go to the Grocery store</a> </body> </html>
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.

Editor's Notes

  1. * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##