ITU 07204: Fundamentals of Web
Technologies
Lecture 7: CSS Layouts (Intro)
Dr. Lupiana, D
FCIM, Institute of Finance Management
Semester 2
Agenda:
• CSS Layout (Box Model)
CSS Layout: Box Model
• All HTML elements can be considered as a box
or a container
– Each having margin, border, padding and the
actual content
1
CSS Layout: Box Model
Border
Content
Padding
CSS Layout: Box Model
Margin
5
CSS Layout: Box Model: Height/Width
• When you set the height and width properties
of an HTML element, you just set the width
and height of the content area
• To calculate the full size of an element, you
MUST also consider width of the padding and
borders properties
2
CSS Layout: Box Model: Height/Width
• Height and width properties can have the
following values:
– length; specifies height or width in px, pt or cm
– auto; this is default (the browser calculates the
height and width)
– %; specifies height or width in % of the height or
width of the containing element respectively
CSS Layout: Box Model: Height/Width
• The following example demonstrates how
height and width properties can be used
CSS Layout: Box Model: Height/Width
• The width and height properties can be
overridden by the max-width and max-height
properties respectively
– The width or height of an element becomes auto
until the maximum width or height is reached
• The max-width property is used to set the
maximum width of an element
– It prevents the width property from becoming
larger than the specified by max-width
3
CSS Layout: Box Model: Height/Width
• The max-width property can have the
following values:
– length; specifies width in px, pt or cm
– %; specifies width in % of the containing element
– none; this is default (means there is no maximum
width)
10
10
CSS Layout: Box Model: Height/Width
• The max-height property is used to set the
maximum height of an element
– It prevents the height property from becoming
larger than the specified by max-height
• The max-width and max-height properties are
useful for developing responsive websites
– Responsive websites are websites that their
layouts and contents are responsive to screen size
of a device
11
11
CSS Layout: Box Model: Height/Width
• Why max-width and max-height properties
are useful for developing responsive websites
– With max-width and max-height properties, the
width and height, respectively, of an element is
auto until the maximum width or height is
reached
– This means the size of the element, and so its
content, readjusts as screen size of a device
becomes smaller
12
12
4
CSS Layout: Box Model: Padding
• Generates a space around the content area of
an element
– It introduces or removes an area between a
margin and content of an element
– By default, padding of most of the elements is
zero
• The padding is transparent
– It does not have color
13
13
CSS Layout: Box Model: Padding
• CSS provides a set of properties to set a
padding on each side of an element;
– padding-top
– padding-right
– padding-bottom
– padding-left
14
14
CSS Layout: Box Model: Padding
• All the padding properties can have the
following values:
– length; specifies a padding in px, pt, or cm
– %; specifies a padding in % of the width of the
containing element
– Inherit; specifies that the padding should be
inherited from a parent element
15
15
5
CSS Layout: Box Model: Padding
• The following example demonstrates how
padding property can be used
16
16
CSS Layout: Box Model: Padding
• Similar effect on the previous example can be
achieved by using the short form of specifying
padding in CSS
17
17
CSS Layout: Box Model: Padding
• The effect of the short form of the padding
property in the previous example is as follows
– The first value is for top padding
– The second value is for right padding
– The third value is for bottom padding
– The fourth value is for left padding
18
18
6
CSS Layout: Box Model: Padding
• If the short form of the padding property includes
only two values it implies that;
– The first value is for top and bottom paddings
– The second value is for right and left paddings
• If the short form of the padding property includes
only two values it implies that;
– The first value is for top padding
– The second value is for right and left paddings
– The third value is for bottom padding
19
19
CSS Layout: Box Model: Margin
• Generates spaces around an element
– It sets the size of the white space outside the
border
– It is used to separate two elements by introducing
a space in between
• The margin is transparent
– Just like padding, margin does not have color
20
20
CSS Layout: Box Model: Margin
• CSS provides a set of properties to set a
margin on each side of an element;
– margin-top
– margin-right
– margin-bottom
– margin-left
21
21
7
CSS Layout: Box Model: Margin
• All the margin properties can have the
following values:
– length; specifies a margin in px, pt, cm or auto
– %; specifies a margin in % of the width of the
containing element
– inherit; specifies that the margin should be
inherited from a parent element
22
22
CSS Layout: Box Model: Margin
• The following example demonstrates how
margin property can be used
23
23
CSS Layout: Box Model: Margin
• Similar effect on the previous example can be
achieved by using the short form
24
24
8
CSS Layout: Box Model: Margin
• The effect of the short form of the margin
property in the previous example is as follows
– The first value is for top margin
– The second value is for right and left margins
– The third value is for bottom margin
• Note, margins have a specific behavior
called margin collapsing
– When two boxes touch against one another, the
distance (margin) between them is the value of the
largest margin, and not their sum.
25
25
CSS Layout: Box Model: Margin
• You can centre your web page by simply using
margin property as shown below
– The above block set the top and bottom margins
to 0 and left and right margins to auto (meaning
the remaining 20% of width should be equally
divided i.e. 10% on left and right margins)
26
26
CSS Layout: Box Model: Border
• Creates boundary around padding and
content of an element
• Unlike margin and padding, border property;
– Is not transparent
• It allow you to specify the style, width, and
color of an element's border using border-
style, border-width and border-color CSS
properties
27
27
9
CSS Layout: Box Model: Border
• None of the other border properties will have
effect unless the border-style property is set
• The border-style property is a short form BUT
CSS provides a set of properties to specify
styles for each border;
– border-top-style
– border-right-style
– border-bottom-style
– border-left-style
28
28
CSS Layout: Box Model: Border
• A number of values can be specified but solid
and dotted are the common values
• Both width, style and color can be specified in
a single declaration by using border property;
29
29
10
