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

From Script | Spoken-Tutorial
Revision as of 18:56, 9 October 2020 by Nehasolanki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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 & 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; 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.

Contributors and Content Editors

Nancyvarkey, Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C2/Box-Model-in-CSS/English&oldid=54007"