Scribd
Upload
56 views14 pages

Working With Box Model

The document discusses HTML and CSS concepts including: 1. The objectives are for students to layout pages using CSS properties, apply HTML span and div tags, and adjust margins and padding. 2. Image formats for HTML are discussed as well as two ways to include images - as background or to attach photos. 3. CSS positioning properties including absolute, relative, static, fixed, float, and clear are explained with examples to position elements on a page.

Uploaded by

RJ Casildo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
56 views14 pages

Working With Box Model

The document discusses HTML and CSS concepts including: 1. The objectives are for students to layout pages using CSS properties, apply HTML span and div tags, and adjust margins and padding. 2. Image formats for HTML are discussed as well as two ways to include images - as background or to attach photos. 3. CSS positioning properties including absolute, relative, static, fixed, float, and clear are explained with examples to position elements on a page.

Uploaded by

RJ Casildo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Objectives:

• At the end of the lesson, the students are expected to:


• Layout pages using CSS properties
• Apply the span and div HTML tags
• Adjust margins and padding
Review
• What are the different image formats that are used in
HTML documents?

• What are the two different ways an image can be used in


HTML documents?
• Use it as background
• Use it to attach photos
Question:
• How can we give more creative emphasis on certain
elements of the Web page?
Page Layout
• Data Tables – tables with data organized into rows and
columns.

• Layout Tables – tables containing data presented thru


hidden tables in such a way that information in a
particular cell does not necessarily imply a relationship
with information in other cells.
CSS Positioning Properties
• Absolute – the element stays in one place. Even if you
resize the browser windows, it will remain in the part of
the page you assigned it to.

Values: Left .absolute


Right {
Top position:absolute;
Bottom top:0;
right:0;
width:200px;
}
CSS Positioning Properties
• Relative – its position depends on other elements. Even if
you resize the browser window, it will not overlap into
other elements.

Values: Left .relative


Right {
Top position:relative;
Bottom top:0;
right:0;
width:200px;
}
CSS Positioning Properties
• static – the default position.

.static
{
position: static;
top:0;
right:0;
width:200px;
}
CSS Positioning Properties
• Fixed – the element stays in place even if you scroll up
or down, left or right. Its position depends on the browser
windows and not on the page itself.

Values: Left .fixed


Right {
Top position: fixed;
Bottom top:0;
}
CSS Positioning Properties
• Float – its position it either to the left or right of another
element, with all the other contents enclosing it.

Values: Left
.left
Right
{
float: left;
top:0;
}
CSS Positioning Properties
• Clear – So that the element will not have any other
contents arount it.

Values: Left
.right
Right
{
Both
clear: right;
top:0;
}
WORKING WITH BOX
MODEL
Box model properties:
• Width
• Height
• Padding
• Border
• Margin
The Box Model

You might also like