HTML and CSS part 3

458 views

Published on

Lecture 3 explains positioning and layout in css, media query and at-rules

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
458
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • Demo for difference between div and span
  • Display: none  the element doesn’t appear not even in the structure
    Visibility : hidden  creates an invisible box
  • IE 5 box model (padding and border shrinks content area)
    Total width= width + margins ONLY
  • 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
  • If left and right specified ltr, left used
     rtl, right used
    If top and bottom specified top used
  • If left and right specified ltr, left used
     rtl, right used
    If top and bottom specified top used
  • If left and right specified ltr, left used
     rtl, right used
    If top and bottom specified top used
  • overflow : visible | hidden | scroll | auto | inherit
  • create a menu
  • 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
  • body {
    background-color: #fff;
    color: #000;
    }

    /* The following rule will be ignored */
    @import url("other.css");
  • CSS 2
  • @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

  • HTML and CSS part 3

    1. 1. Introduction to Web Technologies Lecture 3 Julie Iskander, MSc. Communication and Electronics
    2. 2. Visual Formatting and Layout
    3. 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. 4. BOX Model  Applies to block-level elements
    5. 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. 6. DEMO How to center a block?
    7. 7. Positioning  Positioning Schemes:  Normal Flow (includes relative positioning)  Floating  Absolute Position (includes fixed positioning)  http://www.barelyfitz.com/screencast/html-training/ css/positioning/
    8. 8. position : static  Default  Elements rendered in order of normal flow
    9. 9. 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
    10. 10. 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
    11. 11. 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
    12. 12. 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.
    13. 13. Clearing  clear : both | left | right;  To force an element to start below any floated element  Mainly used to make footer below all floated column
    14. 14. 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
    15. 15. DEMO How to create a menu?
    16. 16. 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
    17. 17. 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
    18. 18. 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.
    19. 19. @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.
    20. 20. @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
    21. 21. 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
    22. 22. Example
    23. 23. Example
    24. 24. 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

    ×