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

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

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 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 15px. 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 and 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 and height assigned to an element is applied only to the content area. So in the total or final width and height, padding and border are added.
Slide: border-box	border-box Padding and border assigned to an element is adjusted in the width and 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.
Slide: Assignment	Set the following styles for the div tag Solid border for the left and right side Dotted border for the bottom No border for the top Margin space for all the sides as 10px Padding space for the left and right side as 15px
Slide: Assignment	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 along with Neha Solanki from IIT Bombay. Thank you for watching.

Contributors and Content Editors

Nancyvarkey, Nehasolanki