CSS/C2/Dimensions-and-Measuring-units-in-CSS/English

From Script | Spoken-Tutorial
Jump to: navigation, search

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


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 and 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 hyphen 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, percentage 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.

Now the content of the H1 heading tag has become bigger.

This is because 3 x 16px = 48px

Cursor in the browser. So far, we have set the measuring unit as percentage 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 of 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:

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

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:

<div>

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

</div>

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 and 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 along with Neha Solanki 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/Dimensions-and-Measuring-units-in-CSS/English&oldid=54034"