Learn HTML iFrame

To include output of another page into the current page.

Attributes:
scrolling=”yes/no”
marginwidth & marginheight
frameborder=”0″: To Remove the border from IFrame
Example:
<iframe src=”/html/menu.htm” width=”555″ height=”200″ marginheight=”30″ marginwidth=”30″
scrolling=”no”>
Sorry your browser does not support inline frames.
</iframe>
Using Iframe as the Target:
<iframe src=”demo_iframe.htm” name=”iframe_a”></iframe>
<p><a href=”http://www.microsoft.com” target=”iframe_a”>Microsoft </a></p>

CSS2 Display Positioning

Visibility and Display

CSS Visibility:
visibility: visible | hidden
Note: visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

CSS Display
Display: none | inline | block
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there.
Block and Inline Elements
A block element is an element that takes up the full width available, and has a line break before and after it.
Examples of block elements

  • An inline element only takes up as much width as necessary, and does not force line breaks.
    Examples of inline elements: and

Example:
Display a list of links as a horizontal menu:

 

CSS 2.1 Display and Positioning


A display property with a value of “block” results in
a line break between the two elements.
CSS Scrollbars:
There may be a case when an element’s content might be larger than the amount of space allocated to it. For example given width and height properties did not allow enough room to accommodate the content of the element.
CSS provides a property called overflow which tells the browser what to do if the box’s contents is larger than the box itself. This property can take one of the following values:

Value
Description
visible
Allows the content to overflow the borders of its containing element.
hidden
The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.
scroll
The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.
auto
The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.
Example:
Example of scroll value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

Example of auto value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

CSS Positioning
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big.
Following are the Positioning Methods:
1. Static Positioning
2. Fixed Positioning
3. Relative Positioning
4. Absolute Positioning

Eg:

CSS 2.1 Display and Positioning
This is a div used for positioning example.

Static Positioning
 HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
 Static positioned elements are not affected by the top, bottom, left, and right properties

Fixed Positioning
 An element with fixed position is positioned relative to the browser window.
 It will not move even if the window is scrolled

Relative Positioning
 A relative positioned element is positioned relative to its normal position
 The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

Absolute Positioning
 An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is  Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.  Absolutely positioned elements can overlap other elements

CSS Layers with Z-Index
 CSS operates in three dimensions – height, width and depth.
 To specify which element should be placed on top and which should be sent behind other element
 An element with greater Z-index is always in front of an element with a lower stack order.

Example:

<div style=”background-color: red; width: 300px; height: 100px; top: 10px; left: 80px; position: relative”></div>

<div style=”background-color: yellow; width: 300px; height: 100px; top: -60px; left: 35px; position: relative;”></div>

<div style=”background-color: green; width: 300px; height: 100px; top: -220px; left: 120px; position: relative”></div>

 CSS Floats

An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document (or the containing box)

<div style=”float:left;width:100px”>

<img src=”bill.jpg” alt=”Bill Gates”>

</div>

<p>

Lerem prorem text causas naturales et antecedentes, idciro etiam nostrarum voluntatum…

</p>

Clear property (to turn off floating)

The clear property is used to control how the subsequent elements of floated elements in a document shall behave

clear: both | left | right

Example:

<!DOCTYPE html>

<html>

<head>

<style>

.thumbnail {

float: left;

width: 110px;

height: 90px;

margin: 5px;

}

.text_line {

clear: both;

margin-bottom: 2px;

}

</style>

</head>

<body>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<h3 class=”text_line”>Second row</h3>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

<img class=”thumbnail” src=”demo.jpg”>

</body>

</html>

CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

Box model
 Borders & Outline
 Margin & Padding
 Height and width


CSS Borders:

Property

Description

border

Sets all the border properties in one declaration

border-width

Sets the width of the four borders

border-color

Sets the color of the four borders

border-style

Sets the style of the four borders. (Values are listed below)

border-left

Sets all the left border properties in one declaration

border-top

Sets all the top border properties in one declaration

border-right

Sets all the right border properties in one declaration

border-bottom

Sets all the bottom border properties in one declaration

border-bottom-color

Sets the color of the bottom border

border-bottom-style

Sets the style of the bottom border

border-bottom-width

Sets the width of the bottom border

border-left-color

Sets the color of the left border

The border-style Property:

groove: Border looks as though it is carved into the page.
ridge: Border looks the opposite of groove.
inset: Border makes the box look like it is embedded in the page.
outset: Border makes the box look like it is coming out of the canvas

The border-style property can have from one to four values.

 border-style: dotted solid double dashed;  top border is dotted  right border is solid  bottom border is double  left border is dashed  border-style: dotted solid double;  top border is dotted  right and left borders are solid  bottom border is double  border-style: dotted solid;  top and bottom borders are dotted  right and left borders are solid  border-style: dotted;  all four borders are dotted

Border Outline:
An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”.
 outline-color
 outline-style: Same values as border-style
 outline-width
 outline: <color> <style> <width>

CSS Margins:
The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.

Property

Description

margin

A shorthand property for setting the margin properties in one

margin-bottom

Sets the bottom margin of an element

margin-left

Sets the left margin of an element

margin-right

Sets the right margin of an element

margin-right

Sets the right margin of an element

margin-top

Sets the top margin of an element

Examples:

<p style=”margin: 15px; border:1px solid black;”>All four margins will be 15px </p>
<p style=”margin:10px 2%; border:1px solid black;”>Top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p>
<p style=”margin: 10px 2% -10px; border:1px solid black;”> Top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p>
<p style=”margin: 10px 2% -10px auto; border:1px solid black;”>Top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p>

CSS Padding:

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

Property

Description

padding-bottom

Sets the bottom padding of an element

padding-left

Sets the left padding of an element

padding-right

Sets the right padding of an element

padding-top

Sets the top padding of an element

Examples: <p style=”padding: 15px; border:1px solid black;”>All four padding will be 15px </p>
<p style=”padding:10px 2%; border:1px solid black;”> Top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document. </p>
<p style=”padding: 10px 2% 10px; border:1px solid black;”> Top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px </p>
<p style=”padding: 10px 2% 10px 10px; border:1px solid black;”>Top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px </p>

CSS Dimensions:

The CSS dimension properties allow you to control the height and width of an element.
 The height property is used to set the height of a box.
 The width property is used to set the width of a box.
 The line-height property is used to set the height of a line of text.
 The max-height property is used to set a maximum height that a box can be.
 The min-height property is used to set the minimum height that a box can be.
 The max-width property is used to set the maximum width that a box can be.
 The min-width property is used to set the minimum width that a box can be.