Nancyvarkey at 04:59, 15 October 2020

2020-10-15T04:59:38Z

Nehasolanki at 06:57, 14 October 2020

2020-10-14T06:57:49Z

Nehasolanki: Created page with "'''Title of the script: '''Box Model in CSS '''Author:''' Praveen S '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywor..."

2020-10-09T13:26:01Z

Created page with "'''Title of the script: '''Box Model in CSS '''Author:''' Praveen S '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywor..."

New page

'''Title of the script: '''Box Model in CSS

'''Author:''' Praveen S

'''Domain Reviewer: '''Ankita Maske, Om Prakash Soni

'''Novice Reviewer:''' Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Property, CSS Box Model, CSS Border, CSS Margin, CSS Padding

{| border="1"
|-
||'''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the spoken tutorial on “'''Box Model''' in '''CSS'''”.
|-
|| Slide: Learning Objectives
|| In this tutorial we will learn about:

* '''The Box Model'''
* '''Border'''
* '''Margin'''
* '''Padding'''
* '''Box sizing'''
|-
|| Slide:

System Requirements

|| This tutorial is recorded using
* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor'''
* '''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
|| Slide: Prerequisite

https://spoken-tutorial.org
|| To practise this tutorial, you should have basic knowledge of '''HTML''' and '''CSS'''.

If not, please go through the '''HTML''' and '''CSS '''tutorials on this website.
|-
|| Slide: Code Files
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.

Please download and extract them.

Make a copy and then use them while practising.
|-
|| Slide: CSS Box Model
|| Let us learn to style an '''element''' in '''CSS.'''

To style an '''element''', each '''element''' will be considered in the form of a '''box '''with some '''layers'''.

The '''layers''' are:
* '''Border'''
* '''Margin'''
* '''Padding'''
* '''Content'''

|-
|| Slide: CSS Box Model

Image of CSS Box Model
|| This is how the '''CSS Box model''' looks like.

Each '''layer''' has some properties of its own.

Let us understand these one by one through examples.
|-
|| Slide: Border
|| The '''border '''layer has the following properties

* '''Style'''
* '''Width'''
* '''Color'''
* '''Individual Sides'''

|-
|| Slide: Border

{| style="text-align: center"; cellpadding="7"
|'''border-style'''
|'''border-bottom-style'''
|-
|'''border-width'''
|'''border-right-style'''
|-
|'''border-color'''
|'''border-left-style'''
|-
|'''border-top-style
|}

|| These are how the '''border '''properties are defined.

|-
|| Open '''my-css '''folder
|| Go to the practice folder '''my-css.'''
|-
|| Open mystyle.css
|| Let’s open the file '''mystyle.css''' in a text editor.

I have already opened it in the '''gedit Text Editor.'''
|-
|| [gedit - mystyle.css] Highlight

div { width: 50%; height: 2cm;

background-color: lightgreen; }
|| We have set the '''style''' for a '''div tag'''.

Let us use the same to explain the '''CSS Box Model'''.
|-
|| [gedit - mystyle.css]

Type: border-style: solid;
|| To set the '''border '''I will add some properties.

Inside the '''div tag, '''next to''' background-color '''property, type the code as shown.
|-
|| [gedit - mystyle.css] Highlight

border-style: solid;
|| I want a solid '''border''', so in the value I have mentioned '''solid'''.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Mypage.html in firefox
|| Switch to the '''my-css '''folder.

Open the file '''Mypage.html''' in a '''web browser'''.
|-
|| [Firefox]

Highlight the border
|| Observe the output.

We see a black colored solid '''border '''around the '''div''' section.
|-
|| Slide: Border Styles

'''dotted solid dashed'''

'''double groove ridge'''

'''inset outset none hidden'''
|| These are all the available '''border styles '''that can be used.

|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

border-style: dotted;
|| Instead of '''solid''', let me change it to '''dotted.'''

Update the code as shown here.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]

Highlight the output
|| Observe the output.

Now the '''solid border''' is changed to a '''dotted border.'''

Explore the other different '''border styles''' on your own later.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update

div { width: 50%; height: 2cm;

background-color: lightgreen;

border-style: dotted;

border-width: 7px; border-color: red; }
|| Update the '''div style''' as shown.
|-
|| [gedit - mystyle.css] Highlight

border-width: 7px; border-color: red;
|| I have set the '''border width '''as''' 7 pixels''' and changed the '''border color''' to '''red'''.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox] Highlight the output
|| Observe the output.

Now we have a '''dotted red border''' with the '''width '''as''' 7 pixels.'''
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Highlight

border-style: dotted;

border-width: 7px;

border-color: red;
|| To '''style''' the '''div border''' so far we have used 3 lines of code.
|-
|| [gedit - mystyle.css] Delete:

border-style: dotted;

border-width: 7px;

border-color: red;
|| In '''CSS''' we have a property called '''shorthand '''to simplify this.

Let us understand this with an example.

First, delete these 3 lines.
|-
|| [gedit - mystyle.css] Type:

border: 7px dotted red;
|| Now, next to the '''background-color''' property, type the code as shown.
|-
|| [gedit - mystyle.css] Highlight

border: 7px dotted red;
|| The way to write the '''shorthand '''property is '''width, style''' and '''color.'''

It is mandatory to specify the '''border’s '''style, in the '''shorthand '''property.

Otherwise the property will not work.
|-
|| Press Ctrl + S
|| Save the file'''.'''
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox]

Highlight the output
|| There’s no change in the output.

This indicates that our '''shorthand '''method worked.
|-
|| Only narration
|| In '''CSS '''we can set different '''border styles '''for each side.

Let us try this.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;
|| Inside the '''div style''', next to '''border '''property, type the code as shown.
|-
|| [gedit - mystyle.css] Highlight

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;
|| Here I have set the '''border style '''for the '''top '''and '''bottom '''as '''solid, '''and for '''right''' and '''left '''as '''dotted'''.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox]

Highlight the output
|| Observe the output.

The '''border styles '''for each side have changed as per the given input.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Highlight

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;
|| To '''style''' the '''div border''' we have used 4 lines of code.

The same can be written in a single line.
|-
|| [gedit - mystyle.css] Delete

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;
|| First, delete these 4 lines.
|-
|| [gedit - mystyle.css] Type:

border-style: solid dotted solid dotted;
|| Now, next to the '''border''' property, type the code as shown.
|-
|| [gedit - mystyle.css] Highlight:

border-style: solid dotted solid dotted;
|| Here I have set the '''border style type''' without mentioning the sides.

The order according to '''CSS '''is - '''top, right, bottom, left'''.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox]

Highlight the output
|| Again, there is no change in the output.

Which means our simplified code worked well.
|-
|| Only narration
|| Like '''border style''', we can also set different '''width, size''' and '''color '''for each side.

You may try these on your own, later.
|-
|| Only narration
|| The next '''layer''' which we are going to see is '''margin'''.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

Type: margin: 1cm;
|| Next to the '''border style '''property, type the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox]

Highlight the output
|| Observe the change.

A '''1 cm''' of '''margin '''space is set to the '''div '''section from all the four sides.
|-
|| [firefox] Point to borders.
|| We can set '''margins '''for each side either individually or in a single line.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

margin: 1cm 2cm 3cm 4cm;
|| Inside the '''div tag''', update the '''margin '''property as shown.
|-
|| [gedit - mystyle.css] Highlight:

margin: 1cm 2cm 3cm 4cm;
|| Here I have set the '''margin '''without mentioning the sides.

The order according to '''CSS '''is - '''top, right, bottom, left'''.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox] Highlight the output
|| Observe the change.
|-
|| [gedit - mystyle.css] Highlight:

margin: 1cm 2cm 3cm 4cm;
|| What if we wish to inherit the '''margin '''space based on the '''parent element'''?

To do that, instead of values, we have to type '''inherit'''.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor'''.
|-
|| [gedit - mystyle.css] Type:

p { width: 75%; margin: inherit; }
|| Update the '''style''' properties of the '''paragraph tag''' as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox] Highlight the output
|| Observe the change.

The '''Paragraph '''comes under the '''div '''section.

So, the '''margin '''space for the '''paragraph tag '''is '''inherited''' from the '''div tag'''.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

Delete margin: inherit;
|| Update the '''style''' properties of the '''paragraph tag''' as shown.
|-
|| Slide: Padding
|| The next '''layer''' which we are going to see in the '''CSS Box model, '''is '''Padding.'''

'''Padding '''is a concept to set some space between the '''border '''and the '''content'''.

Let us learn this through some examples.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

Type: padding: 15px;
|| Let us set the '''padding '''space as 1'''5px.'''

Inside the '''div style''' section, next to the '''margin '''property, type the code as shown.
|-
|| [gedit - mystyle.css] Update:

/*margin: 1cm 2cm 3cm 4cm;*/
|| Let us '''comment''' the '''margin '''property to see the '''padding '''difference clearly.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the browser and refresh the page
|-
|| [firefox] Highlight the output
|| Observe the change.

A '''padding '''space of''' 15 pixels''' is set to the content inside the '''div '''section.
|-
|| Only narration
|| Like '''border '''and '''margin '''we can also set different '''padding '''sizes to all the four sides.

These can be set either separately or all together.
|-
|| Slide : Note
||
* '''Elements''' of '''HTML''' come with some default '''margin '''and '''padding'''.
* Not setting these properties doesn't mean it will be absent.

You can try this on your own later.
|-
|| Slide : Width Calculation

Image : Width
|| In '''CSS''', total width of an '''element''' is calculated as:

'''Total width = width + border + padding'''
|-
|| Slide : Height Calculation

Image : Height
|| And total height of an '''element''' is calculated as:

'''Total height = height + border + padding'''
|-
|| Slide: Box Sizing
|| '''Box Sizing property'''

* It is used to determine how the '''width''' & '''height''' of an '''element''' is calculated.
* Its values are:
** '''content-box'''
** '''border-box'''

Let us understand this with some examples.
|-
|| Slide: content-box
|| '''content-box '''

* It is the default '''CSS Box Model'''.
* The '''width''' & '''height''' assigned to an '''element''' is applied only to the '''content area'''.
* So in the total or final '''width''' and '''height'''<nowiki>; </nowiki>'''padding''' and '''border''' are added.

|-
|| Slide: border-box
|| '''border-box'''

* '''Padding''' and '''border''' assigned to an '''element '''is adjusted in the '''width''' & '''height''' property.
* And the '''content area''' shrinks to accommodate them.
* In the total or final '''width '''and''' height;''' '''padding''' and '''border''' are not added.

|-
|| [firefox] Highlight box
|| Here, the '''width '''of the '''box''' = '''width '''+ '''padding '''+ '''border'''
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Type:

box-sizing: border-box;
|| Inside the '''div style''' section, next to the '''padding '''property, type the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox] Highlight the output
|| Observe the change.

The text has come out of the '''box''' as its '''width''' and '''height''' are reduced.

That is, the box size shrunk to accommodate the '''50% width.'''
|-
|| Only narration
|| Let's do some more changes.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

Delete: height: 2cm;
|| Inside the '''div style''' section, delete the code as shown.

By doing this, we are not restricting the '''height'''.
|-
|| [gedit - mystyle.css]

Update: padding: 30px;
|| Now we will change the '''padding '''from '''15px''' to '''30px'''.

Update the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox] Highlight the output

|| Observe the change.

Now you can see the '''width''' of the''' '''box has not changed.

This is because of '''box sizing''' property.

A '''padding '''of '''30px '''is added and the '''content''' inside the '''box''' is adjusted.
|-
|| [gedit - mystyle.css] Update: padding: 50px;

Switch to firefox and refresh the page
|| Try changing the '''padding '''to '''50px''' and observe the output.

You can see the width of the box has not changed.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

Update: border: 17px dotted red;
|| Now change the border from '''7px '''to '''17px'''.

Update the '''border''' property as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox] Highlight the output
|| Observe the change.

Still the '''width '''of the '''box''' has not changed.

This is because of the '''box sizing''' property.

Only the size of the '''border '''has increased.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

Update:box-sizing: content-box;
|| Inside the '''div style''' section, update the '''box sizing''' property as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox] Highlight the output
|| Observe the change.

Now we can see the '''width''' of the''' box''' has increased.

As we have added the '''padding '''and '''border, '''the width of the '''box''' has increased.

In this way, we can use '''box-sizing''' property in '''CSS'''.
|-
|| Only narration
|| Now I will update the '''div '''section for the required properties on this page.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

div { width: 50%; height: 2cm;

background-color: lightgreen;

border: 7px dotted red;

border-style: solid dotted solid dotted;

/*margin: 1cm 2cm 3cm 4cm;*/

padding: 15px; }
|| Update the '''div''' section as shown here.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [firefox] Highlight the output
|| Observe the output.

This is our required page.
|-
|| Only narration
|| With this we have come to the end of this tutorial.

Let us summarize.
|-
|| Slide: Summary
|| In this tutorial, we have learnt about

* '''The Box Model'''
* '''Border'''
* '''Margin'''
* '''Padding'''
* '''Box sizing'''

|-
|| Slide: Assignment
|| As an assignment

* Open the file '''styles.css''' which you have created earlier.
* Set the following '''styles''' for the '''div tag'''
* '''Solid border''' for the '''left '''and '''right '''side
* '''Dotted border''' for the '''bottom'''

|-
|| Slide: Assignment
||
* No '''border '''for the '''top'''
* '''Margin '''space for all the sides as '''10px'''
* '''Padding '''space for the '''left '''and '''right '''side as '''15px'''
* Link the '''styles.css''' file to '''webpage.html''' file
* Observe the output

|-
|| Slide:

About Spoken Tutorial project
|| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.
|-
|| Slide: Spoken Tutorial Workshops
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| Slide: Forum
|| Please post your timed queries on this forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
|| Slide: Thanks
|| The script for this tutorial is contributed by Praveen

and this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.
|-
|}

@@ Line 699: / Line 699: @@
 || Slide: Assignment
 || As an assignment
 * Open the file '''styles.css''' which you have created earlier.
 * Set the following '''styles''' for the '''div tag'''
-* '''Solid border''' for the '''left '''and '''right '''side
+** '''Solid border''' for the '''left '''and '''right '''side
-* '''Dotted border''' for the '''bottom'''
+** '''Dotted border''' for the '''bottom'''
 |-
 || Slide: Assignment
 ||
 * Link the '''styles.css''' file to '''webpage.html''' file
 * Observe the output

CSS/C2/Box-Model-in-CSS/English - Revision history

Nancyvarkey at 04:59, 15 October 2020

Nehasolanki at 06:57, 14 October 2020

Nehasolanki: Created page with "'''Title of the script: '''Box Model in CSS '''Author:''' Praveen S '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywor..."