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
Ad

Recommended

Chapter 15: Floating and Positioning
Chapter 15: Floating and Positioning
Steve Guinan
 
Css layouts-continued
Css layouts-continued
huia
 
Week5 ap forms
Week5 ap forms
Rowena LI
 
Web Development - Lecture 6
Web Development - Lecture 6
Syed Shahzaib Sohail
 
CSS Fundamentals
CSS Fundamentals
Ray Villalobos
 
CSS For Backend Developers
CSS For Backend Developers
10Clouds
 
Web design as creative work
Web design as creative work
Latincouver - Latin American Professional Network in BC #LAPN @ExpoPlazaLatina @carnavaldelsol
 
Minnie Maisie Salanga & Uwe Berger: NGO – Bridge Builder about the Pitfalls i...
Minnie Maisie Salanga & Uwe Berger: NGO – Bridge Builder about the Pitfalls i...
Fachstelle GLiS - Globales Lernen in der Schule
 
Karneval (www.rbs-ifie.at)
Karneval (www.rbs-ifie.at)
Prince Kas
 
Economics chapter2
Economics chapter2
t-MBA Digital
 
Unser tannenwald adventskalender
Unser tannenwald adventskalender
Kiki Likidu
 
FRC Learning
FRC Learning
James Mbarathi
 
ASCEND Creation Time station
ASCEND Creation Time station
Next Generation Learning Challenges
 
семінар захід
семінар захід
Юля Лещишина
 
Chapter 2 marketing
Chapter 2 marketing
t-MBA Digital
 
Navajos
Navajos
Pamela Scott
 
Erasmus+ κα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 Nation Washington Office
 
Castro Chapter 11
Castro Chapter 11
Jeff Byrnes
 
Advanced 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 4
Erin M. Kidwell
 
Css training
Css training
Leigh Aucoin
 
Page layout with css
Page layout with css
Er. Nawaraj Bhandari
 
Web Technology
Web Technology
Kirti H Mandal
 
Css 101
Css 101
Rhyan Mahazudin
 
Lecture-8.pptx
Lecture-8.pptx
vishal choudhary
 
Introduction to CSS3
Introduction to CSS3
Doris Chen
 
Web design-workflow
Web design-workflow
Peter Kaizer
 
CSS3: Simply Responsive
CSS3: Simply Responsive
Denise Jacobs
 
Responsive web design
Responsive web design
erikkross
 

More Related Content

Viewers also liked (10)

Karneval (www.rbs-ifie.at)
Karneval (www.rbs-ifie.at)
Prince Kas
 
Economics chapter2
Economics chapter2
t-MBA Digital
 
Unser tannenwald adventskalender
Unser tannenwald adventskalender
Kiki Likidu
 
FRC Learning
FRC Learning
James Mbarathi
 
ASCEND Creation Time station
ASCEND Creation Time station
Next Generation Learning Challenges
 
семінар захід
семінар захід
Юля Лещишина
 
Chapter 2 marketing
Chapter 2 marketing
t-MBA Digital
 
Navajos
Navajos
Pamela Scott
 
Erasmus+ κα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 Nation Washington Office
 

Similar to HTML and CSS part 3 (20)

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

More from Julie Iskander (20)

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

Recently uploaded (20)

FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
Powering Multi-Page Web Applications Using Flow Apps and FME Data Streaming
Powering Multi-Page Web Applications Using Flow Apps and FME Data Streaming
Safe Software
 
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
 
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
revolcs10
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
ICT Frame Magazine Pvt. Ltd.
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Safe Software
 
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
 
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
Powering Multi-Page Web Applications Using Flow Apps and FME Data Streaming
Powering Multi-Page Web Applications Using Flow Apps and FME Data Streaming
Safe Software
 
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
 
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
revolcs10
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
Cyber Defense Matrix Workshop - RSA Conference
Cyber Defense Matrix Workshop - RSA Conference
Priyanka Aash
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
ICT Frame Magazine Pvt. Ltd.
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Safe Software
 
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
 
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
 

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