Fundamentals of Web Technologies. Agenda: CSS Layout (Box Model) CSS Layout: Box Model. All HTML elements can be considered as a box or a container

Transcription

1 ITU 07204: Fundamentals of Web Technologies Lecture 6: CSS Layouts (Intro) Dr. Lupiana, D FCIM, Institute of Finance Management Semester 2 Agenda: CSS Layout (Box Model) 2 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 3 1

2 CSS Layout: Box Model Border Content Padding 4 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 6 2

3 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 7 CSS Layout: Box Model: Height/Width The following example demonstrates how height and width properties can be used 8 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 9 3

4 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 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 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 4

5 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 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 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 5

6 CSS Layout: Box Model: Padding The following example demonstrates how padding property can be used 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 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 6

7 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 borderstyle, border-width and border-color CSS properties 19 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 20 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; 21 7

8 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 It does not have color 22 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 23 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 24 8

9 CSS Layout: Box Model: Margin The following example demonstrates how margin property can be used 25 CSS Layout: Box Model: Margin Similar effect on the previous example can be achieved by using the short form 26 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. 27 9

10 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) 28 10