HTML and CSS part 3

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;
}

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

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

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

HTML and CSS part 3

More Related Content

Viewers also liked

Similar to HTML and CSS part 3

More from Julie Iskander

Recently uploaded

HTML and CSS part 3

Editor's Notes