Scribd
Upload
59 views

Lecture 7 CSS Layouts 1 - Box Model

This document provides an introduction to CSS layouts using the box model. It discusses the box model properties of margins, borders, padding, and content and how they work together to style elements. Specific topics covered include using height and width, the max-height and max-width properties, shorthands for padding and margins, and centering elements with margins.

Uploaded by

Kelvin Chaula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Lecture 7 CSS Layouts 1 - Box Model

This document provides an introduction to CSS layouts using the box model. It discusses the box model properties of margins, borders, padding, and content and how they work together to style elements. Specific topics covered include using height and width, the max-height and max-width properties, shorthands for padding and margins, and centering elements with margins.

Uploaded by

Kelvin Chaula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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

You might also like