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