SlideShare a Scribd company logo
Introduction to Web 
Technologies 
Lecture 3 
Julie Iskander, 
MSc. Communication and Electronics
Visual 
Formatting and 
Layout
CSS layout and formatting 
 After parsing the html into a document tree (DOM) 
 Each node is rendered as one or more rectangular boxes 
 Types of Boxes: 
 Block Boxes : 
 for block elements ex. div, p 
 Elements with display : block| list-item| table; 
 Inline Boxes: for inline elements 
 For inline elements ex.span, b, em 
 Elements with display : inline | inline-table | inline-block;
BOX Model 
 Applies to block-level elements
BOX Model 
 Applies to block-level elements 
 Overall calculated dimension of element = 
 Height/width + margin + padding + border 
.box 
{ 
width:300px; 
height:200px; 
padding:10px; 
margin:15px; 
border: 1px solid #000; 
}
DEMO 
How to center a block?
HTML and CSS part 3
HTML and CSS part 3
Positioning 
 Positioning Schemes: 
 Normal Flow (includes relative positioning) 
 Floating 
 Absolute Position (includes fixed positioning) 
 http://www.barelyfitz.com/screencast/html-training/ 
css/positioning/
position : static 
 Default 
 Elements rendered in order of normal flow
position : relative 
 At start works just like static positioning 
 To shift box, use : 
 top: px, %, auto,inherit; 
 bottom: px, %, auto,inherit; 
 left: px, %, auto,inherit; 
 right: px, %, auto,inherit; 
 W.R.T the flow, the element in its original position. When 
shifted a hole is left in it’s place
position : absolute 
 Element is completely removed from document flow. 
 No effect on next elements, 
 Can overlap other contents 
 Positioned w.r.t. the next parent element with relative (or 
absolute) positioning. 
 If no such parent, 
 it will be placed relatively to the page itself. 
 To determine position, use : 
 top, bottom, left and right (must take values, or they take the original values of 
their place in the document flow) 
 width and height
position : fixed 
 Similar to absolute positioning. 
 Positioned relative to viewport 
 Won’t move with scrolling, always fixed. 
 Not supported by IE 6 or earlier. 
 To determine position, use : 
 top, bottom, left and right 
 width and height
Floating 
 float: none | left | right 
 Floated elements is shifted to one side and all the others 
will flow along the opposite side 
 Taken out of the normal flow 
 For a containing block to accommodate a floating child, 
must be floating or overflow property not visible 
 Can’t float up or down.
Clearing 
 clear : both | left | right; 
 To force an element to start below any floated 
element 
 Mainly used to make footer below all floated column
Note 
 If position : absolute or floated and width:auto 
 Generated box shrink to dimension of content 
 Recommended to set width 
 if a block contains only floated and absolutely 
positioned elements  then it has no content, zero 
dimension 
 If width:100% don’t use margins, paddings or 
borders to avoid overflowing or pushing elements 
wider than available. 
 Recommended use width : auto and apply margin, 
padding and border only
DEMO 
How to create a menu?
HTML and CSS part 3
HTML and CSS part 3
z-index: number 
 Is the positioning along the z-index 
 Larger z-index elements is rendered in front of lower 
z-index elements 
 Can take –ve values
At-rules 
 Are instructions to the CSS parser. 
 Example: 
 @import: 
 For importing a css into another. 
 @media: 
 Specifies one or more rules to be applied on a certain 
media type
Before we continue, what 
is media types ?!! 
 Examples of Media Types: 
 All: Suitable for all devices. 
 Braille: Intended for braille tactile feedback devices. 
 Embossed: Intended for paged braille printers. 
 Handheld: Intended for handheld devices (typically small 
screen, limited bandwidth). 
 Print: Intended for paged material and for documents viewed 
on screen in print preview mode. Please consult the section on 
paged media for information about formatting issues that are 
specific to paged media. 
 Screen: Intended primarily for color computer screens.
@import 
 Fully supported by FF, Safari, Opera, Chrome, IE 9+ 
 Format : 
@import {URI | string} [media type,…….]; 
 To import one css into another. 
 Example: 
@import url(/css/screen.css) screen 
@import “mobile.css” handheld 
 Must precede all rule sets, if it follows one/more rule 
sets it is ignored.
@media 
 Fully supported by Opera 9.2+, Safary 3+, chrome 
2+ 
 Buggy support by IE 6+, FF1+ 
 Format: 
@media media type,……{ 
ruleset 
} 
 To specify rules to be applied to specific media only
media query 
 CSS 3 extension to media types, limited support 
 A logical expression, evaluated to true/false, to test whether 
device features to determine whether to apply the css or no. 
 Used in <link> tag, @import, @media at-rules. 
 CSS is only applied if evaluated to true. 
 Examples: 
<link rel=“stylesheet” type=“text/css” href=“/style.css” media=“all and (color)” 
 all output media that are capable of color. 
@media handheld and (min-width:20em){…….} 
 Handheld devices with width at least 20em 
 http://reference.sitepoint.com/css/mediaqueries
Example
Example
References 
 http://reference.sitepoint.com/css 
 http://www.w3.org/TR/CSS21/ 
 http://www.w3.org/TR/CSS2/ 
 http://www.w3.org/TR/2011/NOTE-css-2010- 
20110512/ 
 https://developer.mozilla.org/en-US/docs/CSS 
 http://www.daaq.net/old/css/index.php?page=using+ 
css

More Related Content

Viewers also liked (10)

Karneval (www.rbs-ifie.at)
Karneval (www.rbs-ifie.at)Karneval (www.rbs-ifie.at)
Karneval (www.rbs-ifie.at)
Prince Kas
 
Economics chapter2
Economics chapter2Economics chapter2
Economics chapter2
t-MBA Digital
 
Unser tannenwald adventskalender
Unser tannenwald adventskalenderUnser tannenwald adventskalender
Unser tannenwald adventskalender
Kiki Likidu
 
FRC Learning
FRC LearningFRC Learning
FRC Learning
James Mbarathi
 
ASCEND Creation Time station
ASCEND Creation Time stationASCEND Creation Time station
ASCEND Creation Time station
Next Generation Learning Challenges
 
семінар захід
семінар західсемінар захід
семінар захід
Юля Лещишина
 
Chapter 2 marketing
Chapter 2 marketingChapter 2 marketing
Chapter 2 marketing
t-MBA Digital
 
Navajos
NavajosNavajos
Navajos
Pamela Scott
 
Erasmus+ κα1
Erasmus+ κα1Erasmus+ κα1
Erasmus+ κα1
Kelly Katsirou
 
Navajo Code Talker powerpoint presentation by NNWO Executive Director Clara L...
Navajo Code Talker powerpoint presentation by NNWO Executive Director Clara L...Navajo Code Talker powerpoint presentation by NNWO Executive Director Clara L...
Navajo Code Talker powerpoint presentation by NNWO Executive Director Clara L...
Navajo Nation Washington Office
 

Similar to HTML and CSS part 3 (20)

Castro Chapter 11
Castro Chapter 11Castro Chapter 11
Castro Chapter 11
Jeff Byrnes
 
Advanced CSS.pptx
Advanced CSS.pptxAdvanced CSS.pptx
Advanced CSS.pptx
DiyonaVas
 
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
 
Css training
Css trainingCss training
Css training
Leigh Aucoin
 
Page layout with css
Page layout with cssPage layout with css
Page layout with css
Er. Nawaraj Bhandari
 
Web Technology
Web TechnologyWeb Technology
Web Technology
Kirti H Mandal
 
Css 101
Css 101Css 101
Css 101
Rhyan Mahazudin
 
Lecture-8.pptx
Lecture-8.pptxLecture-8.pptx
Lecture-8.pptx
vishal choudhary
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
Denise Jacobs
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
erikkross
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
Zoe Gillenwater
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
Ashraf Hamdy
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
Css
CssCss
Css
BalaKrishna Kolliboina
 
Introduction to Frontend Development - Session 2 - CSS Fundamentals
Introduction to Frontend Development - Session 2 - CSS FundamentalsIntroduction to Frontend Development - Session 2 - CSS Fundamentals
Introduction to Frontend Development - Session 2 - CSS Fundamentals
Kalin Chernev
 
CSS3 Refresher
CSS3 RefresherCSS3 Refresher
CSS3 Refresher
Ivano Malavolta
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
Russ Weakley
 
css.pdf
css.pdfcss.pdf
css.pdf
AbdulRafayawan
 
Castro Chapter 11
Castro Chapter 11Castro Chapter 11
Castro Chapter 11
Jeff Byrnes
 
Advanced CSS.pptx
Advanced CSS.pptxAdvanced CSS.pptx
Advanced CSS.pptx
DiyonaVas
 
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
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
Denise Jacobs
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
erikkross
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
Ashraf Hamdy
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
Introduction to Frontend Development - Session 2 - CSS Fundamentals
Introduction to Frontend Development - Session 2 - CSS FundamentalsIntroduction to Frontend Development - Session 2 - CSS Fundamentals
Introduction to Frontend Development - Session 2 - CSS Fundamentals
Kalin Chernev
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
Russ Weakley
 
Ad

More from Julie Iskander (20)

HTML 5
HTML 5HTML 5
HTML 5
Julie Iskander
 
Data structures and algorithms
Data structures and algorithmsData structures and algorithms
Data structures and algorithms
Julie Iskander
 
C for Engineers
C for EngineersC for Engineers
C for Engineers
Julie Iskander
 
Design Pattern lecture 3
Design Pattern lecture 3Design Pattern lecture 3
Design Pattern lecture 3
Julie Iskander
 
Scriptaculous
ScriptaculousScriptaculous
Scriptaculous
Julie Iskander
 
Prototype Framework
Prototype FrameworkPrototype Framework
Prototype Framework
Julie Iskander
 
Design Pattern lecture 4
Design Pattern lecture 4Design Pattern lecture 4
Design Pattern lecture 4
Julie Iskander
 
Design Pattern lecture 2
Design Pattern lecture 2Design Pattern lecture 2
Design Pattern lecture 2
Julie Iskander
 
Design Pattern lecture 1
Design Pattern lecture 1Design Pattern lecture 1
Design Pattern lecture 1
Julie Iskander
 
Ajax and ASP.NET AJAX
Ajax and ASP.NET AJAXAjax and ASP.NET AJAX
Ajax and ASP.NET AJAX
Julie Iskander
 
jQuery
jQueryjQuery
jQuery
Julie Iskander
 
ASP.NET Lecture 5
ASP.NET Lecture 5ASP.NET Lecture 5
ASP.NET Lecture 5
Julie Iskander
 
ASP.NET lecture 8
ASP.NET lecture 8ASP.NET lecture 8
ASP.NET lecture 8
Julie Iskander
 
ASP.NET Lecture 7
ASP.NET Lecture 7ASP.NET Lecture 7
ASP.NET Lecture 7
Julie Iskander
 
ASP.NET Lecture 6
ASP.NET Lecture 6ASP.NET Lecture 6
ASP.NET Lecture 6
Julie Iskander
 
ASP.NET Lecture 4
ASP.NET Lecture 4ASP.NET Lecture 4
ASP.NET Lecture 4
Julie Iskander
 
ASP.NET Lecture 3
ASP.NET Lecture 3ASP.NET Lecture 3
ASP.NET Lecture 3
Julie Iskander
 
ASP.NET Lecture 2
ASP.NET Lecture 2ASP.NET Lecture 2
ASP.NET Lecture 2
Julie Iskander
 
ASP.NET Lecture 1
ASP.NET Lecture 1ASP.NET Lecture 1
ASP.NET Lecture 1
Julie Iskander
 
AJAX and JSON
AJAX and JSONAJAX and JSON
AJAX and JSON
Julie Iskander
 
Ad

Recently uploaded (20)

Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Compliance-as-a-Service document pdf text
Compliance-as-a-Service document pdf textCompliance-as-a-Service document pdf text
Compliance-as-a-Service document pdf text
Earthling security
 
Create Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent BuilderCreate Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent Builder
DianaGray10
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
IntroSlides-May-BuildWithAi-EarthEngine.pdf
IntroSlides-May-BuildWithAi-EarthEngine.pdfIntroSlides-May-BuildWithAi-EarthEngine.pdf
IntroSlides-May-BuildWithAi-EarthEngine.pdf
Luiz Carneiro
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Compliance-as-a-Service document pdf text
Compliance-as-a-Service document pdf textCompliance-as-a-Service document pdf text
Compliance-as-a-Service document pdf text
Earthling security
 
Create Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent BuilderCreate Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent Builder
DianaGray10
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
IntroSlides-May-BuildWithAi-EarthEngine.pdf
IntroSlides-May-BuildWithAi-EarthEngine.pdfIntroSlides-May-BuildWithAi-EarthEngine.pdf
IntroSlides-May-BuildWithAi-EarthEngine.pdf
Luiz Carneiro
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 

HTML and CSS part 3

  • 1. Introduction to Web Technologies Lecture 3 Julie Iskander, MSc. Communication and Electronics
  • 3. CSS layout and formatting  After parsing the html into a document tree (DOM)  Each node is rendered as one or more rectangular boxes  Types of Boxes:  Block Boxes :  for block elements ex. div, p  Elements with display : block| list-item| table;  Inline Boxes: for inline elements  For inline elements ex.span, b, em  Elements with display : inline | inline-table | inline-block;
  • 4. BOX Model  Applies to block-level elements
  • 5. BOX Model  Applies to block-level elements  Overall calculated dimension of element =  Height/width + margin + padding + border .box { width:300px; height:200px; padding:10px; margin:15px; border: 1px solid #000; }
  • 6. DEMO How to center a block?
  • 9. Positioning  Positioning Schemes:  Normal Flow (includes relative positioning)  Floating  Absolute Position (includes fixed positioning)  http://www.barelyfitz.com/screencast/html-training/ css/positioning/
  • 10. position : static  Default  Elements rendered in order of normal flow
  • 11. position : relative  At start works just like static positioning  To shift box, use :  top: px, %, auto,inherit;  bottom: px, %, auto,inherit;  left: px, %, auto,inherit;  right: px, %, auto,inherit;  W.R.T the flow, the element in its original position. When shifted a hole is left in it’s place
  • 12. position : absolute  Element is completely removed from document flow.  No effect on next elements,  Can overlap other contents  Positioned w.r.t. the next parent element with relative (or absolute) positioning.  If no such parent,  it will be placed relatively to the page itself.  To determine position, use :  top, bottom, left and right (must take values, or they take the original values of their place in the document flow)  width and height
  • 13. position : fixed  Similar to absolute positioning.  Positioned relative to viewport  Won’t move with scrolling, always fixed.  Not supported by IE 6 or earlier.  To determine position, use :  top, bottom, left and right  width and height
  • 14. Floating  float: none | left | right  Floated elements is shifted to one side and all the others will flow along the opposite side  Taken out of the normal flow  For a containing block to accommodate a floating child, must be floating or overflow property not visible  Can’t float up or down.
  • 15. Clearing  clear : both | left | right;  To force an element to start below any floated element  Mainly used to make footer below all floated column
  • 16. Note  If position : absolute or floated and width:auto  Generated box shrink to dimension of content  Recommended to set width  if a block contains only floated and absolutely positioned elements  then it has no content, zero dimension  If width:100% don’t use margins, paddings or borders to avoid overflowing or pushing elements wider than available.  Recommended use width : auto and apply margin, padding and border only
  • 17. DEMO How to create a menu?
  • 20. z-index: number  Is the positioning along the z-index  Larger z-index elements is rendered in front of lower z-index elements  Can take –ve values
  • 21. At-rules  Are instructions to the CSS parser.  Example:  @import:  For importing a css into another.  @media:  Specifies one or more rules to be applied on a certain media type
  • 22. Before we continue, what is media types ?!!  Examples of Media Types:  All: Suitable for all devices.  Braille: Intended for braille tactile feedback devices.  Embossed: Intended for paged braille printers.  Handheld: Intended for handheld devices (typically small screen, limited bandwidth).  Print: Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.  Screen: Intended primarily for color computer screens.
  • 23. @import  Fully supported by FF, Safari, Opera, Chrome, IE 9+  Format : @import {URI | string} [media type,…….];  To import one css into another.  Example: @import url(/css/screen.css) screen @import “mobile.css” handheld  Must precede all rule sets, if it follows one/more rule sets it is ignored.
  • 24. @media  Fully supported by Opera 9.2+, Safary 3+, chrome 2+  Buggy support by IE 6+, FF1+  Format: @media media type,……{ ruleset }  To specify rules to be applied to specific media only
  • 25. media query  CSS 3 extension to media types, limited support  A logical expression, evaluated to true/false, to test whether device features to determine whether to apply the css or no.  Used in <link> tag, @import, @media at-rules.  CSS is only applied if evaluated to true.  Examples: <link rel=“stylesheet” type=“text/css” href=“/style.css” media=“all and (color)”  all output media that are capable of color. @media handheld and (min-width:20em){…….}  Handheld devices with width at least 20em  http://reference.sitepoint.com/css/mediaqueries
  • 28. References  http://reference.sitepoint.com/css  http://www.w3.org/TR/CSS21/  http://www.w3.org/TR/CSS2/  http://www.w3.org/TR/2011/NOTE-css-2010- 20110512/  https://developer.mozilla.org/en-US/docs/CSS  http://www.daaq.net/old/css/index.php?page=using+ css

Editor's Notes

  • #3: Demo for difference between div and span
  • #4: Display: none  the element doesn’t appear not even in the structure Visibility : hidden  creates an invisible box
  • #5: IE 5 box model (padding and border shrinks content area) Total width= width + margins ONLY
  • #6: Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px width | height: length | percentage wrt. Containing block dimension | none | auto  no –ve is allowed
  • #12: If left and right specified ltr, left used  rtl, right used If top and bottom specified top used
  • #13: If left and right specified ltr, left used  rtl, right used If top and bottom specified top used
  • #14: If left and right specified ltr, left used  rtl, right used If top and bottom specified top used
  • #15: overflow : visible | hidden | scroll | auto | inherit
  • #18: create a menu
  • #22: Others @charset: To specify character encoding of external css @page: to specify margins for page box in paged media @font-face : to define custom font properties @namespace: for XML namespaces in CSS3
  • #24: body { background-color: #fff; color: #000; } /* The following rule will be ignored */ @import url("other.css");
  • #25: CSS 2
  • #26: @import url(/style.css) screen and (min-width:800px) and (max-width:1280px);  screen-based device with width between 800 and 1280 px More in http://reference.sitepoint.com/css/mediaqueries