View source for CSS/C2/Dimensions-and-Measuring-units-in-CSS/English

'''Title of the script: '''Dimensions and Measuring Units 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 Units, CSS Measuring Units, CSS Dimensions



{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the spoken tutorial on “'''Dimensions and Measuring Units'''” in '''CSS'''.
|-
|| Slide: Learning Objectives
|| In this tutorial we will learn the usage of:

*Measuring '''units '''and
*Width & height in '''CSS'''

|-
|| 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 know to use '''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: Measuring Units
|| In '''CSS''' we use some of the common measuring units to define the '''style properties'''.
*There are two types of '''measuring units''':
** '''Relative Units'''
** '''Absolute Units'''

|-
|| Slide: Relative Units
|| Relative Units

*They are relative to other '''measuring units.'''
*It consists of '''units''' like: 
** '''Percentage (%)'''
** '''em'''
** '''ex'''

|-
|| Slide: Absolute Units
|| Absolute Units

*They are fixed and not relative to other units.
*It consists of physical '''units''' like:
** '''Point (pt)'''
** '''Pixel (px)'''
** '''Millimetre (mm)'''
** '''Centimetre (cm)'''
** '''Inch (in)'''

|-
|| Only narration
|| Let us understand the dimensions and measuring units through some examples.
|-
|| Open '''my-css '''folder
|| Go to the practice folder '''my-css'''
|-
|| Open mystyle.css in gedit text editor
|| Open the '''mystyle.css''' file which we had created earlier, in any''' text editor.'''

I have already opened it in the '''gedit Text Editor.'''
|-
|| Point to Mypage.html in my-css folder
|| For this demonstration, I’m also using the file '''Mypage.html'''.

The same is available in the '''Code files''' link for practise.
|-
|| Open Mypage.html in gedit
|| Open the file '''Mypage.html '''also in the '''text editor.'''
|-
|| Open Mypage.html in firefox
|| Switch to the folder.

Now open the same file '''Mypage.html''' in a '''web browser'''.
|-
|| Point to the output.
|| Observe the output in the '''browser''' window.

Now let us set the '''width '''of the body to '''50%''' less than the normal width in the '''CSS''' file.
|-
|| [gedit - mystyle.css]

Type: width: 50%;
|| Switch to the file '''mystyle.css'''

Inside the '''body''' '''tag,''' next to the '''background-color property,''' type the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|  | Highlight the output
|| Observe the output.

Now the alignment for the text has changed.

This is because the total '''width '''of the page has changed.
|-
|| Switch to mystyle.css
|| We’ll make some more changes in this '''CSS''' file.

Switch to the '''mystyle.css''' file.
|-
|| [gedit - mystyle.css]

Type: font-size: 150%;
|| Inside the '''h1 tag, '''next to''' text-align property, '''type the code as shown here.

|-
|| [gedit - mystyle.css]

Highlight: font-size: 150%;
|| This code is supposed to set the '''font size''' of '''h1 tag '''to '''150%''' bigger than the normal size.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| Highlight the output
|| Observe the change in the '''heading'''.

The content of the '''H1 heading tag''' has become smaller.
|-
|| [gedit - mystyle.css]

Highlight: font-size: 150%;
|| But in our code, we have set the font size of the '''H1 heading tag''' to '''150%.'''

According to this, the '''H1 tag''' content should be bigger than the normal size.
|-
|| [Text box on the screen]

'''Browser's''' default font size is''' 16px'''

'''Body’s '''default font size is also''' 16px'''
|| The '''browser's''' default font size is''' 16px''', which is also the default font size of the '''body'''.
|-
|| 

[Text box on the screen]

'''Body '''is the '''parent element''' of '''h1''', so '''1.5 x 16px = 24px'''
|| In the code, we have mentioned the font size as '''150%'''.

As mentioned earlier, % is a relative '''unit''' and it is relative to the '''parent element'''.

Here, the '''body '''is the '''parent element''' of '''h1''', so '''1.5 x 16px = 24px'''

That’s why it sets the font size of the specific content to '''24 pixels'''.

Hence our output looks smaller.
|-
|| [gedit - mystyle.css]

Update: font-size: 300%;
|| Now, let’s go back to the '''css''' file and change the font size from '''150% '''to '''300%'''
|-
|  | Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Come back to the '''browser''' and refresh the page.
|-
|| Highlight the output

[Text box on the screen]

'''3 x 16px = 48px'''
|| Observe the change in the '''heading'''.

The content of the '''H1 heading tag''' has become bigger now.

This is because '''3 x 16px = 48px'''
|-
|| Cursor in the browser.
|| So far, we have set the measuring '''unit''' as '''%''' for '''font size''' and '''width'''.

Now we’ll try to set the '''font size '''of '''h1''' in '''points'''.
|-
|| [gedit - mystyle.css]

Update: font-size: 15pt;
|| Switch to the file '''mystyle.css'''

Inside the '''h1 tag''', update the value for '''font size''' to '''15pt.'''
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| Highlight the output

[Text box on the screen]

advisable to use '''point''' or '''pixel''' for '''font size'''
|| Observe the change.

The size of the '''heading''' has changed, and it has become small.

Generally, any measuring '''unit''' can be used to set the '''font size'''.

But it is advisable to use '''point''' or '''pixel''' for '''font size''', as these are used universally. 
|-
|| Slide: Heading Tag sizes

|| Here is the detailed information about the font size of '''heading tags''' and '''units'''.
|-
|| [gedit - Mypage.html]
|| Next, let’s learn how to use '''width''' and '''height attributes'''.

Switch to the file '''Mypage.html'''
|-
|| [gedit - Mypage.html] Type:

<nowiki><p> A farmers' market is a place, where you can buy vegetables directly from the farmers. </p></nowiki> 
|| Next to the '''h1 heading tag''' let us add a '''paragraph.'''

Type 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. 

We see the paragraph that we added.

Next, we will modify the '''style''' for the '''paragraph tag''' in the '''CSS '''file.
|-
|| [gedit - mystyle.css] Type:

p { 

:width: 75%;

}
|| Switch to the '''CSS''' file.

Next to the '''h1 tag''', 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 output.

The width of the content within the '''paragraph tag''' has reduced.

Already the width of the page is set to''' 50%''' of the normal width.

So now the width of the '''paragraph tag''' is '''75%''' of the page’s current width.
|-
|| [gedit - Mypage.html] Type:

<nowiki><div></nowiki>

:<nowiki><p> A farmers' market is a place, where you can buy vegetables directly from the farmers. </p></nowiki>

<nowiki></div></nowiki>

|| Switch to the '''Mypage.html''' file in the '''text editor'''.

Let me put the '''paragraph tag''' and its content inside the '''div tag'''.

Update the code as shown here.

Here the '''div tag''' defines a section in an '''HTML''' file.
|-
|  | Press Ctrl + S
|| Save the file.
|-
|| [gedit - mystyle.css]

div { 

:width: 50%;

:height: 2cm;

:background-color: lightgreen;

}
|| Now, go to the file '''mystyle.css''' and set the '''properties''' for the '''div tag'''.

Next to the '''paragraph tag, '''type the code as shown here.
|-
|| [gedit - mystyle.css]

highlight: width: 50%;
|| Here I have set the '''width''' of the '''div tag''' as 50% of the width of the '''body tag'''.
|-
|| [gedit - mystyle.css]

highlight: height: 2cm;
|| I have set the '''height''' of the '''div tag''' as '''2 cm.'''
|-
|| [gedit - mystyle.css]

highlight: background-color: lightgreen;
|| The '''background color''' for the '''div tag''' is set to '''light green.'''

This will help us to see the '''width''' and '''height''' of the '''div tag''' clearly.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch back to the '''browser''' and refresh the page.
|-
|| [firefox] 

Highlight the output
|| Observe the output.

Based on the '''width''' and '''height''' of the '''div tag''', the background color has been set.
|-
|| [firefox] 

Highlight the paragraph tag content
|| The '''width''' of the '''paragraph tag''' is reduced again.

This is because the '''paragraph''' '''tag''' is inside the '''div tag'''.

Width of the content of the '''paragraph tag''' will be set as '''75%''' of the '''width''' of the '''div tag.''' 
|-
|| Only narration
|| This is how we set the '''width''' and '''height''' of the '''elements''' using various measuring units.

With this we have come to the end of this tutorial. 

Let us summarize what we have learnt.
|-
|| Slide: Summary

|| In this tutorial, we have learnt the usage of :
*Measuring '''units '''and
*Width & Height in '''CSS'''

|-
|| Slide: Assignment
|| As an assignment-
*Open the file '''webpage.html''' which you have created earlier.
*Create a '''div tag.'''
*Inside the '''div tag''', add some content using the '''paragraph tag.'''

|-
|| Slide: Assignment
|| 
*Open the file '''styles.css''' which you have created earlier.
*Set the '''width''' of the '''div tag''' to '''5cm.'''
*Set the '''height''' of the '''div tag''' to '''5cm.'''

|-
|| Slide: Assignment
|| 
*Set the '''background color''' of the '''div tag''' to '''pink.'''
*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.
|-
|}