Script | Spoken-Tutorial - User contributions [en]

Bootstrap/C2/Color-Classes-in-Bootstrap/English

2021-06-29T07:54:02Z

Nehasolanki: Created page with "'''Title of the script: '''Color Classes in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''B..."

'''Title of the script: '''Color Classes in Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Border color classes, Text color classes, Links color classes, Background color classes

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the Spoken Tutorial on '''“Color Classes in Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn about '''color''' '''classes''' for:

* '''Borders'''
* '''Text'''
* '''Links '''and
* '''Background'''

|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

|-
| | Slide 4: Prerequisite

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS.'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Slide: Layout

Image1.png -
| | In this tutorial, we will design a '''layout''' as shown here using '''color classes''' in '''Bootstrap'''.
|-
| | Slide: Border Color Classes

border.png
| | Let’s start with the '''Border color classes.'''

'''Border color classes '''are used to color the borders.

Following are the '''border color classes '''shown''' '''in their respective color.

Let’s use one of these '''classes''' in our '''layout'''.
|-
| | Point to Mypage.html & Mystyle.css in My-bootstrap folder

| | Locate the files '''Mypage.html''' and '''Mystyle.css''' in the '''My-bootstrap''' folder.

We will use '''Mypage.html''' and '''Mystyle.css files '''which we saved earlier''' '''for this demonstration.
|-
| | 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.

|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in any '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | [gedit - Mypage.html]

Delete:

<link rel="stylesheet" href="Mystyle.css">
| | First of all, we will remove linking '''Mystyle.css file '''with this''' HTML '''file.

|-
| | [gedit - Mypage.html]

Delete:

border: 2px solid green;
| | And in the '''4th row''', delete the '''border property''' which was '''set''' using the '''style attribute'''.

We will design this layout using '''bootstrap''' '''color classes '''later'''.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in Firefox
| | Open the file '''Mypage.html''' in a '''web browser'''.

I have opened it in the '''Firefox web browser.'''
|-
| | [Firefox]
| | Observe that all the borders set by using '''Mystyle.css''' '''file''' and '''style attribute''' are now removed.

Now let's use the '''border color class'''.
|-
| | Switch to Mypage.html in gedit
| | Switch back to '''Mypage.html '''in the '''text editor'''.
|-
| | [gedit - Mypage.html]

Type:

<pre>
<div class="container-lg border border-primary">
</pre>

| | We’ll add a border with its color to the '''container''' as shown here.

Here the '''.border class''' is used to set a basic border.

And '''.border-primary''' '''class''' is used to color the border as blue.
|-
| | [gedit - Mypage.html]

Type:

<pre>
<div class="row">
<div class="col-sm-3 order-sm-last pt-sm-5
border border-primary">
<ul>

<a href="#" class="text-decoration-none text-reset"><li>
Fruits & Vegetables </li></a>

<a href="#" class="text-decoration-none text-reset"><li>
Foodgrain </li></a>

<a href="#" class="text-decoration-none text-reset"><li>
Beverages </li></a>

<a href="#" class="text-decoration-none text-reset"><li>
Personal care </li></a>

<a href="#" class="text-decoration-none text-reset"><li>
Snacks & Branded Foods </li></a>

</ul></div>

<div class="col-sm-9 pt-sm-5 border border-primary">

<h3> Welcome to Online Grocery Shopping!! </h3>

<p class="font-italic"> Buy your essentials at the lowest price.
Choose from fresh produce to packaged goods and
get them delivered straight to your doorstep.
Shop for Rs.1000 and more to get FREE delivery. <p>

</div></div>
</pre>

| | We’ll also add borders to the columns of the '''2nd row''' as shown here.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Observe that the blue color border is added around the '''container'''.

And it is also added to both the columns of the 2nd''' row.'''
|-
| | Slide: Text Color Classes

text.png
| | Next is '''text color classes'''.

* '''Text color classes '''are used to color the '''text''' and '''links'''
* Following are the '''text color classes''' shown in their respective color.

Let’s use some of these '''classes''' in our '''layout'''.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file in the '''editor'''.
|-
| | [gedit - Mypage.html]

Highlight:

<pre>
<div class="row">

<div class="col m-sm-4 text-center">

<h1 class="text-danger"> Bharat Mart </h1>

</div>

</div>
</pre>
| | Notice the '''1st row'''.

Recall that we had already '''set .text-danger class''' to the heading in one of the earlier tutorials.

|-
| | Switch to firefox
| | Switch to the '''browser'''.
|-
| | [Firefox]
| | Notice that the color of the heading is red.
|-
| |
| | Now let us see what happens if we add these color '''classes''' to '''links'''.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file in the '''editor'''.
|-
| | [gedit - Mypage.html]

Update:

<pre>
<ul>

<a href="#" class="text-decoration-none text-danger"><li>
Fruits & Vegetables </li></a>

<a href="#" class="text-decoration-none text-danger"><li>
Foodgrain </li></a>

<a href="#" class="text-decoration-none text-danger"><li>
Beverages </li></a>

<a href="#" class="text-decoration-none text-danger"><li>
Personal care </li></a>

<a href="#" class="text-decoration-none text-danger"><li>
Snacks & Branded Foods </li></a>

</ul>
</pre>
| | In the '''2nd row''', we’ll set the red color to all the '''links.'''

Now we will replace the '''.text-reset''' '''class''' with '''.text-danger class'''.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Observe that the color of the '''links''' is now '''set''' to red.

Notice that the color of the '''links''' darkens when you move the cursor on them.

The color of '''links''' darkens only if we apply '''text color classes''' to '''links, '''not to''' text.'''
|-
| | Only narration
| | Next let’s learn about '''background color classes.'''
|-
| | Slide: Background Color Classes

background.png
| |
* '''Background color classes '''are used to color the background of an element.

Following are the '''background color classes''':

Now let’s understand them with examples.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:

<pre>

<div class="row bg-info">

<div class="col m-sm-4 text-center text-uppercase bg-light">

<h1 class="text-danger display-4"> Bharat Mart </h1>

</div></div>
</pre>
| | In the '''1st row''', add .'''bg-info class'''.

And in its column, add '''.bg-light class''' as shown here.

|-
| | [gedit - Mypage.html]

Update:

<pre>
<div class="row">

<div class="col-sm-3 order-sm-last pt-sm-5
border border-primary bg-light">

<ul>

<a href="#" class="text-decoration-none text-danger"><li>
Fruits & Vegetables </li></a>

<a href="#" class="text-decoration-none text-danger"><li>
Foodgrain </li></a>

<a href="#" class="text-decoration-none text-danger"><li>
Beverages </li></a>

<a href="#" class="text-decoration-none text-danger"><li>
Personal care </li></a>

<a href="#" class="text-decoration-none text-danger"><li>
Snacks & Branded Foods </li></a>

</ul></div>

<div class="col-sm-9 pt-sm-5 border border-primary bg-light">

<h3> Welcome to Online Grocery Shopping!! </h3>

<p class="font-italic"> Buy your essentials at the lowest price.
Choose from fresh produce to packaged goods and
get them delivered straight to your doorstep. Shop for Rs.
1000 and more to get FREE delivery. <p>
</div></div>
</pre>
| | In the '''2nd row''', add .'''bg-light class''' to both the columns as shown here.

|-
| | [gedit - Mypage.html]

Update:

<pre>
<div class="row justify-content-around align-items-start
bg-info" style="height: 160px;">

<div class="col-sm-3">

<h5> ABOUT BHARAT </h5>

<p class="font-italic"> About us <br> FAQ </p>

</div>

<div class="col-sm-3">

<h5> PAYMENT AND SHIPPING </h5>

<p class="font-italic"> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3">

<h5> CONTACT US </h5>

<p class="font-italic"> contact@bharat-online.com <br>
9000000001 </p>

</div></div>
</pre>
| | In the '''3rd row''', add '''.bg-info class''' as shown here.

|-
| | [gedit - Mypage.html]

Update:

<pre>
<div class="row bg-secondary">

<div class="col font-weight-bold">

<div class="mx-auto" style="width: 140px;"> Copyright- 2021
</div></div></div>
</pre>
| | In the '''4th row''', add '''.bg-secondary class''' as shown here.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Observe that we have successfully set the background colors to this '''HTML''' file.

In this manner, you can set different colors using '''Bootstrap color classes'''.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide: Summary

| | In this tutorial, we have learnt about '''classes''' which are used to '''color''':

* '''Borders'''
* '''Text'''
* '''Links '''and
* '''Background'''

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

* Open the '''Mypage.html''' file.

* In the '''4th''' '''row''', add a border and set its color using the '''.border-dark class.'''
* Save the file.

* Observe the output on the '''web browser.'''

|-
| | 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
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Typography-in-Bootstrap/English

2021-06-07T09:35:32Z

Nehasolanki: Created page with "'''Title of the script: '''Typography in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boot..."

'''Title of the script: '''Typography in Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Typography in Bootstrap, Text Alignment, Text Transform, Font Weight and Italic, Text Decoration, Reset Color, Display headings

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the Spoken Tutorial on '''“Typography in Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn how to use:

* '''Text Alignment'''
* '''Text Transform'''
* '''Font Weight and Italic'''
* '''Text Decoration'''
* '''Reset Color '''and

* '''Display headings'''

for styling and formatting text in '''Bootstrap'''.
|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

|-
| | Slide 4: Prerequisite

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS.'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Slide: Layout

Image1.png
| | In this tutorial, we will design a '''layout''' as shown here in '''Bootstrap'''.
|-
| | Slide: Text Alignment

[Image = left.png]

[Image = right.png]

[Image = center.png]

[Image = justify.png]
| | Let’s start with the '''text alignment'''.

Text can be aligned either to the:

* '''Left'''
* '''Right'''
* '''Center '''or
* '''Justify'''

|-
| | Slide: Text Alignment Classes
| | These are the available '''classes''' for them:

* '''.text-left'''
* '''.text-right'''
* '''.text-center'''
* '''.text-justify'''

|-
| |
| | Let’s use one of these '''classes''' in our '''layout'''.
|-
| | Point to Mypage.html & Mystyle.css in My-bootstrap folder

| | Locate the files '''Mypage.html''' and '''Mystyle.css''' in the '''My-bootstrap''' folder.

We will use '''Mypage.html''' and '''Mystyle.css files '''which we saved earlier''' '''for this demonstration.
|-
| | 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.

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

| | Notice that by default, the text is aligned to the left.

Let us change the '''text alignment''' of the first row to the center.
|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col m-sm-4 text-center">

<h1 class="text-danger"> Bharat Mart </h1>

</div>

</div>
</pre>
| | Add the '''.text-center class''' to the column of the first row 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 that the text of the first row is aligned to the center now.

Try the other '''text alignment classes''' on your own later, for your understanding.
|-
| | Slide: Text Alignment Classes with Breakpoints
| | Also try '''text-left, .text-right '''and''' .text-center classes''' with '''breakpoints''' as shown below.
|-
| | Slide: Text Transform
| | Next we will explore '''text transform'''.

Basically, it manages the capitalization of text.
|-
| | Slide: Text Transform Classes

Example:

uppercase.png

lowercase.png

capitalize.png

| | These are the '''classes''' for it:

* '''.text-uppercase''': It converts all the letters to uppercase
* '''.text-lowercase''': It converts all the letters to lowercase
* '''.text-capitalize''': It converts the first letter of each word to uppercase

Let us try one of these.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col m-sm-4 text-center text-uppercase">

<h1 class="text-danger"> Bharat Mart </h1>

</div>

</div>
</pre>
| | Add the '''.text-uppercase class''' to the column of the first row as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Observe the first row. We can see all the letters are converted to uppercase.

Try the other''' text transformation classes''' on your own later for your understanding.
|-
| | Slide: Font Weight
| | Next, let’s understand about '''Font Weight'''.

'''Font weight''' specifies how thick the font of the text should be.
|-
| | Slide: Font Weight Classes
| | Following are the '''classes''' for it:

* '''.font-weight-bold'''
* '''.font-weight-bolder'''
* '''.font-weight-normal'''
* '''.font-weight-light'''
* '''.font-weight-lighter'''

Let us try this.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col font-weight-bold">

<div class="mx-auto" style="width: 140px;
border: 2px solid green;">
Copyright- 2021</div>

</div>

</div>
</pre>
| | Add the '''.font-weight-bold class''' to the column of the last row as shown here.

In our code, we will increase the width of the '''block-level element '''to '''140px'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Observe the output.

The text is set to '''bold''' now.

Try the other '''font weight classes''' on your own later, for your understanding.
|-
| |
| | Let’s understand how to set the text to '''italic'''.
|-
| | Slide: Italic
| | '''.font-italic class''' is used to set the text to '''italic'''.

Let us try this.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<p class="font-italic"> Buy your essentials
at the lowest price. Choose from fresh produce
to packaged goods and get them delivered straight
to your doorstep. Shop for Rs.1000 and more to
get FREE delivery. <p>
</pre>
| | Add '''.font-italic class''' to the paragraph in the second row as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Now we can see that the text in the paragraph is set to '''italic'''.
|-
| | Slide: Text Decoration
| | Next we will learn about '''text decoration'''.
* '''.text-decoration-none class''' is used to remove decoration of the text.
* It is mostly used to remove the '''underline''' of a '''link'''.

|-
| | Switch to firefox
| | Switch to the '''browser'''.
|-
| | [Firefox]

| | Observe the '''links''' in the second row.

They are '''underlined''' when we hover the cursor over the words.

We can use '''.text-decoration-none''' to remove this '''underline, '''if we wish to.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<ul>

<a href="#" class="text-decoration-none"><li>
Fruits & Vegetables </li></a>

<a href="#" class="text-decoration-none"><li>
Foodgrain </li></a>

<a href="#" class="text-decoration-none"><li>
Beverages </li></a>

<a href="#" class="text-decoration-none" ><li>
Personal care </li></a>

<a href="#" class="text-decoration-none"><li>
Snacks & Branded Foods </li></a>

</ul>
</pre>
| | Add '''.text-decoration-none class''' to all the '''links''' in the second row as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Observe the second row.

The '''underline''' of the '''links''' are now no longer visible.
|-
| |
| | By default the color of the '''link''' is always set to blue.

But this can be changed to any other colour we like.
|-
| | Slide: Reset Color
| | '''.text-reset class''' is used to change or reset the colour of a text or '''link'''.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<ul>

<a href="#" class="text-decoration-none text-reset"><li>
Fruits & Vegetables </li></a>
<a href="#" class="text-decoration-none text-reset"><li>
Foodgrain </li></a>
<a href="#" class="text-decoration-none text-reset"><li>
Beverages </li></a>
<a href="#" class="text-decoration-none text-reset"><li>
Personal care </li></a>
<a href="#" class="text-decoration-none text-reset"><li>
Snacks & Branded Foods </li></a>

</ul>
</pre>
| |

Add the '''.text-reset class''' to the '''links''' as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | In the output, the color of the '''links''' are set to the default black colour.

It has inherited the color from its parent.
|-
| | Slide: Display Headings
| | Next, let’s understand '''display headings.'''

* They are used to make headings more prominent than normal headings.
* For example, they are slightly larger than normal headings'''.'''

|-
| | Slide: Display Headings Classes
* '''.display-1'''
* '''.display-2'''
* '''.display-3'''
* '''.display-4'''

| | Following are''' display heading classes:'''

|-
| | Slide: Display Headings - Example

[display.png]

Highlight h1 heading
| | Note the difference between '''h1''' '''heading''' and various other '''display heading classes.'''
|-
| | Only narration
| | Now let’s understand '''display heading classes''' with an example.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col m-sm-4 text-center text-uppercase">

<h1 class="text-danger display-4"> Bharat Mart </h1>

</div> </div>
</pre>
| |

Add the '''.display-4 class''' to the column of the first row as shown here.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Observe that now the '''heading''' is slightly larger than normal heading.

Try out the other '''heading classes''' and observe the differences.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide 6: Summary

| | In this tutorial, we have learnt how to use:

* '''Text Alignment'''
* '''Text Transform'''
* '''Font Weight and Italic'''
* '''Text Decoration'''
* '''Reset Color '''and
* '''Display headings'''

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

* Open the '''Mypage.html''' file

* In the '''3rd''' '''row''', set the text font of all the paragraphs to '''italic'''

* Save the file

* Observe the output on the '''web browser'''

|-
| | 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 the Ministry of Education (MoE), Govt. of India.
|-
| | Slide: Thanks
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap/English

2021-05-21T10:01:17Z

Nehasolanki:

'''Title of the script: '''Horizontal and Vertical Alignment Classes in Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Horizontal and Vertical Alignment Classes in Bootstrap, justify-content classes, align-items classes, align-self classes

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the Spoken Tutorial on '''“Horizontal and Vertical Alignment Classes in Bootstrap”'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn about:

* '''Horizontal alignment classes '''and
* '''Vertical alignment classes'''

for aligning columns in a row
|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

|-
| | Slide 4: Prerequisite

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS.'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Slide: Layout

Image1.png

Highlight 3rd row
| | In this tutorial, we will design a '''layout''' as shown here.

'''Bootstrap '''has various '''horizontal''' and '''vertical alignment classes'''.

Let’s learn how to implement '''horizontal''' and''' vertical alignment classes''' in the 3rd row.
|-
| | Slide: Horizontal Alignment Classes
| | First let’s understand '''horizontal alignment classes.'''

'''justify-content classes''' are used for '''horizontal alignment'''.

These are:
* '''.justify-content-start'''
* '''.justify-content-end'''
* '''.justify-content-center'''
* '''.justify-content-between'''
* '''.justify-content-around'''

|-
| | Slide: justify-content Classes

Image2.png

Highlight the image according to the narration
| | Now let’s understand these''' classes''' one by one.

* In '''.justify-content-start class, '''we see all columns shift to the start of the row
* In '''.justify-content-end class, '''all columns shift to the end of the row
* In '''.justify-content-center class, '''all columns shift to the center of the row
* Next '''class''' is '''.justify-content-between class.''' Here the extra space is equally divided in between all the columns of the row
* And in '''.justify-content-around class, '''every column has equal left and right space around them

|-
| |
| | Let’s use one of these '''classes''' in our '''layout'''.
|-
| | Point to Mypage.html & Mystyle.css in My-bootstrap folder

| | Locate the files '''Mypage.html''' and '''Mystyle.css''' in the '''My-bootstrap''' folder.

We will use '''Mypage.html''' and '''Mystyle.css''' files which we saved earlier for this demonstration.
|-
| | 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.

|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row" style="height: 160px;">

<div class="col-sm-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div>
</pre>
| | In the 3rd row, we have removed the '''order''' and '''offset classes''' from all the three columns.

And we have added some height to this row using the '''style attribute'''.

So we can see the '''horizontal alignment''' of columns very clearly.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in Firefox
| | Open the file '''Mypage.html''' in a '''web browser'''.
|-
| | [Firefox]

Highlight the output
| | Notice that '''order''' and '''offset''' have been removed from all columns of the 3rd row.

And the height of the row has increased.

Now let us see how we can add '''horizontal alignment class''' to the 3rd row.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Highlight:
<pre>
<div class="row justify-content-between" style="height: 160px;">

<div class="col-sm-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div>
</pre>
| | In the 3rd row, add''' .justify-content-between class '''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 3rd row.

The extra space is equally divided in between all the columns of this row.
|-
| | Only narration
| | You can try other '''horizontal classes''' later for your own understanding.
|-
| | Slide: Vertical Alignment Classes
| | Now let’s understand '''vertical alignment classes.'''
|-
| | Slide: Vertical Alignment Classes
| |
* '''align-items classes'''
* '''align-self classes'''

are used for '''vertical alignments'''
|-
| | Slide : align-items Classes
| | These are different types of''' align-items classes''':

* '''.align-items-start'''
* '''.align-items-end'''
* '''.align-items-center'''
* '''.align-items-baseline'''
* '''.align-items-stretch'''

|-
| | Slide : align-items Classes

Image3.png

Highlight 1

Highlight 2

Highlight 3

Highlight 4

Highlight 1,2,3,4

Highlight 5
| | Now let’s understand these''' classes''' one by one.

* In '''.align-items-start,''' columns are''' '''aligned to the top of the row
* In '''.align-items-end, '''columns are''' '''aligned to the bottom of the row
* In '''.align-items-center, '''columns are''' '''aligned to the center of the row
* And in '''.align-items-baseline, '''columns are aligned according to the first line

i.e baseline of every column

For the first 4 '''align-items classes''', the height of the column is adjusted according to the content.

* Lastly in '''.align-items-stretch, '''the column height is stretched to the height of the parent row.

|-
| |
| | Let’s use one of these '''classes''' in our '''layout'''.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Highlight:
<pre>
<div class="row justify-content-between align-items-end"
style="height: 160px;">

<div class="col-sm-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div>
</pre>
| | In the 3rd row, add''' .align-items-end class '''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 3rd row.

Now the height of all columns is adjusted according to the content in them.

And they are aligned from the bottom of the row.
|-
| | Only narration
| | You can try other '''align-items classes''' later for your own understanding.
|-
| | Slide: align-items Classes

Image3.png
| | We saw that '''align-items class''' is used to apply the same '''vertical alignment''' to all the columns.

|-
| | Slide: Different '''vertical alignment''' for different columns

Image4.png
| | But what if we want different vertical alignment for different columns?
|-
| | Slide : align-self Classes
| | This can be achieved by using '''align-self classes'''.

These are different types of '''align-self classes''':

* '''.align-self-start'''
* '''.align-self-end'''
* '''.align-self-center'''
* '''.align-self-baseline'''
* '''.align-self-stretch'''

These work the same like '''align-items classes '''but are applied to an individual column.
|-
| | Only narration
| | Now let’s understand these''' classes''' with examples.
|-
| | Slide : align-self classes

Image5.png
| | In this row, all columns have different '''vertical alignment classes'''.
|-
| |
| | Let’s use some of these '''classes''' in our '''layout'''.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Highlight:
<pre>
<div class="row justify-content-between" style="height: 160px;">

<div class="col-sm-3 align-self-start">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3 align-self-end">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div>
</pre>
| | In the 3rd row, remove .'''align-items-end class'''.

In the 1st column, add''' .align-self-start class.'''

And in the 3rd column, add''' .align-self-end class '''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 3rd row.

The height of 1st and 3rd columns are adjusted according to the content.

The 1st column is aligned to the top and the 3rd column is aligned to the bottom of the row.
|-
| | Only narration
| | You can try other '''align-self classes''' later for your own understanding.
|-
| | Slide: Horizontal and vertical alignment classes with breakpoints

| | '''Horizontal''' and '''vertical alignment classes''' can also be used with '''breakpoints''' as shown here.

|-
| | Only narration
| | You can try these classes later for your own understanding
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide 6: Summary

| | In this tutorial, we have learnt:

* '''Horizontal alignment classes '''and
* '''Vertical alignment classes'''

for aligning columns in a row
|-
| | Slide 8: Assignment

| | As an assignment-

* Open the '''Mypage.html''' file

* In the '''3rd''' '''row''':
** change the horizontal alignment class with '''.justify-content-around.'''
** add the '''vertical alignment class .align-items-start'''
** remove individual column '''vertical alignment classes'''

* Save both the files.

* Observe the output on the '''web browser.'''

|-
| | 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
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap/English

2021-05-11T15:15:36Z

Nehasolanki: Created page with "'''Title of the script: '''Horizontal and Vertical Alignment Classes in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhi..."

'''Title of the script: '''Horizontal and Vertical Alignment Classes in Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Horizontal and Vertical Alignment Classes in Bootstrap, justify-content classes, align-items classes, align-self classes

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the Spoken Tutorial on '''“Horizontal and Vertical Alignment Classes in Bootstrap”'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn about:

* '''Horizontal alignment classes '''and
* '''Vertical alignment classes'''

for aligning columns in a row
|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

|-
| | Slide 4: Prerequisite

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS.'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Slide: Layout

Image1.png

Highlight 3rd row
| | In this tutorial, we will design a '''layout''' as shown here.

'''Bootstrap '''has various '''horizontal''' and '''vertical alignment classes'''.

Let’s learn how to implement '''horizontal''' and''' vertical alignment classes''' in the 3rd row.
|-
| | Slide: Horizontal Alignment Classes
| | First let’s understand '''horizontal alignment classes.'''

'''justify-content classes''' are used for '''horizontal alignment'''.

These are:
* '''.justify-content-start'''
* '''.justify-content-end'''
* '''.justify-content-center'''
* '''.justify-content-between'''
* '''.justify-content-around'''

|-
| | Slide: justify-content Classes

Image2.png

Highlight the image according to the narration
| | Now let’s understand these''' classes''' one by one.

* In '''.justify-content-start class, '''we see''' '''all columns shift to the start of the row
* In''' .justify-content-end class, '''all columns shift to the end of the row
* In''' .justify-content-center class, '''all columns shift to the center of the row
* Next class is .'''justify-content-between class.''' Here the extra space is equally divided in between amongst all the columns of the row
* And in''' .justify-content-around class, '''every column has equal left and right space around them

|-
| |
| | Let’s use one of these '''classes''' in our '''layout'''.
|-
| | Point to Mypage.html & Mystyle.css in My-bootstrap folder

| | Locate the files '''Mypage.html''' and '''Mystyle.css''' in the '''My-bootstrap''' folder.

We will use '''Mypage.html''' and '''Mystyle.css files '''which we saved earlier''' '''for this demonstration.
|-
| | 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.

|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row" style="height: 160px;">

<div class="col-sm-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div>
</pre>
| | In the 3rd row, we have removed the '''order''' and '''offset classes''' from all the three columns.

And we have added some height to this row using the '''style attribute'''.

So we can see the '''horizontal alignment''' of columns very clearly.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in Firefox
| | Open the file '''Mypage.html''' in a '''web browser'''.
|-
| | [Firefox]

Highlight the output
| | Notice that '''order''' and '''offset''' have been removed from all columns of the 3rd row.

And the height of the row has increased.

Now let us see how we can add '''horizontal alignment class''' to the 3rd row'''.'''
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Highlight:
<pre>
<div class="row justify-content-between" style="height: 160px;">

<div class="col-sm-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div>
</pre>
| | In the 3rd row, add''' .justify-content-between class '''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 3rd row.

The extra space is equally divided in between amongst all the columns of this row.
|-
| | Only narration
| | You can try other '''horizontal classes''' later for your own understanding.
|-
| | Slide: Vertical Alignment Classes
| | Now let’s understand '''vertical alignment classes.'''
|-
| | Slide: Vertical Alignment Classes
| |
* '''align-items classes'''
* '''align-self classes'''

are used for '''vertical alignments'''
|-
| | Slide : align-items Classes
| | These are different types of''' align-items classes''':

* '''.align-items-start'''
* '''.align-items-end'''
* '''.align-items-center'''
* '''.align-items-baseline'''
* '''.align-items-stretch'''

|-
| | Slide : align-items Classes

Image3.png

Highlight 1

Highlight 2

Highlight 3

Highlight 4

Highlight 1,2,3,4

Highlight 5
| | Now let’s understand these''' classes''' one by one.

* In '''.align-items-start,''' columns are''' '''aligned from the top of the row
* In '''.align-items-end, '''columns are''' '''aligned from the bottom of the row
* In '''.align-items-center, '''columns are''' '''aligned to the center of the row
* And in '''.align-items-baseline, '''columns are aligned according to the first line

i.e baseline of every column

For the first 4 '''align-items classes''', the height of the column is adjusted according to the content.

* Lastly in '''.align-items-stretch, '''the column height is stretched to the height of the parent row.

|-
| |
| | Let’s use one of these '''classes''' in our '''layout'''.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Highlight:
<pre>
<div class="row justify-content-between align-items-end"
style="height: 160px;">

<div class="col-sm-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div>
</pre>
| | In the 3rd row, add''' .align-items-end class '''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 3rd row.

Now the height of all columns is adjusted according to the content in them.

And they are aligned from the bottom of the row.
|-
| | Only narration
| | You can try other '''align-items classes''' later for your own understanding.
|-
| | Slide: align-items Classes

Image3.png
| | We saw that '''align-items class''' is used to apply the same '''vertical alignment''' to all the columns.

|-
| | Slide: Different '''vertical alignment''' for different columns

Image4.png
| | But what if we want different vertical alignment for different columns?
|-
| | Slide : align-self Classes
| | This can be achieved by using '''align-self classes'''.

These are different types of '''align-self classes''':

* '''.align-self-start'''
* '''.align-self-end'''
* '''.align-self-center'''
* '''.align-self-baseline'''
* '''.align-self-stretch'''

These work the same like '''align-items classes '''but are applied to an individual column.
|-
| | Only narration
| | Now let’s understand these''' classes''' with examples.
|-
| | Slide : align-self classes

Image5.png
| | In this row, all columns have different '''vertical alignment classes'''.
|-
| |
| | Let’s use some of these '''classes''' in our '''layout'''.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Highlight:
<pre>
<div class="row justify-content-between" style="height: 160px;">

<div class="col-sm-3 align-self-start">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3 align-self-end">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div>
</pre>
| | In the 3rd row, remove .'''align-items-end class'''.

In the 1st column, add''' .align-self-start class.'''

And in the 3rd column, add''' .align-self-end class '''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 3rd row.

The height of 1st and 3rd columns are adjusted according to the content.

The 1st column is aligned to the top and the 3rd column is aligned to the bottom of the row.
|-
| | Only narration
| | You can try other '''align-self classes''' later for your own understanding.
|-
| | Slide: Horizontal and vertical alignment classes with breakpoints

| | '''Horizontal''' and '''vertical alignment classes''' can also be used with '''breakpoints''' as shown here.

* '''justify-content-[breakpoint]-[option]'''
* '''align-items-[breakpoint]-[option]'''
* '''align-self-[breakpoint]-[option]'''

|-
| | Only narration
| | You can try these classes later for your own understanding
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide 6: Summary

| | In this tutorial, we have learnt:

* '''Horizontal alignment classes '''and
* '''Vertical alignment classes'''

for aligning columns in a row
|-
| | Slide 8: Assignment

| | As an assignment-

* Open the '''Mypage.html''' file

* In the '''3rd''' '''row''':
** change the horizontal alignment class with '''.justify-content-around.'''
** add the '''vertical alignment class .align-items-start'''
** remove individual column '''vertical alignment classes'''

* Save both the files.

* Observe the output on the '''web browser.'''

|-
| | 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
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Margin-and-Padding-Classes-in-Bootstrap/English

2021-04-20T10:33:13Z

Nehasolanki: Created page with "'''Title of the script: '''Margin and Padding Classes in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''K..."

'''Title of the script: '''Margin and Padding Classes in Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Margin and Padding Classes in Bootstrap, Margin Class, Padding Class

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the Spoken Tutorial on '''“Margin and Padding Classes in Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn about:

* '''Margin classes''' and
* '''Padding classes'''

while designing a layout
|-
| | Slide 3:

System Requirements

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

|-
| | Slide 4: Prerequisite

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Slide: Layout

Image1.png

| | In this tutorial, we will design a '''layout''' as shown here.

We will see how to implement '''margin''' to the '''column''' of '''1st row''' and '''last row'''.

And '''padding''' to the '''columns''' of the '''2nd row'''.
|-
| | Slide: Margin & Padding

| |
* '''Margin''' adds whitespace outside the border
* '''Padding '''adds whitespace inside the border
* '''Bootstrap '''has various '''margin''' and '''padding classes'''.

|-
| | Slide: Margin & Padding Classes- Format
| |
* User has to follow the below format for naming the '''margin''' and '''padding''' '''classes'''

|-
| | Slide: Property

[Table1]
| | Here, '''property''' can be either '''m''' to set '''margin''' or '''p''' to set '''padding'''.
|-
| | Slide: Sides

[Table2]
| | '''Sides''' specifies on which side of the element the '''margin''' or '''padding''' will be added.

'''Sides '''should be one of the following.
|-
| | Slide: Size

[Table3]

| | '''Size''' specifies how much '''margin''' or '''padding''' will be added.

'''Size '''should be one of the following.
|-
| | Only narration
| | Now let’s understand all these with some examples.
|-
| | Point to Mypage.html & Mystyle.css in My-bootstrap folder

| | Locate the files '''Mypage.html''' and '''Mystyle.css''' in the '''My-bootstrap''' folder.

We will use '''Mypage.html''' and '''Mystyle.css files '''which we saved earlier''' '''for this demonstration.
|-
| | Slide 5: 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.

|-
| | Open the file in text editor
| | Open the file '''Mypage.html''' in the '''text editor.'''

First we will see how to use the''' margin classes'''.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col m-4">

<h1 class="text-danger"> Bharat Mart </h1>

</div>

</div>
</pre>
| | In the '''1st row''', for column add''' .m-4''' class as shown here.

Here the format is specified with '''Property''' as '''m''', '''sides''' as '''blank '''and '''size''' as '''4'''.

This''' class''' will set the '''margin '''of '''1.5rem '''on all 4 sides of the column.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Point to Mypage.html Downloads folder

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

Highlight the output
| | Now the '''margin''' is added to all 4 sides of the column of the '''1st row'''.
|-
| | Text Box on the screen[

1.5 X Browser's default font size]
| | Let’s check how much '''margin''' is added.

'''Margin''' added is '''1.5''' multiplied by the '''browser's''' default font size.
|-
| |
| | Let’s find out what is the '''browser's''' default font size.
|-
| | Open '''Menu'''>> click on '''Preferences'''

Under''' Font and Color'''>> point to''' 16px '''

Text Box on the screen[

1.5 X 16px = 24px]
| | Open '''Menu'''at top right of this browser.

Click on '''Preferences.'''

Under''' Font and Color,''' we can see that '''16px '''is the '''browser's''' default font size.

So the '''margin''' added is '''1.5''' multiplied by '''16px''' equals to '''24px'''.
|-
| |
| | Next, let’s see how this page behaves in '''responsive mode''' after '''margin class'''.
|-
| | Textbox [Press Ctrl+Shift+C]

Right click >> Inspect Element
| | Press '''Ctrl+Shift+C '''or right click on the page and select '''“Inspect Element”.'''

The '''Inspect Element window '''opens.
|-
| | Textbox [Press Ctrl+Shift+M]

Click on Responsive Design Mode
| | Press '''Ctrl+Shift+M '''or click on the '''“Responsive Design Mode” '''at the top right of this window.
|-
| |
| | Now the page is in '''responsive mode''' and we can change the size of the screen.
|-
| | Using mouse, by dragging change the size
| | By dragging the right border, we’ll increase and decrease the width of the screen.

Observe that there is no change in the '''margin'''.

So we can say that whatever is the size of screen, '''margin''' is added.

Lets see one more example of margin class.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Type:
<pre>
<div class="row">

<div class="col">

<div style="width: 120px; border: 2px solid green;">

Copyright- 2021

</div>

</div>

</div>
</pre>
| | We’ll add one more '''row''' at the end.

Type the code as shown.

We have created a row, with one column inside it.

In the column we have created a '''block.'''

Using '''style''' attributes, we have set some '''inline styles''' like '''width''' and '''border'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output

| | We can observe a new row is added at the end.

Using '''margin classes''', we can horizontally center this '''block-level '''element.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Type:
<pre>
<div class="row">

<div class="col">

<div class="mx-auto" style="width: 120px; border: 2px solid green;">

Copyright- 2021

</div>

</div>

</div>
</pre>
| | Add the '''.mx-auto''' '''margin class''' as shown here.

Here the format is specified with '''Property''' as '''m''', '''sides''' as '''x '''and''' size '''as''' auto'''

This''' class''' will set the '''auto''' '''margin '''on '''left''' and '''right''' sides of the '''block'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the last '''row''', now the '''block''' is horizontally centered.

This is because the '''margin''' is added to the '''left''' and '''right''' sides of the '''block.'''

Please try other '''margin classes''' on your own.

Next, let’s see '''padding classes.'''
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col-sm-3 order-sm-last pt-5">

<ul>

<a href="#"><li> Fruits & Vegetables </li></a>

<a href="#"><li> Foodgrain </li></a>

<a href="#"><li> Beverages </li></a>

<a href="#"><li> Personal care </li></a>

<a href="#"><li> Snacks & Branded Foods </li></a>

</ul>

</div>

<div class="col-sm-9 pt-5">

<h3> Welcome to Online Grocery Shopping!! </h3>

<p> Buy your essentials at the lowest price.
Choose from fresh produce to packaged goods
and get them delivered straight to your doorstep.
Shop for Rs.1000 and more to get FREE delivery. <p>

</div>

</div>
</pre>
| | In the '''2nd row''', for both the '''columns''', add '''.pt-5 class''' as shown here.

Here the format is specified with '''Property''' as '''p''', '''sides''' as '''t '''and''' size '''as''' 5'''

This '''class''' will set '''padding''' of '''3rem''' at the '''top''' of the columns.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Text Box on the screen-

[Browser's default font size is 16px.

3 X 16px = 48px]

Using mouse, by dragging change the size

| |

We can observe that''' padding''' is added at the top of both the columns.

Here, '''browser’s''' default font size is 16px, so '''3rem''' is 3 multiplied by '''16px''' which is '''48px.'''

Hence a '''padding''' of '''48px''' is added at the top.

Observe that by default column has some '''left''' and '''right padding'''.

By dragging the right border, we’ll increase and decrease the width of the screen.

Observe that the top '''padding''' is still added to the columns.

So, whatever is the size of the screen, the '''padding''' is added.

We can use '''margin''' and '''padding classes''' with a '''breakpoint'''.
|-
| | Slide: Margin and Padding classes with Breakpoints

| | Users have to follow these formats for naming '''margin''' and '''padding''' '''classes''' with '''Breakpoints'''.

* This is the format for '''xs''' '''breakpoint'''
* This is the format for '''sm, md, lg '''&''' xl breakpoints'''

|-
| |
| | Let’s use '''padding class''' with '''breakpoints'''.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col-sm-3 order-sm-last pt-sm-5">

<ul>

<a href="#"><li> Fruits & Vegetables </li></a>

<a href="#"><li> Foodgrain </li></a>

<a href="#"><li> Beverages </li></a>

<a href="#"><li> Personal care </li></a>

<a href="#"><li> Snacks & Branded Foods </li></a>

</ul>

</div>

<div class="col-sm-9 pt-sm-5">

<h3> Welcome to Online Grocery Shopping!! </h3>

<p> Buy your essentials at the lowest price.
Choose from fresh produce to packaged goods
and get them delivered straight to your doorstep.
Shop for Rs.1000 and more to get FREE delivery. <p>

</div>

</div>
</pre>
| | In the '''2nd row''', for both the '''columns''', change the '''padding''' '''class''' to '''.pt-sm-5''' as shown here.

Here, format is specified with '''Property''' as '''p''', '''sides''' as '''t, breakpoint '''as '''sm '''and''' size '''as '''5.'''

This '''class''' adds a '''padding''' of '''3rem '''to the '''top''' for screen size '''Small''' and above.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Using mouse, by dragging change the size

| | Observe that now '''padding''' is not added to the columns.

This is because the width of the screen is below '''576px.'''

By dragging the right border, we’ll increase the width of the screen to above '''576px.'''

Observe that now '''padding''' is added to the columns.

So we can conclude that '''padding''' is added for screen size '''Small''' and above.

You can try other '''padding classes''' on your own.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide 6: Summary

| | In this tutorial, we have learnt about:

* '''Margin classes''' and
* '''Padding classes'''

while designing a '''layout'''
|-
| | Slide 8: Assignment
| | As an assignment-

* Open the '''Mypage.html''' file
* For the '''column''' of '''1st row '''change the '''margin class''' to '''.m-sm-4.'''
* Save both the files.
* Observe the output on the '''web browser.'''

|-
| | 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
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Order-and-Offset-Classes-in-Bootstrap/English

2021-04-16T05:53:06Z

Nehasolanki: Created page with "'''Title of the script: '''Order and Offset Classes in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Key..."

'''Title of the script: '''Order and Offset Classes in Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Order and Offset Classes in Bootstrap, Order class, Offset''' '''class

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the Spoken Tutorial on '''“Order and Offset classes in Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn about:

* '''Order classes''' and
* '''Offset classes'''

while designing a layout
|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using:

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

|-
| | Slide 4: Prerequisite

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Slide: Layout

Image1.png

Highlight 2nd and 3rd rows
| | In this tutorial, we will design a '''layout''' as shown here.

We will see how to implement '''order''' and '''offset''' '''classes''' to the columns of 2nd & 3rd rows.
|-
| | Slide: Order Classes
| | Let’s start with '''order classes'''.

* '''Order''' '''classes''' are used to manage the visual order of the '''HTML''' elements.
* Following are the '''order classes''':
** '''.order-first: '''sets the visual order to first
** .'''order-last: '''sets the visual order to last
** '''.order-*:''' sets the visual order by grid numbers from 0 to 12.

|-
| | Slide: Order Classes with Breakpoints

table1.png
| | '''Order classes '''are also set with '''breakpoints'''.

Following are the''' .order''' '''classes''' for different '''breakpoints'''.
|-
| | Only narration
| | Let’s understand '''.order classes''' with an example.
|-
| | Point to Mypage.html & Mystyle.css in My-bootstrap folder

| | Locate the files '''Mypage.html''' and '''Mystyle.css''' in the '''My-bootstrap''' folder.

We will use '''Mypage.html''' and '''Mystyle.css files '''which we saved earlier''' '''for this demonstration.
|-
| | Slide 5: 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.

|-
| | Point to Mypage.html in My-bootstrap folder

Open the file in text editor
| | Open the file '''Mypage.html''' in the '''text editor.'''

|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col-sm-3 order-sm-last">

<ul>

<a href="#"><li> Fruits & Vegetables </li></a>

<a href="#"><li> Foodgrain </li></a>

<a href="#"><li> Beverages </li></a>

<a href="#"><li> Personal care </li></a>

<a href="#"><li> Snacks & Branded Foods </li></a>

</ul>

</div>

<div class="col-sm-9">

<h3> Welcome to Online Grocery Shopping!! </h3>

<p> Buy your essentials at the lowest price.
Choose from fresh produce to packaged goods
and get them delivered straight to your doorstep.
Shop for Rs.1000 and more to get FREE delivery. <p>

</div>

</div>

<div class="row">

<div class="col-sm-3 order-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3 order-2">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3 order-1">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div>

</div>
</pre>
| | First we will add the '''order class''' in this code.

For the 2nd row 1st column, add '''order-sm-last''' '''class''' as shown.

'''sm '''specifies the '''Small''' screen size.

This will set the visual order of the first column to the last.

Next we’ll set the '''order class''' for the 3rd row which contains 3 columns as shown.

i.e 1st column with '''order-3''' '''class'''

2nd column with '''order-2''' '''class'''

3rd column with '''order-1''' '''class'''

Here we have changed the visual order to 3, 2 and 1.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Point to Mypage.html in the My-bootstrap folder

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

|-
| | [Firefox]

Textbox [Press Ctrl+Shift+C]</div>

Right click >> Inspect Element

Textbox [Press Ctrl+Shift+M]</div>

Click on Responsive Design Mode

Using mouse, by dragging change the size

| | In the 3rd row, we see that the visual order of the columns has changed accordingly.

That is, the 1st column became the 3rd and 3rd column became 1st.

In the 2nd row, the visual order of the 1st column which consists of links is moved to last.

Let’s see how this page behaves in responsive mode after using '''order class'''.

Press '''Ctrl+Shift+C '''or right-click on the page and select '''“Inspect Element”.'''

The '''Inspect Element window '''opens.

Press '''Ctrl+Shift+M '''or click on the '''“Responsive Design Mode” '''at the bottom right.

Now the page is in '''responsive mode''', so we can change the size of the screen.

By dragging the right border, we’ll decrease the width of the screen to below '''576px.'''

Observe that now the column that consists of '''links,''' is at the first in this row.
|-
| |
| | So we can conclude that its '''order''' is set to last for screen size '''Small''' and above.

You can also try '''.order''' '''classes''' with other '''breakpoints'''.
|-
| |
| | Next we’ll learn about '''offset classes'''.
|-
| | Slide: Offset Classes
| |
* '''Offset''' '''classes''' are used to increase the left margin of the '''HTML''' elements.
* The class''' .offset-*''' increase the left margin by * grid columns
* Here, '''<nowiki>*</nowiki>''' represents any grid number between 1 to 11.

|-
| | Only narration
| | Let’s understand '''.offset classes''' with an example.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file in the '''text editor'''.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col-sm-3 order-3 offset-1">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3 order-2 offset-1">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3 order-1 offset-1">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div>

</div>
</pre>
| | In the 3rd row, add the''' offset-1''' '''class''' to all the columns, as shown.

Here 1 represents 1 grid column and this '''class''' provides the left margin by default.

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

Using mouse, by dragging change the size
| | We see that the margin of 1 grid column is added to the left of each of the three columns.

So we can say that each column has shifted to the right by 1 grid column.

By dragging the right border, we will increase the width of the screen.

At every screen size, '''offset''' remains the same.
|-
| | Slide: Offset Class with Breakpoints

table2.png
| | '''Offset classes''' can also be set with '''breakpoints'''.

Following are the '''.offset''' '''classes''' for different '''breakpoints'''.
|-
| | Only narration
| | Now let’s understand this with an example.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:
<pre>
<div class="row">

<div class="col-sm-3 order-3 offset-sm-1">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-sm-3 order-2 offset-sm-1">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-sm-3 order-1 offset-sm-1">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div>

</div>
</pre>
| | We will look for '''Small breakpoint.'''

In the 3rd row, update the '''offset class''' for all the columns to '''offset-sm-1''' as shown.

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

Using mouse, by dragging change the size

| | Observe that the margin of 1 grid column is set before all the three columns.

By dragging the right border, we’ll decrease the width of the screen to below '''576px.'''

Now the margin of 1 grid column is not set.

So we can say that the '''offset''' is set for screen size '''Small '''and above.

You can also try '''.offset''' '''class''' with other '''breakpoints'''.
|-
| |
| | This is the final '''layout''' which we have designed using '''order''' and '''offset''' '''classes'''.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide 6: Summary

| | In this tutorial, we have learnt about:

* '''Order classes''' and
* '''Offset classes'''

while designing a '''layout'''
|-
| | Slide 8: Assignment

| | Do the below assignment-

* In '''MyPage.html '''file, change the '''order class''' for '''3rd row''' with:
** '''.order-sm-3 '''for '''1st column'''
** '''.order-sm-2 '''for '''2nd column'''
** '''.order-sm-1''' for '''3rd column'''
* Save both the files.
* Observe the output on the '''web browser'''

|-
| | 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
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Grid-System-in-Bootstrap/English

2021-04-07T10:07:18Z

Nehasolanki: Created page with "'''Title of the script: '''Grid System in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boo..."

'''Title of the script: '''Grid System in Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Row class, Column class, Column class with breakpoints.

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the Spoken Tutorial on '''“Grid System in Bootstrap”'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn about:

* '''Row class'''
* '''Column class'''
* '''Column class with breakpoints'''
* '''12 Column class'''
* '''12 Column class with breakpoints'''

|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor '''and
* '''Firefox web browser'''

|-
| | Slide 4: Prerequisite

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS'''.
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Slide: Grid System

Image1.png

Highlight container

Highlight rows

Highlight columns
| | '''Grid system''' uses a '''container, row''' and '''column''' in series.

We will create a '''layout''' as shown here at the end of this tutorial.

First, a '''container''' is created using '''.container-lg class'''.

Inside this, '''rows''' are created using '''.row class'''.

Inside the '''row, columns''' are created using '''column classes.'''

'''Row''' is used as a wrapper for '''columns'''.

In this '''layout''', the 1st '''row''' has 1 '''column''', the 2nd '''row''' has 2 '''columns''' and the 3rd row has 3 '''columns'''.

Let us see how to create this '''website layout'''.
|-
| | Point to Mypage.html & Mystyle.css in My-bootstrap folder

| | Locate the files '''Mypage.html''' and '''Mystyle.css''' in the '''My-bootstrap''' folder.

We will use '''Mypage.html''' and '''Mystyle.css files '''which we saved earlier''' '''for this demonstration.
|-
| | Slide 5: 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.

|-
| | Point to Mypage.html in My-bootstrap folder

Open the file in text editor
| | Open the file '''Mypage.html''' in the '''text editor.'''

Let us first see how to use the''' .row class'''.

|-
| | [gedit - Mypage.html]

Update:

<nowiki><div class="row"> Header </div></nowiki>

<nowiki><div class="row"> Content </div></nowiki>

<nowiki><div class="row"> Footer </div></nowiki>
| | Replace the '''<nowiki><h1> tag</nowiki>''' with the code as shown here.

Inside the '''container''', there are three '''<nowiki><div></nowiki>''' sections with '''row class'''.

Each section represents''' Header, Content '''and''' Footer''' for the '''web page.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Point to '''Mystyle.css''' in My-bootstrap folder

Open Mystyle.css
| | Let’s open the file '''Mystyle.css''' in the '''text editor'''.

|-
| | [gedit - Mystyle.css]

Type:

.row {border: 3px solid orange;}
| | After the''' .container-lg class''', type the code as shown.

For better clarity, we have set a '''3 pixel solid orange border '''for '''.row class'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Point to Mypage.html in the My-bootstrap folder

Open Mypage.html in Firefox
| | Open the file '''Mypage.html''' in a '''web browser'''.
|-
| | [Firefox]
| | We see that 3 '''rows''' are added to the '''page''' which is defined in '''bootstrap.css'''.
|-
| | Textbox [Press Ctrl+Shift+C]

Right click >> Inspect Element
| | Press '''Ctrl+Shift+C '''or right click on the page and select '''“Inspect Element”'''

'''Inspect Element window '''opens.
|-
| | Textbox [Press Ctrl+Shift+M]

Click on Responsive Design Mode
| | Press '''Ctrl+Shift+M '''or Click on the '''“Responsive Design Mode” '''at the top right of this window.

Now the page is in '''responsive mode'''.
|-
| | Using mouse, drag to change the size
| | Let’s drag the right border, and increase and decrease the size of the screen.

We see that the width of the '''rows''' also changes as per the size of the '''container'''.
|-
| |
| | Next we’ll learn about '''column class.'''
|-
| | Slide: Column Class
| |
* '''.col''' '''class''' is used to create '''columns''' of equal width.
* '''.col-auto class''' is used to create '''columns''' that have width according to the content inside it.

Let's see how to use '''column class''' with an example.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:

<pre><div class="container-lg">

<div class="row">

<div class="col">

<h1 class="text-danger"> Bharat Mart </h1>

</div></div>

<div class="row">

<div class="col">

<ul>

<a href="#"><li> Fruits & Vegetables </li></a>

<a href="#"><li> Foodgrain </li></a>

<a href="#"><li> Beverages </li></a>

<a href="#"><li> Personal care </li></a>

<a href="#"><li> Snacks & Branded Foods </li></a>

</ul></div>

<div class="col">

<h3> Welcome to Online Grocery Shopping!! </h3>

<p> Buy your essentials at the lowest price.
Choose from fresh produce to packaged goods
and get them delivered straight to your doorstep.
Shop for Rs.1000 and more to get FREE delivery. <p>

</div></div>

<div class="row">

<div class="col">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-auto">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div></div></pre>
| | Update the '''container''' section''' '''as shown here.

For the 1st '''row,''' we have created a single '''column''' using '''.col class''' which has a '''heading'''.

For the 2nd '''row,''' we have created two equal width '''columns''' using '''.col class'''.

The 1st '''column''' has a list and the 2nd '''column''' has some content.

For the 3rd '''row,''' we have created three '''columns''' with some content.

We have used '''.co'''l '''class''' for 1st and 3rd '''columns''', and '''.col-auto''' '''class''' for 2nd '''column'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to Mystyle.css
| | Switch to the '''Mystyle.css''' file.
|-
| | [gedit - Mystyle.css]

Type:

.col {border: 2px solid navy;}

.col-auto {border: 5px solid navy;}
| | Next to the .'''row class''', type the '''column classes''' as shown here.

For better clarity, we have set a '''2 pixel solid navy border''' for''' .col class'''

And '''5 pixel solid navy border '''for''' .col-auto class'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Point as per the narration
| | In this '''layout''', the 1st '''row''' has a single '''column''' with '''heading'''.

The 2nd '''row''' has two '''columns''' with equal width.

The 3rd '''row''' has three '''columns'''.

In the 2nd '''column,''' width is set according to the content inside it.

The remaining space is equally divided between 1st and 3rd '''columns'''.
|-
| | Using mouse, drag to change the size
| | By dragging the right border, we’ll increase and decrease the width of the screen.

Observe that the width of the '''columns''' also changes as per the size of the '''container'''.
|-
| | Slide: Column Class with Breakpoints

table1.png
| | We can also create '''column class''' with '''breakpoints'''.

This table shows the '''.col classes''' for different '''breakpoints'''.

They have '''100%''' width until the '''breakpoint''' is reached.
|-
| | Slide: Column Class with Breakpoints

table2.png
| | Similarly,''' '''these are the '''.col-auto classes''' for different '''breakpoints'''.

You can try these '''classes''' on your own.
|-
| | Slide: 12 Column Class
| | Next, we’ll learn how to create unequal width '''columns''' using a 12''' column class'''.

* A '''row''' is divided into 12''' '''equal width '''columns'''.
* '''.col-{*}''' '''class''' is used to create '''columns''' of equal and unequal widths.
* '''<nowiki>*</nowiki>''' represents the number of '''columns''' out of 12.

|-
| | Slide: 12 Column Class - Example

Example1.png

Example2.png

Example3.png
| | Few '''columns''' can be combined to create a single '''column'''.

For example, '''.col-6''' '''class''' is used to divide this row into two equal '''columns'''.

In this case, '''.col-7 '''and''' .col-5''' '''classes''' are used to divide this row into two unequal '''columns'''.

Here '''.col-3, .col-4 '''&''' .col-5''' '''classes''' are used to divide this '''row''' into 3 unequal '''columns'''.

Notice that the sum of no. of '''columns''' should not be greater than 12.
|-
| | Switch to Mypage.html
| | Switch to the''' Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:

<pre><div class="row">

<div class="col-3">

<ul>

<a href="#"><li> Fruits & Vegetables </li></a>

<a href="#"><li> Foodgrain </li></a>

<a href="#"><li> Beverages </li></a>

<a href="#"><li> Personal care </li></a>

<a href="#"><li> Snacks & Branded Foods </li></a>

</ul></div>

<div class="col-9">

<h3> Welcome to Online Grocery Shopping!! </h3>

<p> Buy your essentials at the lowest price.
Choose from fresh produce to packaged goods
and get them delivered straight to your doorstep.
Shop for Rs.1000 and more to get FREE delivery. <p>

</div></div>

<div class="row">

<div class="col-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-3">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div></pre>
| | In the 2nd '''row''',for the 1st '''column''' change the '''column class''' to '''col-3.'''

For the 2nd '''column''' change the '''column class''' to '''col-9'''.

For the 3rd '''row''', change all the three '''column classes''' to '''col-3.'''

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to Mystyle.css
| | Switch to the '''Mystyle.css''' file.
|-
| | [gedit - Mystyle.css]

Update:

.col-3, .col-9 {border: 2px dotted navy;}
| | Next to the '''.col class''', update the '''column classes''' as shown here.

For better clarity, we have set a '''2 pixel dotted navy border''' for '''.col-3 '''& '''.col-9''' '''classes'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.

Let us see the changes in the '''layout'''.
|-
| | [Firefox]

Using mouse, by dragging change the size
| | Notice that the 2nd '''row''' has unequal width '''columns''' of grid 3 and 9.

And the 3rd '''row''' has equal width '''columns''', each of grid 3.

By dragging the right border, we’ll increase and decrease the width of the screen.

We see that the width of the '''columns''' also changes as per the size of the '''container'''.

Note that the ratio of width of '''columns''' i.e 1:3 for 2nd row & 1:1:1 for 3rd '''row''' remains constant.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:

<pre><div class="col-10">

<h3> Welcome to Online Grocery Shopping!! </h3>

<p> Buy your essentials at the lowest price.
Choose from fresh produce to packaged goods and
get them delivered straight to your doorstep.
Shop for Rs.1000 and more to get FREE delivery.
<p></div></pre>
| | What happens if the sum of no. '''columns''' is greater than 12?

Let’s check.

For the 2nd''' row''', change the 2nd '''column''' class to '''col-10'''

Notice that now the sum of no. of '''columns''' is 3+10=13, which is greater than 12.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to Mystyle.css
| | Switch to the '''Mystyle.css''' file.
|-
| | [gedit - Mystyle.css]

Update:

.col-3, .col-10 {border: 2px dotted navy;}
| | Update the '''class''' as shown here

For better clarity, we have set a '''2 pixel dotted navy border '''for '''.col-10 column class'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Now the 2nd '''column''' is shifted to the next '''row'''.

This is because space is not enough for it.
|-
| | Slide: 12 Column Class with Breakpoints

table3.png
| | We can also create a 12 '''column class''' with '''breakpoints'''.

Following are the 12 '''column classes''' for different '''breakpoints'''.

They have '''100%''' width until the '''breakpoint''' is reached.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Update:

<pre><div class="row">

<div class="col-md-3">

<ul>

<a href="#"><li> Fruits & Vegetables </li></a>

<a href="#"><li> Foodgrain </li></a>

<a href="#"><li> Beverages </li></a>

<a href="#"><li> Personal care </li></a>

<a href="#"><li> Snacks & Branded Foods </li></a>

</ul></div>

<div class="col-md-9">

<h3> Welcome to Online Grocery Shopping!! </h3>

<p> Buy your essentials at the lowest price.
Choose from fresh produce to packaged goods and
get them delivered straight to your doorstep.
Shop for Rs.1000 and more to get FREE delivery. <p>

</div></div>

<div class="row">

<div class="col-md-3">

<h5> ABOUT BHARAT </h5>

<p> About us <br> FAQ </p>

</div>

<div class="col-md-3">

<h5> PAYMENT AND SHIPPING </h5>

<p> Payment Methods <br> Shipping Policy </p>

</div>

<div class="col-md-3">

<h5> CONTACT US </h5>

<p> contact@bharat-online.com <br> 9000000001 </p>

</div></div></pre>
| | Now we’ll see how this '''class''' behaves for '''Medium''' screen size.

In the 2nd '''row''', for the 1st '''column''' change the '''column class''' to '''col-md-3.'''

For the 2nd '''column''' change the '''column class''' to '''col-md-9'''.

For the 3rd '''row''', change the all three '''column classes''' to '''col-md-3'''.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to Mystyle.css
| | Switch to the '''Mystyle.css''' file.
|-
| | [gedit - Mystyle.css]

Update:

.col-md-3, .col-md-9 {border: 2px dashed navy;}
| | Next to the '''.col class''', update the '''column classes''' as shown here.

We have set a '''2 pixel dashed navy border''' for '''.col-md-3''' and '''.col-md-9 column classes'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Using mouse, by dragging change the size

| |

By dragging the right border, we’ll decrease the width of the screen to below '''768px.'''

Now each '''column''' takes 100% width.
|-
| | Using mouse, by dragging change the size
| | Let’s increase the width of the screen to '''768px '''or above.

Now the '''columns''' of 2nd and 3rd '''row''' are in 1:3 and 1:1:1 ratio respectively.

So the '''column''' has '''100%''' width until the''' Medium breakpoint''' is reached.
|-
| |
| | You can also try a 12 '''column class''' with other '''breakpoints'''.

In this way we can create '''responsive website layouts''' with '''Bootstrap'''.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide 6: Summary

| | In this tutorial, we have learnt:

* '''Row class'''
* '''Column class'''
* '''Column class with breakpoints'''
* '''12 Column class'''
* '''12 Column class with breakpoints'''

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

* Open the '''Mypage.html''' file.
* For '''2nd''' '''row''' change the '''column class''' to
** '''.col-sm-3 '''for '''1st column.'''
** '''.col-sm-9 '''for '''2nd column.'''
* For '''3rd''' '''row''' change all the '''column class''' to .'''col-sm-3.'''
* Open the '''Mystyle.css''' file.
* Set '''2px solid navy border''' for '''.col-sm-3 '''and''' .col-sm-9 classes.'''
* Save both the files.
* Observe the output on the '''web browser.'''

|-
| | 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
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Containers-in-Bootstrap/English

2021-03-18T10:16:04Z

Nehasolanki: Created page with "'''Title of the script: '''Containers in Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Boot..."

'''Title of the script: '''Containers in Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap, CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, container class, container-fluid class, container-{breakpoint} class

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the Spoken Tutorial on '''“Containers in Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn about:

* '''Containers'''
* '''Breakpoints''' and
* Types of '''container classes''' such as
** '''.container '''
** '''.container-fluid '''
** '''.container-{breakpoint} '''

|-
| | Slide 3:

System Requirements

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

|-
| | Slide 4: Prerequisite

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Slide: Containers
| |
* '''Containers''' are used to create basic responsive '''website''' layout.
* Responsive '''webpages''' automatically adjust as per screen size.
* '''Containers''' are mainly used to wrap '''website''' elements.

|-
| | Slide 5: Code Files
| |
* The file used in this tutorial is available in the '''Code Files''' link on this tutorial page.
* Please download and extract it.
* Make a copy and then use it while practising.

|-
| | Point to Mypage.html in My-bootstrap folder

| | I will go to '''My-bootstrap '''folder on my '''Desktop '''which I had created earlier.

Here, I had saved the '''Mypage.html''' file.

I’ll use this file for demonstration.
|-
| | Open Mypage.html in Firefox
| | First open the file '''Mypage.html''' in '''Firefox web browser.'''
|-
| | [Firefox]
| | It has one '''heading''' which we had created earlier.

Now we will add a '''container class''' in this '''HTML''' file to wrap this '''heading'''.
|-
| | Point to Mypage.html in My-bootstrap folder

Open the file in text editor
| | Open the file '''Mypage.html''' in the '''gedit''' '''text editor.'''

|-
| | [gedit - Mypage.html]

Update:

<nowiki><div class="container"></nowiki>

<nowiki><h1 class="text-danger"> Bharat Mart </h1></nowiki>

<nowiki></div></nowiki>

| | Let us see how to use the''' .container class.'''

Add the '''.container class''' using '''<nowiki><div></nowiki> tag''' as shown here.

|-
| | Only narration
| | Next, we’ll create our own '''css''' file to assign some additional properties to the '''container class'''.
|-
| | [gedit]

>>Create a new document
| | Click on '''“Create a new document.'''
|-
| | [gedit - untitled document 1]

Type:

.container {border: 5px solid black;}
| | Type the code as shown.

This will set a '''5 pixel black solid border '''for the '''.container class.'''

|-
| | Press Ctrl + S

Save in My-bootstrap
| | Save the file as '''Mystyle.css''' in the '''My-bootstrap''' folder.
|-
| | Only narration
| | Next we will link '''Mystyle.css''' file to '''Mypage.html''' file.
|-
| | Switch to Mypage.html
| | Switch back to '''Mypage.html''' file in the '''text editor'''.
|-
| | [gedit - Mypage.html]

Type:

<link rel="stylesheet" href="Mystyle.css">
| | Inside the '''<head>''' section, next to '''<link> tag''', type the code as shown here.
|-
| | Textbox:

Bootstrap CSS link should always be written before any other CSS link.
| | Note that '''Bootstrap CSS link''' should always be written before any other '''CSS link'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

| | Here we see that the '''heading''' is now placed inside this '''container'''.

We also see that the '''container''' is center aligned.

We had set the black border for this '''container''' in '''Mystyle.css''' file.

This is the '''container''' which is defined in the '''inbuilt''' code file '''bootstrap.css'''.
|-
| |
| | Next we will see how this page works in '''responsive design mode.'''
|-
| | [Firefox]

Textbox [Press Ctrl+Shift+C]

Right click >> Inspect Element
| | Press '''Ctrl+Shift+C '''or right-click on the page and select '''“Inspect Element”.'''

'''Inspect Element window '''opens.
|-
| | [Firefox]

Textbox [Press Ctrl+Shift+M]

Click on Responsive Design Mode

| | Press '''Ctrl+Shift+M '''or click on '''“Responsive Design Mode” '''at the top right of this window.

Now the page is in responsive mode.
|-
| | Highlight the width and height of the page with red box
| | At the top of the page, we can see the present width and height of the page.
|-
| | Using mouse, by dragging change the size

| | We can change the size of the screen by dragging the right border with the mouse.

Notice that the size of the '''container''' also changes correspondingly.
|-
| |

| | There are many '''breakpoints''' in the screen size.

Let’s understand what are '''breakpoints'''.
|-
| | Slide: Breakpoint

Table 1

| | A '''breakpoint''' shows the layout responsive changes for a particular device.

'''Bootstrap '''has 5 types of '''breakpoints''' as shown in the table.

You can choose any screen size according to your device.
|-
| |
| | Now we will learn how to change the size to '''Extra Large.'''
|-
| | [Firefox]

Using mouse, by dragging change the size

Drag till screen width is greater than '''1200px'''
| | Switch back to the '''browser'''.

Using the mouse, we’ll drag the right border.

We want to change the size to '''Extra Large''' i.e width greater than '''1200px'''.
|-
| | [Firefox]

Inspector -> click on <nowiki><div></nowiki>

| | At the bottom of the page, under the''' “Inspector”''' section, click on the''' <nowiki><div></nowiki> tag''' line.

In the middle section, notice that the '''max-width''' is 1140px.

It''' '''means the maximum width of 1140px is covered by the '''container''' for this screen size.

In '''.container class''', the width of the '''container''' changes as per the screen size.
|-
| | Slide: .container Class

Highlight Extra Large - 1140px
| | '''.container:''' It is a responsive fixed width '''container.'''

Refer this table for the '''container''' width and their respective screen size.
|-
| | [Firefox]

Using mouse, by dragging change the size
| | Switch back to '''browser'''.

Using the mouse, we’ll drag the right border as shown.
|-
| | Drag till screen width is between '''1199px '''to''' 992px'''
| | We’ll change the screen size to '''Large''' i.e width between '''1199px '''to''' 992px'''.

Now observe the '''max-width''' of the '''container''', which is changed to '''960px'''.
|-
| |

| | Try changing to other screen sizes - '''Medium''', '''Small''' & '''Extra Small''' and observe the change.

In this way '''.container class''' creates responsive web layout for all screen sizes.
|-
| |
| | Next let’s understand '''.container-fluid class''' with an example.
|-
| | Slide: .container-fluid Class

Table3
| |
* '''.container-fluid:''' It is a full width '''container'''.
* It spans across 100% width of the viewport as shown in table

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

Update:

<nowiki><div class="container-fluid"></nowiki>
| | Inside the''' <nowiki><div></nowiki> '''section, change the class name to '''container-fluid.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to Mystyle.css
| | Switch to the '''Mystyle.css''' file.
|-
| | [gedit - Mystyle.css]

Update:

.container-fluid { border: 5px dotted black;}
| | Update the code shown here.

For better visibility, we have set a border for '''.container-fluid class.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Using mouse, by dragging change the size

Inspector -> click on <nowiki><div></nowiki>

| | Using the mouse, we’ll drag the right border to decrease the screen width.

Under the '''“Inspector”''' section, click on the '''<nowiki><div></nowiki>''' tag line.

In the middle section at the bottom, you can see the '''width''' of the '''container-fluid''' is '''100%'''.
|-
| | Using mouse, by dragging change the size
| | Now we’ll increase the screen width.

Even then the''' width''' of the''' container-fluid''' is '''100%.'''

At any screen size, '''max-width '''of '''container-fluid''' will take up the entire width.

In this way '''.container-fluid class''' creates a '''responsive web layout'''.
|-
| |
| | Next let’s learn about '''.container-{breakpoint} class'''.
|-
| | Slide: .container - {breakpoint} Class

Table 4
| |
* '''.container-{breakpoint}: '''It''' '''is a full width '''container''' until a given '''breakpoint''' is reached.

* Following are the '''container classes''' for different '''breakpoints'''.

* They have '''100%''' width until the '''breakpoint''' is reached.

|-
| | Only narration
| | Let’s understand '''.container-{breakpoint} class '''with an example.
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html''' file.
|-
| | [gedit - Mypage.html]

Update:

<nowiki><div class="container-md"></nowiki>
| | Inside the''' <nowiki><div></nowiki> '''section, change the '''class''' name to '''container-md.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to Mystyle.css
| | Switch to the''' Mystyle.css''' file.
|-
| | [gedit - Mystyle.css]

Update:

.container-md {border: 5px dashed black;}
| | Update the code''' '''as shown here.

For better visibility, we have set a border for '''.container-md class.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Using mouse, by dragging change the size
| | Using the mouse, we’ll drag the right border such that the width of the screen is below '''768px'''.
|-
| | Inspector -> click on <nowiki><div></nowiki>

Point to the middle section
| | Under the''' “Inspector”''' section, click on the''' <nowiki><div></nowiki>''' tag line.

In the middle section at the bottom, we see that the '''width''' of the '''container-md''' is 100%.
|-
| | Using mouse, by dragging change the size

Highlight '''720px'''
| | Now we’ll increase the width of the screen to '''768px '''or above.

We observe that the '''max-width''' of the '''container-md''' is '''720px'''.

And at any screen size below '''Medium''' i.e width less than '''768px''', the width''' '''of '''container-md''' is 100%.
|-
| |
| | So it has 100% width until the''' Medium breakpoint''' is reached.

You can also try with other '''.container-{breakpoint} classes'''.

Like '''.container-xl, .container-lg and .container-sm.'''

In this way '''.container-{breakpoint} class''' creates a '''responsive web layout.'''
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide 6: Summary

| | In this tutorial, we have learnt:

* '''Containers'''
* '''Breakpoints''' and
* Types of '''container classes''' such as
** '''.container '''
** '''.container-fluid '''
** '''.container-{breakpoint} '''

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

* Open the '''Mypage.html''' file and change the '''container class''' to '''.container-lg'''.
* Open the '''Mystyle.css''' file and set the '''5px solid black border''' for '''.container-lg class'''.
* Save both the files.
* Observe the output on the '''web browser'''.

|-
| | 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
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Introduction-to-Bootstrap/English

2021-02-18T13:12:03Z

Nehasolanki:

'''Title of the script: '''Introduction to Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap,''' '''CSS, HTML, Webpage, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Download Bootstrap, Compiled CSS and JS, CDN link, bootstrap.css

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the spoken tutorial on '''“Introduction to Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn how to:

* Download and use '''Bootstrap''' version '''4.6.0 '''and
* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link

|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor'''
* '''Firefox web browser '''and
* '''A working Internet connection '''

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

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Open web browser and type[https://developer.android.com/studio/ ]https://getbootstrap.com/
| | Open your '''web browser''' and type the '''URL''' as shown here.

Make sure you’ve an active '''internet connection'''.
|-
| | [Firefox]

Click on the '''Download button '''at the top right corner of the page
| | Click on the '''Download '''button''' '''at the top right corner of the page.

'''Download webpage''' opens.
|-
| | [Firefox]

Select v4.6.x
| | At the right corner, we can see the version of '''Bootstrap'''.

Click on it to expand the list and select '''v4.6.x'''.
|-
| | '''Introduction''' webpage
| | Introduction webpage opens.
|-
| | [Firefox]

On the left panel >> click on''' Download'''
| | On the left panel, click on the''' Download link'''.
|-
| | Highlight - Compiled CSS and JS
| | Let us now download the ready-to-use '''compiled code '''for '''Bootstrap'''.

Go to the section''' “Compiled CSS and JS”.'''
|-
| | Highlight the version Bootstrap v4.6.0
| | The latest '''stable''' version at the time of recording this tutorial is '''Bootstrap v4.6.0.'''

It may vary in future.
|-
| | Click '''Download '''button
| | Click on the''' Download '''button.
|-
| |

Narration only
| | Please note: Some '''web browsers''' may download automatically.

Some may display a '''Save as''' dialog box.
|-
| | Click on Save File button
| | In the '''Save as''' dialog box, click on the '''Save File''' option and then on the '''Ok''' button.
|-
| | Only Narration
| | The download''' '''may take some time depending upon your '''Internet '''connection'''.'''
|-
| | Go to the '''Downloads '''folder >> Point to the downloaded file
| | Go to the '''Downloads '''folder where the ready-to-use '''compiled '''code file is saved.
|-
| | Right-click bootstrap zip file>> select '''Extract to'''
| | Right-click this file and select '''Extract to.'''
|-
| | Select Desktop
| | Now choose the desired location on your machine to save this file.

I’ll select '''Desktop'''.
|-
| | Create Folder →My-bootstrap
| | Then create a new folder with the help of the “'''Create Folder'''” button.

Name it as '''My hyphen bootstrap'''.

This folder will help to organize all our '''Bootstrap''' files in a single location on our machine.
|-
| | Click on Select
| | Click on '''Select.'''

The file is extracted now.
|-
| | Open Desktop → My-bootstrap folder >> double-click to open
| | Let us check the extracted file.

Go to the '''Desktop''' folder and open the folder '''My hyphen bootstrap.'''

The files are extracted into the '''bootstrap hyphen 4.6.0 hyphen dist''' folder.

'''Bootstrap''' '''compiled code''' can be downloaded and extracted in the similar manner in '''Windows OS.'''
|-
| | Bootstrap-4.6.0-dist>>Double-click to open
| | Open this folder.

Inside it there are two folders: '''CSS''' and '''JS'''.

These folders contain ready-to-use '''compiled''' and minified '''CSS''' files and '''JavaScript plugins'''.
|-
| | Go to the My-bootstrap folder
| | Go to the '''My-bootstrap''' folder.
|-
| | Point to Mypage.html in My-bootstrap folder
| | I have saved another file named '''Mypage.html''' in this folder.
|-
| | Slide 5: Code Files
| |
* The file used in this tutorial is available in the '''Code Files''' link on this tutorial page.
* Please download and extract it.
* Make a copy and then use it while practising.

|-
| | Right-click >> Select '''Open With Firefox'''

File opens
| | Let us open the file '''Mypage.html''' in a '''web browser.'''

So, right-click on the '''HTML''' file and select any '''web browser''' of your choice.

I will choose '''Firefox'''.

The '''HTML''' file opens in the '''Firefox web browser'''.
|-
| | Highlight the background
| | This is a simple '''HTML webpage''' without '''Bootstrap.'''

Now let’s include '''Bootstrap '''in this''' HTML webpage''' and see the change.
|-
| |
| | Let us open the''' Mypage.html''' file in any '''text editor'''.
|-
| | Go to '''My-bootstrap '''folder
| | Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
| | Select '''Open With gedit'''
| | Then choose any '''text editor''' that is available.

I will choose '''gedit'''.
|-
| | [gedit - Mypage.html]

Highlight:

<meta name="viewport" content="width=device-width, <br>initial-scale=1, shrink-to-fit=no">
| | Inside the <'''head>''' section, always include the '''viewpoint''' '''<meta> tag''' as shown here.

This helps to ensure proper rendering and touch zooming on mobile devices.
|-
| | [gedit - Mypage.html]

Type:

<link rel="stylesheet" <br>href="bootstrap-4.6.0-dist/css/bootstrap.css">

Highlight the code
| | Next to the '''viewpoint''' '''<meta> tag, '''type the code as shown.

This will '''link''' the '''bootstrap.css''' file to '''Mypage.html''' file.

Note that the '''HTML''' file and the '''bootstrap-4.6.0-dist''' folder should be in the same folder.
|-
| | [gedit - Mypage.html]

Highlight:

bootstrap.css
| | '''bootstrap.css''' is a default code file that is provided by '''Bootstrap'''.
|-
| | [gedit - Mypage.html]

Type:

<nowiki><h1 class="text-warning"> Bharat Mart </h1></nowiki>
| | Inside the '''<nowiki><h1></nowiki>''' tag, add the '''class''' as shown here.
|-
| | [gedit - Mypage.html]

Highlight:

class="text-warning"
| | This '''class''' is defined in '''Bootstrap CSS''' code file and it changes the color of the text to yellow.

We will learn more about this '''class''' in upcoming tutorials later on.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser '''and refresh the page.
|-
| | [Firefox - Grocery Store]

Highlight the output
| | Observe the output.

The text has changed to yellow colour.

The '''font''' is also changed to '''Bootstrap’s''' default font.

So now, we have successfully created a '''webpage''' with '''Bootstrap.'''

We’ll be using this method i.e '''Download Bootstrap''' in this course.
|-
| | Open bootstrap.css in gedit.

Highlight the code: Font, text, background
| | Let us see the '''ready-to-use compiled code '''for''' Bootstrap '''files.

Go to the '''bootstrap-4.6.0-dist''' folder.

Double-click on the '''CSS''' folder and then the '''bootstrap.css''' file.

All the required '''classes''' are '''defined''' in this file.

For eg. '''Font classes''', text color '''classes''', background color '''classes,''' etc.

When we '''link''' this file in our '''HTML''' code, we get access to these '''inbuilt classes'''.

Let’s close the file.
|-
| |
| | Now let’s learn about the second way to use '''Bootstrap '''on a '''webpage'''.
|-
| | Slide: Bootstrap from CDN link
| |
* '''Content Delivery Network (CDN)''' links are used to include '''Bootstrap''' in a '''webpage.'''
* It delivers a '''cached''' version of '''Bootstrap’s compiled CSS''' and '''JS '''to the file.
* It reduces the loading time.
* '''Webpages''' with '''CDN '''link always require '''internet connection'''

|-
| | Open web browser and switch to Bootstrap website tab
| | Go to the '''Bootstrap website '''once again.
|-
| | [Firefox-getbootstrap]
| | Scroll down and go to the''' jsDelivr''' section.

Here you can see two '''links'''.

These '''links''' are for '''cached''' versions of '''Bootstrap’s compiled CSS''' and '''JS'''.
|-
| | [Firefox-getbootstrap]

Copy:

<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0n<br>PEzvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" <br>crossorigin="anonymous">

<script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
| | Copy these two '''links.'''
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Delete:

<link rel="stylesheet" <br>href="bootstrap-4.6.0-dist/css/bootstrap.css">
| | First delete this line which we have added earlier.

|-
| | [gedit - Mypage.html]

Paste:

<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0n<br>PEzvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" <br>crossorigin="anonymous">

<script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
| | Now paste these two '''links''' here as we are using '''Bootstrap''' from '''CDN''' link.

|-
| | [gedit - Mypage.html]

Update:

<nowiki><h1 class="text-primary"> Bharat Mart </h1></nowiki>

Highlight:

class="text-primary"
| | Inside the '''<nowiki><h1></nowiki>''' tag, update the '''class''' as “'''text-primary'''”

This '''class''' changes the color of the text to blue.
|-
| | [gedit - Mypage.html]

| | This '''class''' is defined in the '''cached''' version of '''Bootstrap CSS''' code file.
|-
| | Press Ctrl + Shift + S
| | Save this file as “'''Mypage-cdn.html'''” in the '''My-bootstrap''' folder.
|-
| | Go to My-bootstrap folder
| | Open the “'''Mypage-cdn.html'''” file in a '''web browser'''.

I will open it in '''Firefox.'''
|-
| | [Firefox - Grocery Store]

Highlight the output
| | Observe the output.

The color of the text is changed to blue.

We have successfully created a '''webpage''' with '''Bootstrap''' using '''CDN link'''.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide : Summary

| | In this tutorial, we have learnt:

* Download and use '''Bootstrap''' version '''4.6.0 '''and
* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link

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

* Open the '''Mypage.html''' file and change the '''class''' to '''text-danger'''.
* Save the file.
* Observe the output on the '''web browser'''.

|-
| | 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 :

Answers for THIS Spoken Tutorial
| | Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
| | Slide :

Forum for specific questions:

| | The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
| | Slide : Acknowledgement
| | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
| | Slide : Thanks
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Introduction-to-Bootstrap/English

2021-02-18T13:05:08Z

Nehasolanki:

'''Title of the script: '''Introduction to Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap,''' '''CSS, HTML, Webpage, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Download Bootstrap, Compiled CSS and JS, CDN link, bootstrap.css

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the spoken tutorial on '''“Introduction to Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn how to:

* Download and use '''Bootstrap''' version '''4.6.0 '''and
* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link

|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor'''
* '''Firefox web browser '''and
* '''A working Internet connection '''

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

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Open web browser and type[https://developer.android.com/studio/ ]https://getbootstrap.com/
| | Open your '''web browser''' and type the '''URL''' as shown here.

Make sure you’ve an active '''internet connection'''.
|-
| | [Firefox]

Click on the '''Download button '''at the top right corner of the page
| | Click on the '''Download '''button''' '''at the top right corner of the page.

'''Download webpage''' opens.
|-
| | [Firefox]

Select v4.6.x
| | At the right corner, we can see the version of '''Bootstrap'''.

Click on it to expand the list and select '''v4.6.x'''.
|-
| | '''Introduction''' webpage
| | Introduction webpage opens.
|-
| | [Firefox]

On the left panel >> click on''' Download'''
| | On the left panel, click on the''' Download link'''.
|-
| | Highlight - Compiled CSS and JS
| | Let us now download the ready-to-use '''compiled code '''for '''Bootstrap'''.

Go to the section''' “Compiled CSS and JS”.'''
|-
| | Highlight the version Bootstrap v4.6.0
| | The latest '''stable''' version at the time of recording this tutorial is '''Bootstrap v4.6.0.'''

It may vary in future.
|-
| | Click '''Download '''button
| | Click on the''' Download '''button.
|-
| |

Narration only
| | Please note: Some '''web browsers''' may download automatically.

Some may display a '''Save as''' dialog box.
|-
| | Click on Save File button
| | In the '''Save as''' dialog box, click on the '''Save File''' option and then on the '''Ok''' button.
|-
| | Only Narration
| | The download''' '''may take some time depending upon your '''Internet '''connection'''.'''
|-
| | Go to the '''Downloads '''folder >> Point to the downloaded file
| | Go to the '''Downloads '''folder where the ready-to-use '''compiled '''code file is saved.
|-
| | Right-click bootstrap zip file>> select '''Extract to'''
| | Right-click this file and select '''Extract to.'''
|-
| | Select Desktop
| | Now choose the desired location on your machine to save this file.

I’ll select '''Desktop'''.
|-
| | Create Folder →My-bootstrap
| | Then create a new folder with the help of the “'''Create Folder'''” button.

Name it as '''My hyphen bootstrap'''.

This folder will help to organize all our '''Bootstrap''' files in a single location on our machine.
|-
| | Click on Select
| | Click on '''Select.'''

The file is extracted now.
|-
| | Open Desktop → My-bootstrap folder >> double-click to open
| | Let us check the extracted file.

Go to the '''Desktop''' folder and open the folder '''My hyphen bootstrap.'''

The files are extracted into the '''bootstrap hyphen 4.6.0 hyphen dist''' folder.

'''Bootstrap''' '''compiled code''' can be downloaded and extracted in the similar manner in '''Windows OS.'''
|-
| | Bootstrap-4.6.0-dist>>Double-click to open
| | Open this folder.

Inside it there are two folders: '''CSS''' and '''JS'''.

These folders contain ready-to-use '''compiled''' and minified '''CSS''' files and '''JavaScript plugins'''.
|-
| | Go to the My-bootstrap folder
| | Go to the '''My-bootstrap''' folder.
|-
| | Point to Mypage.html in My-bootstrap folder
| | I have saved another file named '''Mypage.html''' in this folder.
|-
| | Slide 5: Code Files
| |
* The file used in this tutorial is available in the '''Code Files''' link on this tutorial page.
* Please download and extract it.
* Make a copy and then use it while practising.

|-
| | Right-click >> Select '''Open With Firefox'''

File opens
| | Let us open the file '''Mypage.html''' in a '''web browser.'''

So, right-click on the '''HTML''' file and select any '''web browser''' of your choice.

I will choose '''Firefox'''.

The '''HTML''' file opens in the '''Firefox web browser'''.
|-
| | Highlight the background
| | This is a simple '''HTML webpage''' without '''Bootstrap.'''

Now let’s include '''Bootstrap '''in this''' HTML webpage''' and see the change.
|-
| |
| | Let us open the''' Mypage.html''' file in any '''text editor'''.
|-
| | Go to '''My-bootstrap '''folder
| | Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
| | Select '''Open With gedit'''
| | Then choose any '''text editor''' that is available.

I will choose '''gedit'''.
|-
| | [gedit - Mypage.html]

Highlight:

<meta name="viewport" content="width=device-width, <br>initial-scale=1, shrink-to-fit=no">
| | Inside the <'''head>''' section, always include the '''viewpoint''' '''<meta> tag''' as shown here.

This helps to ensure proper rendering and touch zooming on mobile devices.
|-
| | [gedit - Mypage.html]

Type:

<link rel="stylesheet" <br>href="bootstrap-4.6.0-dist/css/bootstrap.css">

Highlight the code
| | Next to the '''viewpoint''' '''<meta> tag, '''type the code as shown.

This will '''link''' the '''bootstrap.css''' file to '''Mypage.html''' file.

Note that the '''HTML''' file and the '''bootstrap-4.6.0-dist''' folder should be in the same folder.
|-
| | [gedit - Mypage.html]

Highlight:

bootstrap.css
| | '''bootstrap.css''' is a default code file that is provided by '''Bootstrap'''.
|-
| | [gedit - Mypage.html]

Type:

<nowiki><h1 class="text-warning"> Bharat Mart </h1></nowiki>
| | Inside the '''<nowiki><h1></nowiki>''' tag, add the '''class''' as shown here.
|-
| | [gedit - Mypage.html]

Highlight:

class="text-warning"
| | This '''class''' is defined in '''Bootstrap CSS''' code file and it changes the color of the text to yellow.

We will learn more about this '''class''' in upcoming tutorials later on.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser '''and refresh the page.
|-
| | [Firefox - Grocery Store]

Highlight the output
| | Observe the output.

The text has changed to yellow colour.

The '''font''' is also changed to '''Bootstrap’s''' default font.

So now, we have successfully created a '''webpage''' with '''Bootstrap.'''

We’ll be using this method i.e '''Download Bootstrap''' in this course.
|-
| | Open bootstrap.css in gedit.

Highlight the code: Font, text, background
| | Let us see the '''ready-to-use compiled code '''for''' Bootstrap '''files.

Go to the '''bootstrap-4.6.0-dist''' folder.

Double-click on the '''CSS''' folder and then the '''bootstrap.css''' file.

All the required '''classes''' are '''defined''' in this file.

For eg. '''Font classes''', text color '''classes''', background color '''classes,''' etc.

When we '''link''' this file in our '''HTML''' code, we get access to these '''inbuilt classes'''.

Let’s close the file.
|-
| |
| | Now let’s learn about the second way to use '''Bootstrap '''on a '''webpage'''.
|-
| | Slide: Bootstrap from CDN link
| |
* '''Content Delivery Network (CDN)''' links are used to include '''Bootstrap''' in a '''webpage.'''
* It delivers a '''cached''' version of '''Bootstrap’s compiled CSS''' and '''JS '''to the file.
* It reduces the loading time.
* '''Webpages''' with '''CDN '''link always require '''internet connection'''

|-
| | Open web browser and switch to Bootstrap website tab
| | Go to the '''Bootstrap website '''once again.
|-
| | [Firefox-getbootstrap]
| | Scroll down and go to the''' jsDelivr''' section.

Here you can see two '''links'''.

These '''links''' are for '''cached''' versions of '''Bootstrap’s compiled CSS''' and '''JS'''.
|-
| | [Firefox-getbootstrap]

Copy:

<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE<br>zvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
| | Copy these two '''links.'''
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Delete:

<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.css">
| | First delete this line which we have added earlier.

|-
| | [gedit - Mypage.html]

Paste:

<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE<br>zvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
| | Now paste these two '''links''' here as we are using '''Bootstrap''' from '''CDN''' link.

|-
| | [gedit - Mypage.html]

Update:

<nowiki><h1 class="text-primary"> Bharat Mart </h1></nowiki>

Highlight:

class="text-primary"
| | Inside the '''<nowiki><h1></nowiki>''' tag, update the '''class''' as “'''text-primary'''”

This '''class''' changes the color of the text to blue.
|-
| | [gedit - Mypage.html]

| | This '''class''' is defined in the '''cached''' version of '''Bootstrap CSS''' code file.
|-
| | Press Ctrl + Shift + S
| | Save this file as “'''Mypage-cdn.html'''” in the '''My-bootstrap''' folder.
|-
| | Go to My-bootstrap folder
| | Open the “'''Mypage-cdn.html'''” file in a '''web browser'''.

I will open it in '''Firefox.'''
|-
| | [Firefox - Grocery Store]

Highlight the output
| | Observe the output.

The color of the text is changed to blue.

We have successfully created a '''webpage''' with '''Bootstrap''' using '''CDN link'''.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide : Summary

| | In this tutorial, we have learnt:

* Download and use '''Bootstrap''' version '''4.6.0 '''and
* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link

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

* Open the '''Mypage.html''' file and change the '''class''' to '''text-danger'''.
* Save the file.
* Observe the output on the '''web browser'''.

|-
| | 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 :

Answers for THIS Spoken Tutorial
| | Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
| | Slide :

Forum for specific questions:

| | The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
| | Slide : Acknowledgement
| | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
| | Slide : Thanks
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

Bootstrap/C2/Introduction-to-Bootstrap/English

2021-02-18T13:01:24Z

Nehasolanki: Created page with "'''Title of the script: '''Introduction to Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Bo..."

'''Title of the script: '''Introduction to Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap,''' '''CSS, HTML, Webpage, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Download Bootstrap, Compiled CSS and JS, CDN link, bootstrap.css

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the spoken tutorial on '''“Introduction to Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn how to:

* Download and use '''Bootstrap''' version '''4.6.0 '''and
* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link

|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor'''
* '''Firefox web browser '''and
* '''A working Internet connection '''

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

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Open web browser and type[https://developer.android.com/studio/ ]https://getbootstrap.com/
| | Open your '''web browser''' and type the '''URL''' as shown here.

Make sure you’ve an active '''internet connection'''.
|-
| | [Firefox]

Click on the '''Download button '''at the top right corner of the page
| | Click on the '''Download '''button''' '''at the top right corner of the page.

'''Download webpage''' opens.
|-
| | [Firefox]

Select v4.6.x
| | At the right corner, we can see the version of '''Bootstrap'''.

Click on it to expand the list and select '''v4.6.x'''.
|-
| | '''Introduction''' webpage
| | Introduction webpage opens.
|-
| | [Firefox]

On the left panel >> click on''' Download'''
| | On the left panel, click on the''' Download link'''.
|-
| | Highlight - Compiled CSS and JS
| | Let us now download the ready-to-use '''compiled code '''for '''Bootstrap'''.

Go to the section''' “Compiled CSS and JS”.'''
|-
| | Highlight the version Bootstrap v4.6.0
| | The latest '''stable''' version at the time of recording this tutorial is '''Bootstrap v4.6.0.'''

It may vary in future.
|-
| | Click '''Download '''button
| | Click on the''' Download '''button.
|-
| |

Narration only
| | Please note: Some '''web browsers''' may download automatically.

Some may display a '''Save as''' dialog box.
|-
| | Click on Save File button
| | In the '''Save as''' dialog box, click on the '''Save File''' option and then on the '''Ok''' button.
|-
| | Only Narration
| | The download''' '''may take some time depending upon your '''Internet '''connection'''.'''
|-
| | Go to the '''Downloads '''folder >> Point to the downloaded file
| | Go to the '''Downloads '''folder where the ready-to-use '''compiled '''code file is saved.
|-
| | Right-click bootstrap zip file>> select '''Extract to'''
| | Right-click this file and select '''Extract to.'''
|-
| | Select Desktop
| | Now choose the desired location on your machine to save this file.

I’ll select '''Desktop'''.
|-
| | Create Folder →My-bootstrap
| | Then create a new folder with the help of the “'''Create Folder'''” button.

Name it as '''My hyphen bootstrap'''.

This folder will help to organize all our '''Bootstrap''' files in a single location on our machine.
|-
| | Click on Select
| | Click on '''Select.'''

The file is extracted now.
|-
| | Open Desktop → My-bootstrap folder >> double-click to open
| | Let us check the extracted file.

Go to the '''Desktop''' folder and open the folder '''My hyphen bootstrap.'''

The files are extracted into the '''bootstrap hyphen 4.6.0 hyphen dist''' folder.

'''Bootstrap''' '''compiled code''' can be downloaded and extracted in the similar manner in '''Windows OS.'''
|-
| | Bootstrap-4.6.0-dist>>Double-click to open
| | Open this folder.

Inside it there are two folders: '''CSS''' and '''JS'''.

These folders contain ready-to-use '''compiled''' and minified '''CSS''' files and '''JavaScript plugins'''.
|-
| | Go to the My-bootstrap folder
| | Go to the '''My-bootstrap''' folder.
|-
| | Point to Mypage.html in My-bootstrap folder
| | I have saved another file named '''Mypage.html''' in this folder.
|-
| | Slide 5: Code Files
| |
* The file used in this tutorial is available in the '''Code Files''' link on this tutorial page.
* Please download and extract it.
* Make a copy and then use it while practising.

|-
| | Right-click >> Select '''Open With Firefox'''

File opens
| | Let us open the file '''Mypage.html''' in a '''web browser.'''

So, right-click on the '''HTML''' file and select any '''web browser''' of your choice.

I will choose '''Firefox'''.

The '''HTML''' file opens in the '''Firefox web browser'''.
|-
| | Highlight the background
| | This is a simple '''HTML webpage''' without '''Bootstrap.'''

Now let’s include '''Bootstrap '''in this''' HTML webpage''' and see the change.
|-
| |
| | Let us open the''' Mypage.html''' file in any '''text editor'''.
|-
| | Go to '''My-bootstrap '''folder
| | Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
| | Select '''Open With gedit'''
| | Then choose any '''text editor''' that is available.

I will choose '''gedit'''.
|-
| | [gedit - Mypage.html]

Highlight:

<meta name="viewport" content="width=device-width, <br>initial-scale=1, shrink-to-fit=no">
| | Inside the <'''head>''' section, always include the '''viewpoint''' '''<meta> tag''' as shown here.

This helps to ensure proper rendering and touch zooming on mobile devices.
|-
| | [gedit - Mypage.html]

Type:

<link rel="stylesheet" <br>href="bootstrap-4.6.0-dist/css/bootstrap.css">

Highlight the code
| | Next to the '''viewpoint''' '''<meta> tag, '''type the code as shown.

This will '''link''' the '''bootstrap.css''' file to '''Mypage.html''' file.

Note that the '''HTML''' file and the '''bootstrap-4.6.0-dist''' folder should be in the same folder.
|-
| | [gedit - Mypage.html]

Highlight:

bootstrap.css
| | '''bootstrap.css''' is a default code file that is provided by '''Bootstrap'''.
|-
| | [gedit - Mypage.html]

Type:

<nowiki><h1 class="text-warning"> Bharat Mart </h1></nowiki>
| | Inside the '''<h1>''' tag, add the '''class''' as shown here.
|-
| | [gedit - Mypage.html]

Highlight:

class="text-warning"
| | This '''class''' is defined in '''Bootstrap CSS''' code file and it changes the color of the text to yellow.

We will learn more about this '''class''' in upcoming tutorials later on.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser '''and refresh the page.
|-
| | [Firefox - Grocery Store]

Highlight the output
| | Observe the output.

The text has changed to yellow colour.

The '''font''' is also changed to '''Bootstrap’s''' default font.

So now, we have successfully created a '''webpage''' with '''Bootstrap.'''

We’ll be using this method i.e '''Download Bootstrap''' in this course.
|-
| | Open bootstrap.css in gedit.

Highlight the code: Font, text, background
| | Let us see the '''ready-to-use compiled code '''for''' Bootstrap '''files.

Go to the '''bootstrap-4.6.0-dist''' folder.

Double-click on the '''CSS''' folder and then the '''bootstrap.css''' file.

All the required '''classes''' are '''defined''' in this file.

For eg. '''Font classes''', text color '''classes''', background color '''classes,''' etc.

When we '''link''' this file in our '''HTML''' code, we get access to these '''inbuilt classes'''.

Let’s close the file.
|-
| |
| | Now let’s learn about the second way to use '''Bootstrap '''on a '''webpage'''.
|-
| | Slide: Bootstrap from CDN link
| |
* '''Content Delivery Network (CDN)''' links are used to include '''Bootstrap''' in a '''webpage.'''
* It delivers a '''cached''' version of '''Bootstrap’s compiled CSS''' and '''JS '''to the file.
* It reduces the loading time.
* '''Webpages''' with '''CDN '''link always require '''internet connection'''

|-
| | Open web browser and switch to Bootstrap website tab
| | Go to the '''Bootstrap website '''once again.
|-
| | [Firefox-getbootstrap]
| | Scroll down and go to the''' jsDelivr''' section.

Here you can see two '''links'''.

These '''links''' are for '''cached''' versions of '''Bootstrap’s compiled CSS''' and '''JS'''.
|-
| | [Firefox-getbootstrap]

Copy:

<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE<br>zvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
| | Copy these two '''links.'''
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Delete:

<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.css">
| | First delete this line which we have added earlier.

|-
| | [gedit - Mypage.html]

Paste:

<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE<br>zvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
| | Now paste these two '''links''' here as we are using '''Bootstrap''' from '''CDN''' link.

|-
| | [gedit - Mypage.html]

Update:

<h1 class="text-primary"> Bharat Mart </h1>

Highlight:

class="text-primary"
| | Inside the '''<h1>''' tag, update the '''class''' as “'''text-primary'''”

This '''class''' changes the color of the text to blue.
|-
| | [gedit - Mypage.html]

| | This '''class''' is defined in the '''cached''' version of '''Bootstrap CSS''' code file.
|-
| | Press Ctrl + Shift + S
| | Save this file as “'''Mypage-cdn.html'''” in the '''My-bootstrap''' folder.
|-
| | Go to My-bootstrap folder
| | Open the “'''Mypage-cdn.html'''” file in a '''web browser'''.

I will open it in '''Firefox.'''
|-
| | [Firefox - Grocery Store]

Highlight the output
| | Observe the output.

The color of the text is changed to blue.

We have successfully created a '''webpage''' with '''Bootstrap''' using '''CDN link'''.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide : Summary

| | In this tutorial, we have learnt:

* Download and use '''Bootstrap''' version '''4.6.0 '''and
* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link

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

* Open the '''Mypage.html''' file and change the '''class''' to '''text-danger'''.
* Save the file.
* Observe the output on the '''web browser'''.

|-
| | 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 :

Answers for THIS Spoken Tutorial
| | Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
| | Slide :

Forum for specific questions:

| | The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
| | Slide : Acknowledgement
| | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
| | Slide : Thanks
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

CSS/C2/Overview-of-CSS/English

2021-02-09T11:10:17Z

Nehasolanki:

'''Title of the script: '''Overview of CSS

'''Author:''' Neha Solanki

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

'''Novice Reviewer: '''Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Video Tutorial, Spoken Tutorial, Cascading Style Sheet, Overview of CSS, Markup Language, Web Layout

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Hello and welcome to the spoken tutorial on “Overview of '''CSS'''”.
|-
| | Slide: Learning Objectives
| | In this tutorial, we will learn:

* About '''CSS '''and
* The content available in various tutorials in this series

|-
| | Slide: '''CSS'''
| | What is '''CSS'''?

'''CSS''' stands for '''Cascading Style Sheet.'''
|-
| | Slide: '''CSS'''
| |
* It''' '''is a '''style sheet''' language.
* It is used to '''style''' documents written in '''markup''' language like''' HTML''', '''XML '''etc.
* It is an independent file and saved with '''.css''' extension.

|-
| | Slide: '''CSS'''
| |
* It allows '''developers''' to control how the '''webpage''' should be displayed.
* For e.g color, font, space, etc.
* It is platform independent and hence works on all '''operating systems'''

|-
| | Slide: Prerequisites for using '''CSS'''
| | To work with '''CSS,''' we need-

* A '''text editor '''or a '''WYSIWYG editor''' to
** write our '''CSS '''code and
** understand various '''CSS '''properties
* A '''web browser''' to display the '''formatted''' content.

|-
| | Slide: For recording of '''CSS''' series
| | Throughout this series I will be using:
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor'''
* '''Firefox web browser '''and
* '''Ubuntu Linux OS v 18.04'''

|-
| |
| | Now, we will briefly go through some of the individual tutorials in this series.
|-
| | Glimpse of First CSS File

[Video:

00:00 - 00:04

03:35 - 03:43

05:44 - 05:50 ]

| | '''First CSS File '''is the introductory tutorial of the series.

In this tutorial we will learn how to create a '''CSS''' file and the '''syntax''' of '''CSS.'''

We’ll also see how to '''link''' a '''CSS''' file with an '''HTML''' file and see the output on a '''web browser'''.
|-
| | Glimpse of Dimensions and Measuring Units

[Video:

00:00 - 00:04

04:05 - 04:12

07:51 - 07:57 ]
| | '''Dimensions and Measuring Units '''is the next tutorial.

In this, we’ll learn about measuring '''units''' and''' '''width & height properties in '''CSS.'''
|-
| | Glimpse of Box Model

[Video:

00:00 - 00:03

01:27 - 01:36

09:57 - 10:02 ]
| | The next tutorial is '''Box Model''', in which we’ll learn about '''CSS''' '''Box Model '''and its '''layers'''.

We will also learn about the '''Box sizing.'''
|-
| | Glimpse of Background

[Video:

00:00 - 00:03

04:26 - 04:36

05:53 - 05:57 ]
| | Next tutorial is '''Background.'''

In this tutorial we'll learn how to set the''' background '''properties of an '''element '''in''' CSS.'''

Like '''background-color, background-image, background-repeat,''' etc.
|-
| | Glimpse of Text Properties

[Video:

00:00 - 00:04

02:28 - 02:42]
| | After this, comes '''Text Properties.'''

In this tutorial we’ll learn how to '''set''' the '''Text '''properties to '''format''' and '''style''' the '''text''' '''elements.'''

Like '''color, alignment,''' etc.
|-
| | Glimpse of Font properties

[Video:

00:00 - 00:04

10:55 - 11:09 ]
| | Next tutorial is '''Font properties'''.

In this we’ll learn about '''Font properties''' of an '''element '''to '''style''' the '''font''' of the '''text.'''

Like '''font-style, font-size, font-family,''' etc.
|-
| | Glimpse of Display property

[Video:

00:00 - 00:06

03:57 - 04:03]
| | The tutorial named '''Display''' '''property '''is next in the series.

In this we’ll see how to display''' '''an '''element''' in '''CSS.'''
|-
| | Glimpse of Float and Overflow

[Video:

00:00 - 00:04

04:18 - 04:27

11:06 - 11:10 ]
| | Next tutorial is '''Float''' '''and''' '''Overflow.'''

Here, we’ll learn about '''Float''' & '''Clear '''properties of an '''element '''in''' CSS.'''

We’ll also learn '''Overflow '''property.
|-
| | Glimpse of Link

[Video:

00:00 - 00:04

06:11 - 06:25]
| | After this is '''Link.'''

In this, we can '''style links''' by applying different properties to all the four states of '''link.'''
|-
| | Glimpse of List

[Video:

00:00 - 00:04

02:20 - 02:34]
| | Next tutorial is '''List'''.

In this we’ll learn about '''list''' properties to '''style''' and '''format lists.'''

Like''' type, background-color, '''etc
|-
| | Glimpse of Table

[Video - Table: 00:00 - 00:02

Video - Advanced Table Design: 00:00 - 00:04

Video - Advanced Table Design: 03:35 - 03:43 ]
| | '''Table '''and''' Advanced Table Design''' in '''CSS''' are the next tutorials in this series.

They will teach us to '''style''' and '''format tables''' using '''CSS table''' properties.
|-
| | Glimpse of Forms

[Video:

00:00 - 00:04

11:49 - 12:03 ]
| | Next tutorial is '''Forms'''.

In this we’ll learn to '''style''' and '''format forms '''using various''' CSS properties.'''

Like '''border''', '''background-color, padding, '''etc.
|-
| | Glimpse of Counters

[Video:

00:00 - 00:06

06:45 - 06:58
| | The tutorial named '''Counters '''is next in the series.

With the help of this tutorial, we will learn to number '''elements''' automatically in a '''webpage.'''
|-
| | Glimpse of Multi-column Layout

[Video:

00:00 - 00:06

4:04 - 4:17

| | Next tutorial is '''Multi-column Layout.'''

In this tutorial, learners can create '''Multi-column Layouts '''of their''' webpages.'''
|-
| | Glimpse of Web layout

[Video:

00:00-00:05

7:35 - 07:49
| | The last tutorial is '''Web layout.'''

In this, learners will be able to design and structure '''web pages '''with proper '''web layout.'''
|-
| | 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 '''CSS''' and
* The tutorials covered in this series

|-
| | 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:

Answers for THIS Spoken Tutorial
| | Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
| | Slide:

Forum for specific questions:

| | The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
| | Slide: Acknowledgement
| | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
| | Slide: Thanks
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C2/Overview-of-CSS/English

2021-02-03T08:35:37Z

Nehasolanki:

'''Title of the script: '''Overview of CSS

'''Author:''' Neha Solanki

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

'''Novice Reviewer: '''Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Video Tutorial, Spoken Tutorial, Cascading Style Sheet, Overview of CSS, Markup Language, Web Layout

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Hello and welcome to the spoken tutorial on “Overview of '''CSS'''”.
|-
| | Slide: Learning Objectives
| | In this tutorial, we will learn:

* About '''CSS '''and
* The content available in various tutorials in this series

|-
| | Slide: '''CSS'''
| | What is '''CSS'''?

'''CSS''' stands for '''Cascading Style Sheet.'''
|-
| | Slide: '''CSS'''
| |
* It''' '''is a '''style sheet''' language.
* It is used to '''style''' documents written in '''markup''' language like''' HTML''', '''XML '''etc.
* It is an independent file and saved with '''[dot] css (.css)''' extension.

|-
| | Slide: '''CSS'''
| |
* It allows '''developers''' to control how the '''webpage''' should be displayed.
* For e.g color, font, space, etc.
* It is platform independent and hence works on all '''operating systems'''

|-
| | Slide: Prerequisites for using '''CSS'''
| | To work with '''CSS,''' we need-

* A '''text editor '''or a '''WYSIWYG editor''' to
** write our '''CSS '''code and
** understand various '''CSS '''properties
* A '''web browser''' to display the '''formatted''' content.

|-
| | Slide: For recording of '''CSS''' series
| | Throughout this series I will be using:
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor'''
* '''Firefox web browser '''and
* '''Ubuntu Linux OS v 18.04'''

|-
| |
| | Now, we will briefly go through some of the individual tutorials in this series.
|-
| | Glimpse of First CSS File

[Video:

00:00 - 00:04

03:35 - 03:43

05:44 - 05:50 ]

| | '''First CSS File '''is the introductory tutorial of the series.

In this tutorial we will learn how to create a '''CSS''' file and the '''syntax''' of '''CSS.'''

We’ll also see how to '''link''' a '''CSS''' file with an '''HTML''' file and see the output on a '''web browser'''.
|-
| | Glimpse of Dimensions and Measuring Units

[Video:

00:00 - 00:04

04:05 - 04:12

07:51 - 07:57 ]
| | '''Dimensions and Measuring Units '''is the next tutorial.

In this, we’ll learn about measuring '''units''' and''' '''width & height properties in '''CSS.'''
|-
| | Glimpse of Box Model

[Video:

00:00 - 00:03

01:27 - 01:36

09:57 - 10:02 ]
| | The next tutorial is '''Box Model''', in which we’ll learn about '''CSS''' '''Box Model '''and its '''layers'''.

We will also learn about the '''Box sizing.'''
|-
| | Glimpse of Background

[Video:

00:00 - 00:03

04:26 - 04:36

05:53 - 05:57 ]
| | Next tutorial is '''Background.'''

In this tutorial we'll learn how to set the''' background '''properties of an '''element '''in''' CSS.'''

Like '''background-color, background-image, background-repeat,''' etc.
|-
| | Glimpse of Text Properties

[Video:

00:00 - 00:04

02:28 - 02:42]
| | After this, comes '''Text Properties.'''

In this tutorial we’ll learn how to '''set''' the '''Text '''properties to '''format''' and '''style''' the '''text''' '''elements.'''

Like '''color, alignment,''' etc.
|-
| | Glimpse of Font properties

[Video:

00:00 - 00:04

10:55 - 11:09 ]
| | Next tutorial is '''Font properties'''.

In this we’ll learn about '''Font properties''' of an '''element '''to '''style''' the '''font''' of the '''text.'''

Like '''font-style, font-size, font-family,''' etc.
|-
| | Glimpse of Display property

[Video:

00:00 - 00:06

03:57 - 04:03]
| | The tutorial named '''Display''' '''property '''is next in the series.

In this we’ll see how to display''' '''an '''element''' in '''CSS.'''
|-
| | Glimpse of Float and Overflow

[Video:

00:00 - 00:04

04:18 - 04:27

11:06 - 11:10 ]
| | Next tutorial is '''Float''' '''and''' '''Overflow.'''

Here, we’ll learn about '''Float''' & '''Clear '''properties of an '''element '''in''' CSS.'''

We’ll also learn '''Overflow '''property.
|-
| | Glimpse of Link

[Video:

00:00 - 00:04

06:11 - 06:25]
| | After this is '''Link.'''

In this, we can '''style links''' by applying different properties to all the four states of '''link.'''
|-
| | Glimpse of List

[Video:

00:00 - 00:04

02:20 - 02:34]
| | Next tutorial is '''List'''.

In this we’ll learn about '''list''' properties to '''style''' and '''format lists.'''

Like''' type, background-color, '''etc
|-
| | Glimpse of Table

[Video - Table: 00:00 - 00:02

Video - Advanced Table Design: 00:00 - 00:04

Video - Advanced Table Design: 03:35 - 03:43 ]
| | '''Table '''and''' Advanced Table Design''' in '''CSS''' are next tutorial in this series.

They will teach us to '''style''' and '''format tables''' using '''CSS''' '''table''' properties.
|-
| | Glimpse of Forms

[Video:

00:00 - 00:04

11:49 - 12:03 ]
| | Next tutorial is '''Forms'''.

In this we’ll learn to '''style''' and '''format forms '''using various''' CSS properties.'''

Like '''border''', '''background-color, padding, '''etc.
|-
| | Glimpse of Counters

[Video:

00:00 - 00:06

06:45 - 06:58
| | The tutorial named '''Counters '''is next in the series.

With the help of this tutorial, we will learn to number '''elements''' automatically in a '''webpage.'''
|-
| | Glimpse of Multi-column Layout

[Video:

00:00 - 00:06

4:04 - 4:17

| | Next tutorial is '''Multi-column Layout.'''

In this tutorial, learners can create '''Multi-column Layouts '''of their''' webpages.'''
|-
| | Glimpse of Web layout

[Video:

00:00-00:05

7:35 - 07:49
| | The last tutorial is '''Web layout.'''

In this, learners will be able to design and structure '''web pages '''with proper '''web layout.'''
|-
| | 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 '''CSS''' and
* The tutorials covered in this series

|-
| | 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:

Answers for THIS Spoken Tutorial
| | Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
| | Slide:

Forum for specific questions:

| | The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
| | Slide: Acknowledgement
| | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
| | Slide: Thanks
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C2/Overview-of-CSS/English

2021-01-27T11:33:10Z

Nehasolanki: Created page with "'''Title of the script: '''Overview of CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer: '''Madhuri Ganapathi '''Keyw..."

'''Title of the script: '''Overview of CSS

'''Author:''' Neha Solanki

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

'''Novice Reviewer: '''Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Video Tutorial, Spoken Tutorial

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Hello and welcome to the spoken tutorial on “Overview of '''CSS'''”.
|-
| | Slide: Learning Objectives
| | In this tutorial, we will learn:

* About '''CSS '''and
* The content available in various tutorials in this series

|-
| | Slide: '''CSS'''
| | What is '''CSS'''?

'''CSS''' stands for '''Cascading Style Sheet.'''
|-
| | Slide: '''CSS'''
| |
* It''' '''is a '''style sheet''' language.
* It is used to '''style''' documents written in '''markup''' language like''' HTML''', '''XML '''etc.
* It is an independent file and saved with '''[dot] css (.css)''' extension.

|-
| | Slide: '''CSS'''
| |
* It allows '''developers''' to control how the '''webpage''' should be displayed.
* For e.g color, font, space, etc.
* It is platform independent and hence works on all '''operating systems'''

|-
| | Slide: Prerequisites for using '''CSS'''
| | To work with '''CSS,''' we need-

* A '''text editor '''or a '''WYSIWYG editor''' to
** write our '''CSS '''code and
** understand various '''CSS '''properties
* A '''web browser''' to display the '''formatted''' content.

|-
| | Slide: For recording of '''CSS''' series
| | Throughout this series I will be using:
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor'''
* '''Firefox web browser '''and
* '''Ubuntu Linux OS v 18.04'''

|-
| |
| | Now, we will briefly go through some of the individual tutorials in this series.
|-
| | Glimpse of First CSS File

[Video:

00:00 - 00:04

03:35 - 03:43

05:44 - 05:50 ]

| | '''First CSS File '''is the introductory tutorial of the series.

In this tutorial we will learn how to create a '''CSS''' file and the '''syntax''' of '''CSS.'''

We’ll also see how to '''link''' a '''CSS''' file with an '''HTML''' file and see the output on a '''web browser'''.
|-
| | Glimpse of Dimensions and Measuring Units

[Video:

00:00 - 00:04

04:05 - 04:12

07:51 - 07:57 ]
| | '''Dimensions and Measuring Units '''is the next tutorial.

In this, we’ll learn about measuring '''units''' and''' '''width & height properties in '''CSS.'''
|-
| | Glimpse of Box Model

[Video:

00:00 - 00:03

01:27 - 01:36

09:57 - 10:02 ]
| | The next tutorial is '''Box Model''', in which we’ll learn about '''CSS''' '''Box Model '''and its '''layers'''.

We will also learn about the '''Box sizing.'''
|-
| | Glimpse of Background

[Video:

00:00 - 00:03

04:26 - 04:36

05:53 - 05:57 ]
| | Next tutorial is '''Background.'''

In this tutorial we'll learn how to set the''' background '''properties of an '''element '''in''' CSS.'''

Like '''background-color, background-image, background-repeat,''' etc.
|-
| | Glimpse of Text Properties

[Video:

00:00 - 00:04

02:28 - 02:42]
| | After this, comes '''Text Properties.'''

In this tutorial we’ll learn how to '''set''' the '''Text '''properties to '''format''' and '''style''' the '''text''' '''elements.'''

Like '''color, alignment,''' etc.
|-
| | Glimpse of Font properties

[Video:

00:00 - 00:04

10:55 - 11:09 ]
| | Next tutorial is '''Font properties'''.

In this we’ll learn about '''Font properties''' of an '''element '''to '''style''' the '''font''' of the '''text.'''

Like '''font-style, font-size, font-family,''' etc.
|-
| | Glimpse of Display property

[Video:

00:00 - 00:06

03:57 - 04:03]
| | The tutorial named '''Display''' '''property '''is next in the series.

In this we’ll see how to display''' '''an '''element''' in '''CSS.'''
|-
| | Glimpse of Float and Overflow

[Video:

00:00 - 00:04

04:18 - 04:27

11:06 - 11:10 ]
| | Next tutorial is '''Float''' '''and''' '''Overflow.'''

Here, we’ll learn about '''Float''' & '''Clear '''properties of an '''element '''in''' CSS.'''

We’ll also learn '''Overflow '''property.
|-
| | Glimpse of Link

[Video:

00:00 - 00:04

06:11 - 06:25]
| | After this is '''Link.'''

In this, we can '''style links''' by applying different properties to all the four states of '''link.'''
|-
| | Glimpse of List

[Video:

00:00 - 00:04

02:20 - 02:34]
| | Next tutorial is '''List'''.

In this we’ll learn about '''list''' properties to '''style''' and '''format lists.'''

Like''' type, background-color, '''etc
|-
| | Glimpse of Table

[Video - Table: 00:00 - 00:02

Video - Advanced Table Design: 00:00 - 00:04

Video - Advanced Table Design: 03:35 - 03:43 ]
| | '''Table '''and''' Advanced Table Design''' in '''CSS''' are next tutorial in this series.

It will teach us to '''style''' and '''format tables''' using '''CSS''' '''table''' properties.
|-
| | Glimpse of Forms

[Video:

00:00 - 00:04

11:49 - 12:03 ]
| | Next tutorial is '''Forms'''.

In this we’ll learn to '''style''' and '''format forms '''using various''' CSS properties.'''

Like '''border''', '''background-color, padding, '''etc.
|-
| | Glimpse of Counters

[Video:

00:00 - 00:06

06:45 - 06:58
| | The tutorial named '''Counters '''is next in the series.

With the help of this tutorial, we will learn to number '''elements''' automatically in a '''webpage.'''
|-
| | Glimpse of Multi-column Layout

[Video:

00:00 - 00:06

4:04 - 4:17

| | Next tutorial is '''Multi-column Layout.'''

In this tutorial, learners can create '''Multi-column Layouts '''of their''' webpages.'''
|-
| | Glimpse of Web layout

[Video:

00:00-00:05

7:35 - 07:49
| | The last tutorial is '''Web layout.'''

In this, learners will be able to design and structure '''web pages '''with proper '''web layout.'''
|-
| | 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 '''CSS''' and
* The tutorials covered in this series

|-
| | 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:

Answers for THIS Spoken Tutorial
| | Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
| | Slide:

Forum for specific questions:

| | The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
| | Slide: Acknowledgement
| | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
| | Slide: Thanks
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C4/Web-Layout-in-CSS/English

2021-01-06T02:45:17Z

Nehasolanki: Created page with "'''Title of the script: '''Web Layout in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Ke..."

'''Title of the script: '''Web Layout in CSS

'''Author:''' Neha Solanki

'''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 Web Layouts,''' '''CSS Header, CSS Menu Bar, CSS Content, CSS Footer

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

* Structure the '''layout '''of a '''web page '''using''' CSS'''

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''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: Web Layout
| |
* For clarity and easy accessibility the content has to be organised on a '''web page'''.
* Using '''CSS '''we can structure the '''web layouts '''as per our requirements.

|-
| | Slide: Web Layout
| | A '''web page''' is divided into various parts:

* '''Header'''
* '''Menu Bar'''
* '''Content'''
* '''Footer'''

|-
| | Slide: Web Layout

[Image = 3image.png]
| | There are many different ways to structure our '''web page'''.

This is the most common structure.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css.'''
|-
| | Point to Myweb.html in my-css folder
| | For this demonstration, I’m using the file '''Myweb.html'''.

The same is available in the '''Code files''' link for practice.
|-
| | Open Myweb.html in gedit
| | Open the file '''Myweb.html''' in a '''text editor.'''
|-
| | [gedit - Myweb.html]

Highlight:

All code
| | In this '''HTML''' file, I have already created some '''elements.'''

Like, a title for the '''page '''followed by three '''links'''.

Then some '''paragraphs '''with''' headings'''.

I have linked this '''HTML '''file to''' webstyle.css stylesheet'''.
|-
| | Open Myweb.html in firefox
| | Switch to the '''my-css''' folder.

Now open the file '''Myweb.html''' in a '''web browser'''.
|-
| | [browser]
| | Observe the '''page'''.

This '''page''' is not structured properly.

Using '''CSS '''properties, I will make a proper '''layout''' for this '''web page'''.

Let's start with the '''header'''.
|-
| | Slide: Header
| |
* '''Header''' is placed at the top of the '''web''' '''page'''.
* It contains the title,''' logo, search bar''' etc.

Let us understand this through example.
|-
| | Switch to my-css folder
| | Switch to the '''my-css''' folder.
|-
| | Open webstyle.css in gedit
| | Now open the file '''webstyle.css''', in any''' text editor.'''

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

Type:

.header {

background-color: #4d4d4d;

color: #ffffff;

padding: 22px;

text-align: center;}
| | Type the code as shown.

I have created a '''class '''named '''“header”'''.

You can give any name of your choice.

I have set some properties for this '''class.'''

These are '''background-color, color, padding''' and '''text-align '''properties.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Only narration
| | Now I will assign this '''header class''' to the '''h1 heading '''in the''' web page'''.
|-
| | Switch to Myweb.html
| | Switch to the '''Myweb.html''' file.
|-
| | [gedit - Myweb.html]

Update:

<nowiki><div class ="header"></nowiki>

<nowiki><h1> Welcome to Spoken Tutorial </h1></nowiki>

<nowiki></div></nowiki>

| | Using the '''div tag''', I''' '''will assign the '''class''' '''header''' to the '''h1 heading'''.

Inside the '''body''', update the '''heading''' as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the heading
| | Observe the modified '''heading'''.

Next we will see how to structure the '''menu bar'''.
|-
| | Slide: Menu Bar
| |
* '''Menu bar''' consists of '''links''', which are used to navigate through the '''website'''.

Let us try this.
|-
| | Switch to webstyle.css
| | Switch to the '''webstyle.css''' file.
|-
| | [gedit - webstyle.css]

Type:

.menubar {

background-color: <nowiki>#d1e0e0;</nowiki>

padding: 4px 16px;}

a {

color: #000000;

text-align: center;

padding: 4px 16px;

text-decoration: none;}

a:hover {

background-color: #ffffff;

color: #ee7811;}
| | Next to '''header class''', type the code as shown.

I have created a '''class “menubar”''' and set '''background-color''' and '''padding '''property for this '''class'''.

Then I have set some properties for '''links'''.

I have also set some properties when the '''user''' moves the '''mouse '''over the '''links'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Only narration
| | Now I will assign this '''menu class''' to the '''links '''of the '''web page'''.
|-
| | Switch to Myweb.html
| | Switch to the '''Myweb.html''' file.
|-
| | [gedit - Myweb.html]

Update:

<nowiki><div class="menubar"></nowiki>

<a href="#">Tutorial</a>

<a href="#">Assignment</a>

<a href="#">Test</a>

<nowiki></div></nowiki>

| |

Inside the '''body''', next to the '''heading''', update the '''links''' as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the output
| | Observe the output.

Our new''' Menu bar''' is added to the '''web page.'''
|-
| | Slide: Content
| |
* '''Content '''is the main section of the '''web''' '''page'''.
* It can be divided into many '''columns '''for better readability.

|-
| | Slide: Content

[Image = 3image.png]
| | '''1-column layout '''is mostly used for mobile devices.
|-
| | Slide: Content

[Image = 2image.png]
| | '''2-column layout '''is''' '''mostly used for tablets and laptops.
|-
| | Slide: Content

[Image = 1image.png]
| | '''3-column layout '''is''' '''mostly used for desktops.
|-
| | Switch to webstyle.css
| | Switch to the '''webstyle.css''' file.
|-
| | [gedit - webstyle.css]

Type:

.col {float: left;

width: 30%;

padding: 7px;

text-align: justify;}

@media screen and (max-width:600px) {

.col{ width: 100%; } }
| | Now I will create a '''3-column layout''' for our content.

Next to the''' a:hover tag,''' type the''' '''code''' '''as shown.

|-
| | [gedit - webstyle.css]

Highlight:

.col {float: left;

width: 30%;

padding: 7px;

text-align: justify;}

@media screen and (max-width:600px) {

.col{ width: 100%; } }
| | I have created a''' class “col”''' and set the''' float''' to '''left '''and '''width '''to '''30%'''.

This will split my content into a '''3-column layout'''.

I have also set '''padding''' and '''text-align''' properties.

Here I have used the '''media rule'''.

When the '''browser window''' is '''600px '''or smaller, then the '''width '''of the '''column''' becomes '''100%'''.

This will display the content in '''1-column layout'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Only narration
| | Now I will assign this '''col class''' to the''' '''first three''' paragraphs '''on the '''web page'''.
|-
| | Switch to Myweb.html
| | Switch to the '''Myweb.html''' file.
|-
| | [gedit - Myweb.html]

Type:

<nowiki><div class = "col"></nowiki>

...

<nowiki></div></nowiki>

| | Inside the '''body''', add the '''div tag''' with the''' class col''' before the '''heading''' of all the '''paragraphs.'''

Then close the''' div tag''' at the end of each paragraph as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the output
| | Observe the output.

Our content is displayed in '''3-column layout'''.

Now resize the '''browser''' to '''600px '''or smaller.

On doing so, the content '''layout''' has changed to '''1-column layout.'''

And the '''columns '''get stacked on the top of other '''columns '''instead of next to each other.
|-
| | Slide: Footer
| |
* '''Footer''' is placed at the bottom of the '''web''' '''page'''.
* It contains details like '''copyrights, address,''' etc.

Let us understand this through example.
|-
| | Switch to webstyle.css
| | Switch to the '''webstyle.css''' file.
|-
| | [gedit - webstyle.css]

Type:

.footer {

clear:both;

background-color: #4d4d4d;

padding: 2px;

text-align: center;

color: #ffffff;}
| | Next to the '''media rule''', type the code as shown.

I have created a '''class “footer”''' and set some properties for this '''class'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Only narration
| | Now I will assign this '''footer class''' to the last '''paragraph '''of the '''web page'''.
|-
| | Switch to Myweb.html
| | Switch to the '''Myweb.html''' file.
|-
| | [gedit - Myweb.html]

Update:

<nowiki><div class="footer"></nowiki>

<nowiki><p>Copyright-2020</p></nowiki>

<nowiki></div></nowiki>

| | Inside the '''body''', update the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the output
| | Observe the modified '''footer '''now.

|-
| | Only narration
| | With this we have come to the end of this tutorial.

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

* Structure the '''layout '''of a '''web page '''using''' CSS'''

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

* Create a file '''layoutpage.html'''.
* Create the following parts:
** '''Header'''
** '''Menu bar'''
** '''Content : 2-columns'''
** '''Footer'''

|-
| | Slide: Assignment
| |
* Create a file '''layoutstyle.css.'''
* Style all the parts.

|-
| | Slide: Assignment
| |
* Link the '''layoutstyle.css''' file to '''layoutpage.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: About Workshop
| | The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
| | Slide: Forum questions
| | 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
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C4/Multi-column-Layout-in-CSS/English

2021-01-06T02:22:39Z

Nehasolanki: Created page with "'''Title of the script: '''Multi-column Layout in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapat..."

'''Title of the script: '''Multi-column Layout in CSS

'''Author:''' Neha Solanki

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

'''Novice Reviewer:''' Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Multi-column Layout, CSS Column, column-count, column-width, column-gap, column-rule-style, column-rule-width, column-rule-color, column-rule, column-span

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

* How to create a '''Multi-column Layout '''in''' CSS'''

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''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: Multi-column Layout
| | '''Multi-column layout'''
* It is used mostly for creating layouts for newspapers, magazines, etc.
* It is created and styled using the '''CSS column '''properties.

|-
| | Slide: Column Property

{| style="width: 22em;"
|-
| '''column-width''' || '''column-count'''
|-
| '''column-gap || '''column-rule-style'''
|-
| '''column-rule-width || '''column-rule-color'''
|-
| '''column-rule''' || '''column-span'''
|}

| | These are some '''CSS''' '''column''' properties.

Let us understand these using some examples.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css.'''
|-
| | Point to Mycolumn.html in my-css folder
| | For this demonstration, I’m using the file '''Mycolumn.html'''.

The same is provided in the '''Code files''' link for practice.
|-
| | Open Mycolumn.html in gedit
| | Open the file '''Mycolumn.html''' in the '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | [gedit - Mycolumn.html]

Highlight all
| | In this '''HTML '''file, I have written some text and linked it to''' Colstyle.css stylesheet'''.
|-
| | Switch to my-css folder
| | Switch to the '''my-css''' folder.
|-
| | Open Colstyle.css in gedit
| | Now open the file '''Colstyle.css''', in any''' text editor.'''

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

Highlight: body property
| | I have set the '''background color''' for this page to''' light cyan.'''
|-
| | Open Mycolumn.html in firefox
| | Switch to the '''my-css''' folder.

Now open the file '''Mycolumn.html''' in a '''web browser'''.

I have opened it in the''' Firefox web browser'''.
|-
| | [Firefox]

Highlight the text
| | Observe the page.

We see a paragraph displayed without any formatting.

Now I will apply all the '''column '''properties to this page.
|-
| | Slide: column-width
| |
* '''column-width''' property is used to '''set''' the '''width '''of every '''column'''.
* It also controls the number of '''columns'''

Let us try this.
|-
| | Switch to Mycolumn.html
| | Switch to the '''Mycolumn.html''' file.
|-
| | [gedit - Mycolumn.html]

Type: <nowiki><div class="col"></nowiki>

Type: <nowiki></div></nowiki>
| | I will add the '''div tag''' with '''class “col”''' for the text.

Next to the '''body''' '''tag,''' add the '''div tag''' with the '''class col.'''

Then before the''' body closing tag''', close the '''div tag'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to colstyle.css
| | Switch to the '''Colstyle.css''' file.
|-
| | [gedit - Colstyle.css]

Type:

.col {column-width: 400px;}
| | I will create a '''class “col”'''.

Next to the '''body tag''', type the code as shown.

Here I have '''set''' the '''width '''to '''400 pixels'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

In my case, the content is divided into '''two columns'''.

It may vary in your case, as it depends on the size of the '''browser'''.

Press '''Ctrl '''and '''minus '''keys together to increase the no. of '''columns'''.

If we press '''Ctrl '''& '''+ '''keys together the number of '''columns '''will decrease accordingly.
|-
| | Slide: column-count
| |
* '''column-count''' property is used to divide the '''element''' into a number of '''columns'''.

Let us try this.
|-
| | Switch to Colstyle.css
| | Switch to the '''Colstyle.css''' file.
|-
| | [gedit - Colstyle.css]

Update:

.col {column-count: 2;}
| | Update the property for '''col''' '''class''' as shown.
|-
| | [gedit - Colstyle.css]

Highlight: column-count: 2;
| | Here I have set the '''column-count''' to '''2'''.
|-
| | 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 content is divided into two '''columns.'''

Press '''Ctrl '''and '''minus '''keys or '''Ctrl '''and '''plus '''keys together.

The number of '''columns '''will remain as it is.
|-
| | [gedit - Colstyle.css]

Highlight: column-count: 2;
| | We can divide our content into any number of '''columns '''by changing '''column-count''' value.
|-
| | Slide: column-gap
| |
* '''column-gap''' property is used to '''set''' the gap between '''columns.'''

Let us try this.
|-
| | Switch to Colstyle.css
| | Switch to the '''Colstyle.css''' file.
|-
| | [gedit - Colstyle.css]

Type:

column-gap: 50px;
| | Inside the''' '''class''' col, '''next to the''' column-count '''property''',''' type the''' '''code''' '''as shown.

I have '''set''' a gap of '''50 pixels''' between the '''columns.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

'''50 pixel''' gap is '''set''' between the '''columns.'''
|-
| | Slide: column-rule-style
| |
* '''column-rule-style''' property is used to display a ruler between the '''columns.'''
* Rulers can be styled as '''solid, dotted, dashed, '''etc'''.'''

Let us try this.
|-
| | Switch to Colstyle.css
| | Switch to the '''Colstyle.css''' file.
|-
| | [gedit - Colstyle.css]

Type:

column-rule-style: solid;
| | Inside the''' '''class''' “col”, '''next to the''' column-gap '''property''',''' type the''' '''code''' '''as shown.

I have '''set''' a '''solid '''ruler between the '''columns'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

A solid ruler is inserted between the '''columns'''.
|-
| | Slide: column-rule-width
| |
* '''column-rule-width''' property is used to set the '''width '''of ruler between '''columns.'''
* This property works after specifying''' column-rule-style '''property.

Let us try this.
|-
| | Switch to Colstyle.css
| | Switch to the '''Colstyle.css''' file.
|-
| | [gedit - Colstyle.css]

Type:

column-rule-width: 5px;
| | Inside the''' class “col”, '''next to the''' column-rule-style '''property''',''' type the''' '''code''' '''as shown.

I have set the '''width '''of the '''line '''to''' 5 pixels'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Observe the output.

The width of the line is increased
|-
| | Slide: column-rule-color
| |
* '''column-rule-color''' property is used to set the '''color '''of ruler between '''columns.'''
* This property works after specifying''' column-rule-style '''property.

Let us try this.
|-
| | Switch to Colstyle.css
| | Switch to the '''Colstyle.css''' file.
|-
| | [gedit - Colstyle.css]

Type:

column-rule-color: blue;
| | I will set the '''color '''of the ruler to''' blue.'''

Inside the''' '''class''' “col”, '''next to the''' column-rule-width '''property''',''' type the''' '''code''' '''as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]
| | Observe the output.

Blue color is set for the ruler.
|-
| | Slide: column-rule
| |
* '''column-rule''' is shorthand property for setting '''style, width '''and '''color '''of''' '''ruler'''.'''

Let us try this.
|-
| | Switch to Colstyle.css
| | Switch to the '''Colstyle.css''' file.
|-
| | [gedit - Colstyle.css]

Update:

.col {
column-count: 2; column-gap: 50px; column-rule: solid 3px red; }

| | Update the property for '''col''' '''class''' as shown.
|-
| | [gedit - Colstyle.css]

Highlight:

column-rule: solid 3px red;
| | Here I have '''set''' the ruler '''style '''as '''solid''', '''width 3 pixels''' and '''color''' '''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.

Ruler is set between the '''columns '''having''' style solid, width 3 pixels '''and '''color red.'''
|-
| | Slide: column-span
| |
* '''column-span''' property is used to stretch an '''element''' across '''columns'''.
* Its values are: '''none, all, initial '''and''' inherit'''.
* Its default value is '''none.'''

Let us try this.
|-
| | Only narration
| | To understand this property, first let us add a '''heading '''to the page.
|-
| | Switch to Mycolumn.html
| | Switch to the '''Mycolumn.html''' file.
|-
| | [gedit - Mycolumn.html]

Type:

<nowiki><h1> Spoken Tutorial </h1></nowiki>
| | After the '''div start tag''', type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to Colstyle.css
| | Switch to the '''Colstyle.css''' file.
|-
| | [gedit - Colstyle.css]

Type:

h1 {text-align: center;}
| | Next to the''' class “col”,''' type the''' '''code''' '''as shown.

I have set the '''h1 heading to centre align.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

'''Heading '''is added to the first '''column''' not to the whole page.
|-
| | [gedit - Mycolumn.html]

Highlight:

<nowiki><div class="col"></nowiki>

<nowiki><h1>Spoken Tutorial</h1></nowiki>
| | This is because the '''heading '''is included inside the '''class col'''.

Here the default '''column-span''' value is '''none'''.
|-
| | Switch to Colstyle.css
| | Switch to the '''Colstyle.css''' file.
|-
| | [gedit - Colstyle.css]

Type:

column-span: all;
| | Inside the '''h1''' tag, next to the '''text-align '''property''' ''', type the''' '''code''' '''as shown.

I have '''set''' the '''column-span '''to all.
|-
| | 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 heading spans across all the '''columns'''.

Likewise we can customise our web page content using '''CSS column''' properties, as required.
|-
| | 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:

* '''Multi-column Layout '''in''' CSS'''

|-
| | Slide: Assignment
| As an assignment

* Open the file '''webpage.html''' which you have created earlier.
* Add some content more than 10 lines'''.'''
* Open the file '''styles.css '''which you have created earlier.
* Divide the content into '''4 columns'''.
* Using shorthand add a '''dotted red 4px''' '''ruler.'''

|-
| | 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: About Workshop
| | The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
| | Slide: Forum questions
| | 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
| | This is Neha Solanki from IIT Bombay.

Thank you for watching
|-
|}

CSS/C4/Counters-in-CSS/English

2021-01-06T01:45:32Z

Nehasolanki: Created page with "'''Title of the script: '''Counters in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keyw..."

'''Title of the script: '''Counters in CSS

'''Author:''' Neha Solanki

'''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 Counters, CSS counter-reset, CSS counter-increment, CSS content, CSS counter() or counters() function

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

* '''Counters '''in''' CSS '''and
* Their properties and usage

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''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: Counters
| |
* '''Counters''' are variables used for numbering '''elements''' automatically in the '''webpage.'''
* They are incremented by '''CSS''' rules.

|-
| | Slide: Counter Property
| | The properties used for '''counters''' are:

* '''counter-reset '''
* '''counter-increment'''
* '''content'''
* '''counter() '''or''' counters() function'''

|-
| | Slide: counter-reset
| |
* '''Counter-reset''' property is used to create a '''counter''' or reset a '''counter''' value.
* By default, the '''counter''' value is initialized to '''zero'''.

|-
| | Slide: counter-increment
| |
* '''Counter-increment''' property is used to increment '''counter '''values.
* It is useful for automatically increasing step values.

|-
| | Slide: content
| |
* '''Content''' property is used to generate content for an '''element'''

|-
| | Slide: counter() or counters() function
| |
* '''counter() '''or''' counters() function '''assigns the '''counter''' value to an '''element'''.

Let us understand these through examples.
|-
| | Open my-css''' '''folder
| | Go to the practice folder '''my-css.'''
|-
| | Point to Mycounter.html in my-css folder
| | For this demonstration, I’m using the file '''Mycounter.html'''.

The same is available in the '''Code files''' link for practice.
|-
| | Open Mycounter.html in gedit
| | Open the file '''Mycounter.html''' in the '''text editor.'''

I have opened it in the '''gedit Text Editor.'''

|-
| | [gedit - Mycounter.html]

Highlight:

All code
| | This '''HTML''' file has one '''h1 heading '''- '''Welcome to Farmer's Market.'''

This is followed by three '''h2 headings''', having their respective content.
|-
| | Switch to my-css folder
| | Switch to the '''my-css''' folder.
|-
| | Open counterstyle.css
| | Now open the file '''counterstyle.css''' in any''' text editor.'''

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

Highlight: All code
| | Here, I have already defined some properties for '''body '''and '''h1 heading.'''
|-
| | Open Mycounter.html in firefox
| | Switch to the '''my-css''' folder.

Now open the file '''Mycounter.html''' in a '''web browser'''.

I have opened it in the''' Firefox web browser'''.
|-
| | [Firefox]

Highlight the page
| | Observe the page.

In this page, we can see three '''h2 headings:'''

'''Vegetables''',''' Fruits''',''' Dry Fruits.'''

Now I will apply '''counter '''properties to these '''headings'''.
|-
| | Switch to counterstyle.css
| | Switch to the '''counterstyle.css''' file.
|-
| | [gedit - counterstyle.css]

Type:

counter-reset: countval;
| | First I will create a '''counter'''.

Inside the '''body tag''', next to the '''background-color''' property, type the code as shown.

A''' Counter''' named '''countval''' is created.
|-
| | [gedit - counterstyle.css]

Type:

h2::before {counter-increment: countval;

content: "Category " counter(countval) ". ";}
| | Now I will assign this '''counter''' to '''h2 heading.'''

Next to the '''h1 tag''', type the code as shown.

|-
| | [gedit - counterstyle.css]

Highlight: h2::before
| | '''Counter'''s will be displayed before the '''heading''' content.

|-
| | [gedit - counterstyle.css]

Highlight:

counter-increment: countval;
| | By using '''counter-increment''' property I have incremented the '''countval counter.'''

|-
| | [gedit - counterstyle.css]

Highlight:

content: "Category "

". ";

counter(countval)
| | Here '''content''' property will generate the word “'''category'''” first.

Then it will generate the '''counter''' value followed by the '''dot symbol'''.

Here '''countval''' is assigned to the '''counter function'''.
|-
| | 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, '''Category 1. Category 2. Category 3.'''

are added before the '''content''' of the '''headings'''.

Here the word “'''Category'''” is the '''content''' added to the '''counter.'''

'''1, 2 '''and''' 3''' are the '''counters'''.
|-
| | Slide: Nested Counters
| |
* '''Nested counter''' means a '''counter''' within a '''counter'''.

Let us try this.
|-
| | Switch to counterstyle.css
| | Switch to the '''counterstyle.css''' file.
|-
| | Point to''' h1''' heading.

Highlight '''h1''' heading.
| | First I will create a '''counter''' for '''h1 heading “Welcome to Farmer's Market”'''

Then I will create''' h2 heading counters '''within the '''h1 heading counter.'''
|-
| | [gedit - counterstyle.css]

Update:

counter-reset: countmain;
| | For this, create a '''counter''' named '''countmain''' for '''h1 heading'''.

Inside the''' body tag, '''update the '''counter-reset '''property''' '''as shown.
|-
| | [gedit - counterstyle.css]

Type:

counter-reset: countval;
| | Now I will create a '''counter''' named '''countval''' for '''h2 heading''' inside '''h1 heading'''.

Inside the''' h1 tag, '''next to the''' text-align '''property''',''' type the''' '''code''' '''as shown.
|-
| | [gedit - counterstyle.css]

Type:

h1::before { counter-increment: countmain;

content: counter(countmain) ". ";}
| | I will assign the '''counter''' '''countmain '''to '''h1 heading.'''

Next to '''h1 tag''', type the code as shown here.

|-
| | [gedit - counterstyle.css]

Update:

h2::before { counter-increment: countval;

content: counter(countmain) "." counter(countval) " ";}
| | Now I will assign the '''counter''' '''countval '''to '''h2 heading.'''

Update the '''h2::before 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 output.

'''Counter''' '''“1. '''” is displayed before the '''heading''' '''“Welcome to Farmer's Market”.'''

'''Counter''' '''“1. '''” is displayed as a main '''counter.'''

The sub-counters for '''h2 headings''' are displayed as:

'''1.1 Vegetables'''

'''1.2 Fruits'''

'''1.3 Dry Fruits'''

In this manner, you can add '''counters''' to your '''webpage, '''as per your requirements.
|-
| | 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:

* '''Counters '''in''' CSS '''and
* Their properties and usage

|-
| | Slide: Assignment
| As an assignment

* Open the file '''webpage.html''' which you have created earlier.
* Add three '''h3 headings.'''
* Open the file '''styles.css '''which you have created earlier.
* Set '''counter '''for''' h3 headings'''
* 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: About Workshop
| | The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
| | Slide: Forum questions
| | 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
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C3/Forms-in-CSS/English

2020-11-11T14:19:15Z

Nehasolanki: Created page with "'''Title of the script: '''Forms in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keyword..."

'''Title of the script: '''Forms in CSS

'''Author:''' Neha Solanki

'''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 Forms, CSS Forms Border, CSS Forms Width, CSS Forms Padding, CSS Forms Color, CSS Forms Focus, CSS Forms Image, CSS Forms Animation, CSS Forms Label, Media rule, CSS Forms Select Menu, CSS Forms Textarea, CSS Forms Input Buttons, CSS Responsive Form

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

* Styling '''Forms '''in''' CSS '''and
* Customise the '''input fields''' as per our requirements

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''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: Forms
| |
* Using '''CSS''' we can style and format '''forms '''as per our requirements.

|-
| | Slide: Forms

{| style="width: 22em;"
|-
| '''Border''' || '''Width'''
|-
| '''Padding || '''Color'''
|-
| '''Focus''' || '''Image'''
|-
|'''Animation'''
|}
| | These are some '''CSS '''properties used for '''forms''':
|-
| | Slide: Forms
| | We will learn how to design:

* '''Input text'''
* '''Label'''
* '''Select Menu'''
* '''Textarea'''
* '''Input Buttons'''

|-
| | Slide: Forms
| | We will also learn how to create a '''Responsive Form.'''

Let us understand these one by one.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css.'''
|-
| | Narration
| | For this demonstration I have created a '''Registration form '''and saved it as '''MyWebForm.html'''

The same is available in the '''Code files '''link.
|-
| | [gedit - MyWebForm.html]
| | Open the file '''MyWebForm.html '''in any '''text editor.'''
|-
| | [gedit - MyWebForm.html] Highlight:

<form>

<label for="fname"> First Name </label>

<input type="text" name="fname">

<input type="button" value="Submit">

</form>

<link rel="stylesheet" href="Style.css">
| | Here I have created a simple '''form''' to fetch '''First Name''' from the '''user'''.

And linked this file to '''style'''.'''css''' stylesheet.
|-
| | Open MyWebForm.html in firefox
| | Switch to the '''my-css''' folder.

Now open the file '''MyWebForm.html''' in a '''web browser'''.
|-
| | [Firefox] Highlight the output
| | Observe the output.

It displays an '''input textbox''' to get the '''First name''' from the '''user'''.
|-
| | Narration
| | Let us apply '''CSS '''properties to this '''form'''.
|-
| | Slide: Border

| |
* '''Border '''property is used to set the size, type and color for the '''borders'''.
* '''Border-radius''' property is used to make the corners round.

|-
| | Open Style.css in gedit
| | Switch to the '''my-css''' folder.

Open the file '''Style.css''' in any '''text editor'''.

I have opened it in the '''gedit text editor'''.
|-
| | [gedit - Style.css] Type:

input[type=text]{

border: 3px solid purple;

border-radius: 10px;}
| |

Now type the code as shown.
|-
| | [gedit - Style.css]

Highlight:

input[type=text]
| | The way to define the '''CSS''' property for a '''form''' is different from other '''elements'''.

Here I have written the name of the '''form element''' first.

Then within the square bracket I have mentioned the '''type''' of the '''element'''.
|-
| | [gedit - Style.css] Highlight:

border: 3px solid purple;

border-radius: 10px;
| | I have set the '''border''' '''size''' to '''3 pixels''', '''border''' '''type''' to '''solid''' and '''border color '''to''' purple.'''

To increase the size of roundness I have set the '''radius''' to '''10 pixels'''.
|-
| | 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 is set now.
|-
| | Only narration
| | Next, using '''CSS width '''property we can set '''width''' of the '''form elements.'''

Let us try this.
|-
| | Switch to Style.css
| | Switch to the '''Style.css''' file.
|-
| | [gedit - Style.css] Type:

width: 60%;
| | I will set the '''width '''of the '''input field '''to''' 60% '''of the '''web page'''.

Inside the''' input text tag''', next to '''border-radius''' 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 output.

Width is set to 60% of the width of '''web''' '''page'''
|-
| | Only narration
| | Next, using''' Padding '''property we can add some space around the '''text'''.

Let us try this.
|-
| | Switch to Style.css
| | Switch to the '''Style.css''' file.
|-
| | [gedit - Style.css] Type:

padding: 10px;
| | I will set the '''padding '''to''' 10 pixels.'''

Inside the''' input text tag''', next to '''width''' 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 output.

Size of the '''input field''' has increased because we have set the '''padding''' space to '''10 pixels.'''
|-
| | Only narration
| | Using '''CSS color '''property we can set colors to the forms, as well.
|-
| | Switch to Style.css
| | Switch to the '''Style.css''' file.
|-
| | [gedit - Style.css] Type:

background-color: lightcyan;

color: blue;
| | I will set the '''background color '''to''' light cyan '''and the '''color '''of the text to''' blue.'''

Inside the''' input text tag''', next to '''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 output.

'''Background color''' is set''' '''to''' light cyan.'''
|-
| | [Firefox] Type: Spoken
| | Now type some text in the''' input field '''for testing purposes.

We can see the''' color '''of the text is''' blue.'''
|-
| | Slide: Focus
| | Next, '''Focus selector '''is used to '''style''' the '''input field '''when the '''element '''is focused.

Let us try this.
|-
| | Switch to Style.css
| | Switch to the '''Style.css''' file.
|-
| | [gedit - Style.css] Type:

input[type=text]:focus {background-color: lightgreen;}
| | I will set the '''background color '''to''' green '''when the '''input text box''' is focused.

Next to the''' input text 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.

Now click on the '''input field''', and see the '''background''' '''color''' changes to '''green'''.

Now click anywhere outside the''' input field.'''

The '''background color''' of the '''input''' '''textbox''' changes to its original color, '''light cyan.'''
|-
| | Slide: Image
| |
* '''background-image '''property is used to set an '''image''' inside the '''input field'''.
* Along with this, we can use '''background-position '''and''' background-repeat''' property

Let us try this.
|-
| | Switch to Style.css
| | Switch to the '''Style.css''' file.
|-
| | [gedit - Style.css]

Type:

background-image:url("index.png");

background-repeat: no-repeat;
| | I will set a '''background image''' with '''no repeat '''property.

Inside the''' input text tag''', next to '''color''' property, type the code as shown.
|-
| | [gedit - Style.css]

Highlight: "index.png"
| | This image is available in the '''Code Files''' link on this tutorial page.

Please download and keep it in the folder where you have saved your code files.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

Our selected '''background image''' is set in the '''input field.'''
|-
| | Only narration
| | We see that the text overlaps the '''image'''.

To solve this problem, we will use '''text-indent''' property.
|-
| | Switch to Style.css
| | Switch to the '''Style.css''' file.
|-
| | [gedit - Style.css]

Type:

text-indent: 50px;
| | I will set the '''text indentation '''to''' 50 pixels.'''

Next to the''' background-repeat '''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

Type: Spoken
| | Observe the output.

We can see that text does not overlap the '''image'''.
|-
| | Slide: Animation
| |
* '''Animation''' can be done in '''forms''' using '''transition''' property.
* '''Transition''' property is used to change the property values over a given duration.

Let us try this.
|-
| | Switch to Style.css
| | Switch to the '''Style.css''' file.
|-
| | [gedit - Style.css] Type:

transition: width 0.2s ease-in-out;
| | Inside the''' input text tag''', next to the '''text indent '''property, type the code as shown.
|-
| | [gedit - Style.css] Highlight

transition: width 0.2s;
| | Here the '''transition '''property is set for '''width '''with a duration of '''0'''.'''2 seconds'''
|-
| | [gedit - Style.css] Type:

width: 100%;
| | Inside the '''input focus 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.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

Now click on the '''input field'''.

The '''width''' of the '''input text box''' is scaled to '''100%''' of the '''web page'''.

Now click anywhere outside the '''input field''',

The '''width''' of the '''input textbox is '''scaled back to its previous size.
|-
| | Switch to '''my-css '''folder
| | Switch to the '''my-css '''folder.
|-
| | Point to the files

'''MyForm.html'''

'''formstyle.css'''

In the file browser
| | Likewise I have formatted some more '''form''' attributes in the file '''MyForm.html'''.

I have added some '''CSS''' to '''Style''' the '''form''' in the file '''formstyle.css'''.

This file is available in the '''Code files''' link.

Let us look at them.
|-
| | [gedit - '''MyForm.html''']

Highlight the '''div''' tags
| | First we will see the '''HTML code'''.

Open this file in any '''text editor'''

Using the '''div tag''', I have formatted the '''form''' for better visibility.
|-
| | [gedit - '''MyForm.html'''] Highlight

class=”column1”

class=”column2”

class=”column3”
| | Inside the '''div tag''', I have declared the '''CSS''' '''class''' named '''column1, column2 '''and '''column3.'''
|-
| | [gedit - '''MyForm.html''']

Highlight '''Select''' section
| | Then I have included the '''select menu''' to select the '''country'''.
|-
| | [gedit - '''MyForm.html''']

Highlight '''Text''' area
| | I have also included a '''text area''' to get the information about the '''user'''.

It is used to get a multi-line text input from the '''user'''.
|-
| | [gedit - '''formstyle.css''']
| | Now we will have a look at the '''CSS''' file.
|-
| | Open formstyle.css in gedit
| | Switch to the '''my-css''' folder.

Open the file '''formstyle.css''' in any '''text editor'''.

I have opened it in the '''gedit text editor'''.
|-
| | [gedit - '''formstyle.css'''] Highlight

'''column''' '''1''', '''column 2, column 3''' properties
| | Here I have defined all the classes '''column1,''' '''column2 '''and '''column3.'''

Then based on my requirement I have set the '''float''', '''width''' and '''top''' '''margin''' values.
|-
| | [gedit - '''formstyle.css''']

Highlight: '''CSS''' property for '''label'''
| | For the '''label''' property, I have set the '''font''' '''weight''' to '''bold''' and '''padding''' to '''8 pixels.'''
|-
| | [gedit - '''formstyle.css''']

Highlight: '''CSS''' property for '''Select''' menu
| | For the '''Select''' menu, I have set some properties.

Like '''width, padding, border, border-radius, background-color '''&''' color '''property'''.'''
|-
| | [gedit - '''formstyle.css'''] Highlight:

'''CSS''' property for '''input text box ''', '''textarea &''' '''Button'''
| | Lastly I have also set some property for the '''input text box ''', '''textarea''' and '''button'''.
|-
| | Open '''MyForm.html''' in firefox
| | Switch to the '''my-css''' folder.

Now open the file '''MyForm.html''' in a '''web browser'''.
|-
| | [Firefox]
| | Observe the output.
|-
| | [Firefox]

Point to the '''textarea''' boundary
| | Let us resize the text area.

Place the mouse pointer at the bottom right corner of the textarea and drag.

To stop this resizing, we use '''resize '''property.
|-
| | Switch to formstyle.css
| | Switch to the '''formstyle.css''' file.
|-
| | [gedit - '''formstyle.css]'''

Type: resize: none;
| | Inside the '''textarea tag,''' next to '''color '''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 that we cannot resize the '''textarea '''anymore.
|-
| | [Firefox]

Highlight the page
| | Now resize the browser width to '''600px '''or smaller.

We see that alignment of this form has not changed.

Note that, this representation of the '''form''' is not '''user friendly''' for small screen '''users'''.
|-
| | Only narration
| | So I will make it '''user friendly''' for small screen '''devices'''.

For this, I will create a '''responsive form''' using the '''Media rule.'''
|-
| | Slide: Responsive Forms
| |
* Using '''responsive''' '''forms''' we can make our '''form''' compatible for all screen sizes.

|-
| | Slide: Media rule
| |
* '''Media rule''' is used to set some '''CSS''' properties if a certain condition is true.

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

Type:

@media screen and (max-width: 600px) {

.column1, .column2{

width: 100%;} }
| | Next to the '''input button tag''', type the code as shown.

Here I have used '''media''' '''rule'''.

It sets the '''label, input text''', '''select menu, textarea '''and '''input button '''to''' 100% width'''

This happens when the '''width''' of the '''browser window''' is '''600px '''or smaller.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | The '''label, input text''', '''select menu, textarea '''and '''input button '''stack on top of each other.

This is because the '''width '''of all the '''elements '''is now set to '''100%'''.
|-
| | 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:

* Styling '''Forms '''in''' CSS '''and
* Customise the '''input fields''' as per our requirements

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

* Create a file '''loginpage.html'''.
* Obtain the following details from the user
** Email Address
** Password

|-
| | Slide: Assignment
| |
* Add a '''select''' '''menu''' to select the '''gender'''.
* Add a '''button''' as '''Login'''

|-
| | Slide: Assignment
| |
* Create a file '''webformstyles.css.'''
* Style all the '''form elements'''.
* Link the '''webformstyles.css''' file to '''loginpage.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: Forums
| | 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
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C3/Advanced-Table-Design-in-CSS/English

2020-11-11T13:55:56Z

Nehasolanki: Created page with "'''Title of the script: '''Advanced Table Design in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganap..."

'''Title of the script: '''Advanced Table Design in CSS

'''Author:''' Neha Solanki

'''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 Table, CSS Table Decoration, CSS Table Horizontal Border Divider, CSS Table Hover Color, Table Zebra Stripes, CSS Table Column Decoration, CSS Table Image, CSS Table Layout, CSS Table Responsive

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

* Some''' advanced Table designs''' in''' CSS'''

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''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: Table
| |
* Using '''CSS''' we can design '''tables '''in many ways.

|-
| | Slide: Table

'''Horizontal Border Divider'''

'''Hover Color'''

'''Zebra Stripes'''

'''Column Decoration'''

'''Setting Background Image'''

'''Table Layout'''

'''Responsive Table'''
| | These are the different ways to design '''tables.'''

Let us understand these through examples.
|-
| | Only narration
| | '''Border''' property is used to set and '''style''' the '''borders''' for the '''table.'''
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css'''
|-
| | Point to mystyle.css in my-css folder
| | For this demonstration, I’m using the file '''mystyle.css'''.

The same is available in the '''Code files''' link for practice
|-
| | Open mystyle.css
| | Now open the file '''mystyle.css''', in any''' text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
| | Only narration
| | First, I will remove the previously set '''border '''style for the '''table.'''
|-
| | [gedit - mystyle.css] Delete:

table, th, td { border: 2px solid black;}
| | Delete the code as shown.
|-
| | [gedit - mystyle.css] Type:

th, td {

border-bottom: 2px solid black;}
| | Now I will set a '''border''' divider for the''' heading '''and '''standard cell.'''

Next to the '''caption tag, '''type the code as shown.
|-
| | [gedit - mystyle.css] Highlight:

border-bottom: 2px solid black;
| | We have used '''border-bottom''' property.

It sets the '''horizontal border divider''' with size '''2 pixels''', style '''solid '''and color '''black'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in firefox
| | Switch to the '''my-css''' folder.

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

Highlight the output
| | Observe the output.

We see '''horizontal border dividers''' are added after the '''heading '''and each '''standard cell.'''
|-
| | Only narration

| | Let’s decorate the '''table '''some more.

Let’s set the '''background color '''of a '''row '''to a particular '''color''' on hovering the mouse.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css] Type:

tr:hover {background-color: ivory;}
| | Whenever the '''user''' hovers the mouse over any row, '''background color''' will be set to '''ivory.'''

Next to the '''th,td tag, '''type the code as shown.
|-
| | [gedit - mystyle.css] Highlight:

tr:hover {background-color:ivory;}
| | I have defined the''' hover selector '''for''' table row''' to set the '''background color.'''
|-
| | 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 move the '''mouse '''over any '''row '''of the '''table'''.

'''Background color '''of the''' row '''changes to''' ivory'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css] Delete:

tr:hover {background-color: ivory;}

Ctrl+S
| | For the next '''designing style''', delete this code and save the file.
|-
| | Only narration
| | Now I will decorate the '''table '''by setting an '''image '''as a '''background '''for the '''table'''.
|-
| | [gedit - mystyle.css] Type:

background-image:url("design.png");
| | Inside the '''table tag''', next to the '''width '''property''', '''type the code as shown.
|-
| | [gedit - mystyle.css] Highlight:

design.png
| | This image is available in the '''Code Files''' link on this tutorial page.

Please download and keep it in the same folder where you have saved your code files.
|-
| | 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 a new '''background''' '''image '''is set for the '''table.'''
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css] Delete:

background-image:url("design.png");

Ctrl+S
| | Once again for the next '''designing style''', delete this code and save the file.
|-
| | Narration
| | Now I will decorate the '''table''' with '''zebra''' '''stripes''' to make it more attractive.
|-
| | [gedit - mystyle.css] Type:

tr:nth-child(odd){

background-color: lightcyan;}
| | I will set the''' background color '''to''' light cyan '''for every '''odd row'''.

Next to the '''th, td tag '''type the code as shown.
|-
| | [gedit - mystyle.css] Highlight

tr:nth-child(odd)
| | By defining the '''selector''' for '''table rows''' like this, it sets the '''CSS''' property for that specific '''row'''.

If you need to style the '''odd rows''', enter the value as '''odd'''.

For '''even rows''', enter the value as '''even.'''
|-
| | 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 '''background''' '''color''' of the '''odd rows '''are set''' '''to''' light cyan.'''
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css] Delete:

tr:nth-child(odd)

{background-color: lightcyan;}

Ctrl+S
| |

For the next '''designing style''', delete this code

and save the file.
|-
| | Narration
| | Now I will decorate the '''table,''' column-wise.
|-
| | [gedit - mystyle.css] Type:

td:nth-child(1){background-color: lightpink;}
| | I will set the''' background color '''to''' light cyan '''for the first '''column'''.

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

Highlight

td:nth-child(1)

| | Here we have defined the''' selector '''for '''table data.'''

This will set the '''CSS''' property for that specific '''column'''.

Here, I have set it to value 1 to style the first column.
|-
| | 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 '''background''' '''color''' of the first '''column '''is set''' '''to''' light pink.'''
|-
| | Slide: Layout
| |
* '''Tables '''can expand and contract according to the text in the '''table'''.
* '''Layout''' property controls the expansion and contraction of the '''tables'''.

|-
| | Slide: Layout Values
| | Values of this property are:

* '''auto(default)''': '''column width''' is set automatically to fit the text.
* '''fixed''': '''width''' is fixed and it does not change automatically to fit the text.

Let us try this.
|-
| | Narration
| | First, let us make some changes to the text of the '''table.'''
|-
| | Open Mypage.html in firefox
| | Switch to the '''my-css''' folder.

Now open the file '''Mypage.html''' in the '''text editor'''.
|-
| | [gedit - Mypage.html] Update:

<td> GreenApple & YellowApple </td>
| | Inside the''' table tag, '''in the fifth row and first column, 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 output.

'''Width''' of the first '''column''' has increased to adjust the text.

As we haven’t set the '''layout '''property, the default '''auto''' value is considered.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css] Type:

table-layout: fixed;
| | Now I will set the '''layout''' to '''fixed'''.

Inside the''' table tag, '''next to''' width '''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 output.

Now the text is not affecting the total '''width '''of the '''table.'''

Here the '''table width''' is fixed.
|-
| | Only narration
| | Let’s understand how to create a '''responsive table.'''
|-
| | Slide: Responsive
| |
* '''Responsive''' property helps to display the '''tables''' smoothly on any screen size.
* It enables '''horizontal scroll bars''' to display full content of the '''table''' if required.

|-
| | Switch to '''my-css '''folder
| | Switch to the '''my-css '''folder.
|-
| | Only narration
| | To understand this property I have created a '''table.html''' web page

And '''tablestyle.css''' stylesheet.

The same are available in the '''Code files''' link for practice.

Please download and save it.
|-
| | Open table.html in gedit
| | Open the file '''table.html''' in the '''text editor.'''
|-
| | [gedit - table.html]

Highlight table
| | In this '''html '''file I have created a '''table''' and linked it to''' tablestyle.css '''stylesheet.
|-
| | Switch to '''my-css '''folder
| | Switch to the '''my-css '''folder.
|-
| | Open tablestyle.css in gedit
| | Now open the file '''tablestyle.css''', in any''' text editor.'''

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

body{background-color: lightpink;}

table,th,td {

border: 2px solid black;

border-collapse: collapse;

}
| | I have already set the '''background color''' for this page to''' light pink.'''

And''' '''some '''border''' properties for the table.
|-
| | Open table.html in firefox
| | Switch to the '''my-css''' folder.

Now open the file '''table.html''' in a web browser.
|-
| | [browser]

Highlight the output
| | Observe the output.

The displayed '''table''' is very wide in size.

So we have to use the horizontal scroll bar of the '''browser''' to see the full content.

When we scroll to see the '''table'''’s''' '''content, the entire page gets scrolled.

To avoid this, we will add the '''responsive '''property for the '''table'''.
|-
| | Switch to tablestyle.css
| | Switch to the '''tablestyle.css''' file.
|-
| | [gedit - tablestyle.css] Type:

.responsive-table{overflow-x: auto;}
| | Here I will define a '''class responsive-table.'''

Next to the '''table,th,td tag''', type the code as shown.
|-
| | [gedit - tablestyle.css] Highlight:

overflow-x: auto;
| | This property adds a '''scroll bar''' automatically if the content overflows at the left or right edges.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to table.html in gedit
| | Switch to the '''table.html''' file.
|-
| | [gedit - table.html] Type:

<nowiki><div class="responsive-table"></nowiki>

<nowiki></div></nowiki>

| | I will wrap the '''table''' inside the '''div tag''' with '''class responsive-table.'''

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.

A '''horizontal scroll bar''' is added only to the table to see the full content.

If we scroll, we observe that only the '''table''' is getting scrolled and not the entire page.
|-
| | Only narration
| | These are some of the ways in which we can make the '''table''' attractive and responsive.

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

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

* Some''' advanced Table designs''' in''' CSS'''

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

* Open the file '''styles.css '''which you have created earlier.
* Set the '''Zebra style '''for the '''table '''with '''lightcyan color '''for the '''even '''rows.
* 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
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C3/Table-in-CSS/English

2020-11-11T13:28:31Z

Nehasolanki: Created page with "'''Title of the script: '''Table in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keyword..."

'''Title of the script: '''Table in CSS

'''Author:''' Neha Solanki

'''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 Table, CSS Table Border, CSS Table Width, CSS Table CSS Height, CSS Table Alignment, CSS Table Padding, CSS Table Color, CSS Table Caption

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

* '''Table '''properties in''' CSS '''and
* Customising the width, height, padding, colour and alignment of '''cells''' in the '''table'''

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''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: Table
| |
* Using '''CSS''' we can style and format the '''tables'''.

|-
| | Slide: Table

{| style="width: 22em;"
|-
| '''Border''' || '''Width'''
|-
| '''Height || '''Alignment'''
|-
| '''Padding'''|| '''Color'''
|-
| '''Caption'''
|}
| | These are the '''CSS table '''properties.

Let us understand these through examples.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css'''
|-
| | Point to Mypage.html in my-css folder
| | For this demonstration, I’m using the file '''Mypage.html'''.

The same is available in the '''Code files''' link for practice
|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''
|-
| | Narration
| | First, we will add a '''table''' to our '''web page.'''
|-
| | [gedit - mystyle.css]

Type:

<pre>

<h2> Today’s Rate </h2>

<table>

<tr>

<th> Item </th>

<th> Price </th>

</tr>

<tr>

<td> Onion</td>

<td> 20 Rs/Kg </td>

</tr>

<tr>

<td> Potato </td>

<td> 15 Rs/kg </td>

</tr>

<tr>

<td> Tomato </td>

<td> 22 Rs/kg </td>

</tr>

<tr>

<td> Apple </td>

<td> 100 Rs/kg </td>

</tr>

<tr>

<td> Banana </td>

<td> 15 Rs/kg </td>

</tr>

<tr>

<td> Orange </td>

<td> 50 Rs/kg </td>

</tr>

<caption> Table 1 </caption>

</table>

</pre>
| | Inside the '''body tag''', next to the '''ol tag''', type the code as shown.

I have added a '''table''' with '''two columns'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in firefox
| | Switch to the '''my-css''' folder.

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

Highlight the output
| | Observe the output.

A '''table '''with two''' columns '''and without any '''borders''' is added to the end of the page.
|-
| | Narration
| | Now let us apply some '''CSS''' properties to the '''table'''.
|-
| | Only narration
| | '''Border''' property is used to set and style the '''borders''' for the '''table.'''
|-
| | Switch to '''my-css '''folder
| | Switch to the '''my-css '''folder.
|-
| | Open mystyle.css
| | Now open the file '''mystyle.css''' in any''' text editor.'''

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

Type:

table {border: 2px solid black;}
| | Now I will set a '''border''' for the''' table.'''

Next to the '''ul tag, '''type code as shown.

|-
| | [gedit - mystyle.css]

Highlight:

border: 2px solid black;
| | Here I have set the '''border width''' to '''2 pixels, border''' '''style''' to '''solid, '''and '''border color '''to''' black.'''
|-
| | 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 can see a '''border''' around the '''table.'''
|-
| | Only narration
| | But I want '''borders '''for the '''headings '''and '''standard''' '''cells '''as well.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

table, th, td {border: 2px solid black;}
| | Update the '''CSS''' '''table''' property as shown.

|-
| | [gedit - mystyle.css]

Highlight:

table, th, td
| | Using '''th''' and '''td''', we can set the '''border''' for '''heading''' and '''standard''' '''cells.'''

In this''' '''case I have set the common '''border''' style for all of these.

To set different properties for the individual elements, write them separately.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

Since I have set the '''border''' for the '''table''' and '''cells''', the resultant '''table''' has 2 '''borders'''.

To solve this, we will use '''border-collapse''' property.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

table {

border-collapse: collapse;}
| |

Next to the current '''table,th,td''' '''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.

Now the '''table '''and''' '''the '''cells '''have a single''' border '''around them.
|-
| | Only narration
| | Using '''CSS''' we can set a fixed '''width '''and''' height '''for the '''table'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

width: 20%;
| | Now I will set the '''width''' of the '''table''' to '''20%.'''

Inside the '''table tag''', next to the '''border-collapse '''property, type the code as shown.
|-
| | [gedit - mystyle.css]

Type:

td {height: 40px;}
| | Next I will set the '''height '''of the '''standard''' '''cells''' to '''40 pixels.'''

Next to the '''table 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.

Now the '''width''' of the '''table''' is set to '''20%''' of the page width.

And the '''height''' of the '''standard cells''' is set to '''40 pixels.'''
|-
| | Slide:Alignment
| | Text inside the '''table '''can be aligned '''horizontally '''or''' vertically.'''
|-
| | Slide: Horizontal-Alignment
| | In''' horizontal alignment:'''* The text''' '''inside the '''table '''can be aligned either to the''' left, right, center '''or''' justify.'''

|-
| | Slide: Horizontal-Alignment

[Image = horizontal-left.png]
| | By default, the text of the '''standard cell '''is''' left-aligned.'''
|-
| | Slide: Horizontal-Alignment

[Image = horizontal-center.png]
| | The text of the '''heading '''is''' center-aligned.'''
|-
| | Slide: Vertical-Alignment
| | In''' vertical alignment:'''* The text''' '''inside the '''table '''can be aligned either to the''' top, bottom, '''or''' middle.'''

|-
| | Slide: Vertical-Alignment

[Image = vertical.png]
| | By default''', '''the text of the''' standard cell '''and '''heading '''is set to the '''middle.'''

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

text-align: center;

vertical-align: bottom;
| | Inside''' td tag, '''next to the''' height '''property, type the code as shown.
|-
| | [gedit - mystyle.css]

Highlight:

text-align: center;

vertical-align: bottom;
| | Here I have set the '''horizontal alignment '''of the text to '''center'''

And '''vertical alignment''' to '''bottom'''.
|-
| | 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 text of the '''standard cell '''is '''horizontally aligned '''to the '''center.'''

And '''vertically aligned '''to the '''bottom.'''
|-
| | Slide: Padding

[Image = padding.png]
| |
* Apart from '''alignment''' property, '''padding '''property is used to set the position of the text
* '''Padding '''property controls the space between the '''border''' and '''text''' inside the '''table.'''

|-
| | Slide: Padding
| | We can customize the '''padding '''property in all the four directions: '''top, right, bottom '''&''' left.'''
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

th {padding: 20px 10px 10px 20px;}
| | Now I will set the '''padding''' space to '''20 pixels''' for '''top '''and '''left'''.

Then '''10''' '''pixels''' for '''right''' and '''bottom.'''

Next to the''' td 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.

'''Padding''' is added to the '''header''' '''cell''' in the '''table'''.
|-
| | Only Narration
| | Using '''CSS color '''property we can also set the color for the '''tables'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

color: blue;

background-color: lightblue;
| | Inside the '''th tag''', next to the''' padding '''property''', '''type the code as shown.
|-
| | [gedit - mystyle.css]

Highlight:

color: blue;

background-color:lightblue;
| | For the '''header''' '''cell''' , I have set the '''text''' '''color''' to '''blue '''and''' background''' '''color''' to '''light''' '''blue.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

'''Background''' and '''text color''' have been set for the header cell.
|-
| | Slide: Caption
| |
* Using '''CSS''', we can set the position of the '''caption '''for the '''table.'''
* '''Caption '''can be placed at the '''top '''or''' bottom '''of the''' table.'''
* By default, the position of the''' caption''' is set to '''top.'''

|-
| | [Firefox]

Point to the caption
| | Notice that in the output, we can see the '''caption '''placed at the '''top '''of the '''table'''.

Let’s change its position to '''bottom'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

caption {

caption-side: bottom;}
| | Next to the''' th 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.

Now the '''caption '''is placed at the '''bottom''' of the '''table'''.
|-
| | Only narration
| | We will learn about more '''styling''' options for '''tables''' in the upcoming tutorials.

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

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

* '''Table '''properties in''' CSS '''and
* Customising the width, height, padding, colour and alignment of '''cells''' in the '''table'''

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

* Open the file '''webpage.html''' which you have created earlier.
* Add a '''table''' with a''' caption'''

|-
| | Slide: Assignment
| |
* Open the file '''styles.css '''which you have created earlier.
* Set following properties for '''table''':
** '''Solid blue 4px''' '''border '''with''' border-collapse '''property
** '''Width '''to '''30%.'''
** '''Height '''of the '''heading '''to''' 30px'''.
** '''Background color '''of''' '''the''' heading '''to '''pink.'''
** '''Caption '''at the''' bottom.'''
* 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: Answers for THIS Spoken Tutorial
| | 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
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C3/List-in-CSS/English

2020-11-11T13:06:11Z

Nehasolanki: Created page with "'''Title of the script: '''List in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywords..."

'''Title of the script: '''List in CSS

'''Author:''' Neha Solanki

'''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 List, List Type, List Color, List Position, List Image

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

* '''List '''properties in''' CSS '''of '''ordered '''and '''unordered lists'''
* Customising the '''list markers'''

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor '''and
* '''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: List
| |
* Using '''CSS''' we can style and format '''lists'''.

|-
| | Slide: List
| | '''CSS list '''properties are as follows:

* '''Type'''
* '''Color'''
* '''Position'''
* '''Image'''
* '''Shorthand'''

Let us understand these through examples.
|-
| | Narration
| | First, we will add two different '''lists '''to our '''webpage'''.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css.'''
|-
| | Point to Mypage.html in my-css folder
| | For this demonstration, I’m using the file '''Mypage.html'''.

The same is available in the '''Code files''' link for practice
|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''
|-
| | [gedit - Mypage.html]

Type:

<nowiki><h2> Vegetables </h2></nowiki>

<nowiki><ul></nowiki>

<nowiki><li> Onion <br> 1kg </li></nowiki>

<nowiki><li> Potato <br> 1kg </li></nowiki>

<nowiki><li> Tomato <br> 1kg </li></ul></nowiki>

<nowiki><h2> Fruits </h2></nowiki>

<nowiki><ol></nowiki>

<nowiki><li> Apple <br> 1kg </li></nowiki>

<nowiki><li> Banana <br> 1kg </li></nowiki>

<nowiki><li> Orange <br> 1kg </li></nowiki>

<nowiki></ol></nowiki>
| |

At the end of the '''body tag''', type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in firefox
| | Switch back to the '''my-css''' folder.

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

Highlight the output
| | Observe the output.

The '''lists '''are added to the page.

The first '''list '''is an '''unordered list.'''

It has the default '''marker '''namely the '''round bullets'''.

While the second one,''' '''is an '''ordered list.'''

It has the default '''marker, numerals.'''
|-
| | Narration
| | Let us apply '''CSS list''' properties to these '''lists'''.
|-
| | Slide: Type
| |
* '''Type''' property is used to set the shape or style of the '''marker'''.
* For an '''unordered list '''the''' '''shape of the '''marker''' can be '''circle, square,''' etc.
* For an '''ordered list '''the style of the '''marker''' can be '''decimals, lower-alpha,''' etc

|-
| | Switch to '''my-css '''folder
| | Switch to the “'''my-css'''” folder.
|-
| | Open mystyle.css
| | Now open the file '''mystyle.css''', in any''' text editor.'''

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

Type-

ul {list-style-type: square;}

ol {list-style-type: lower-roman;}
| | Next to the '''a:active tag, '''type code as shown.

|-
| | [gedit - mystyle.css]

Highlight-

ul {list-style-type: square;}

ol {list-style-type: lower-roman;}
| |

Here I have set the''' marker '''shape for the '''unordered list '''to '''square.'''

And''' lower-roman '''for the''' ordered list.'''

|-
| | 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 can see that the '''marker''' of the '''unordered list '''is set to''' square.'''

And the '''marker''', '''lower-roman''' is set''' '''for the''' ordered list.'''
|-
| | Only Narration
| | Using '''CSS '''property, we can also set '''colors '''for the '''lists.'''

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

Update:

ul {list-style-type: square;

background-color: green;}

ol {list-style-type: lower-roman;

background-color: red;}
| | Now I will set the '''background color '''for the '''lists '''to''' green''' and''' red.'''

Next to '''a:active tag''', 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 output.

Now the '''background''' '''color''' is set for both the''' lists, '''as per the specified colours.
|-
| | Only narration
| | We can also set the '''background color''' for''' list items'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

ul li {background-color: lightgreen;

margin: 5px;}

ol li {background-color: lightpink;

margin: 5px;}
| | Next to '''a:active tag, '''update the '''ul''' and '''ol tag styles''' as shown here.
|-
| | [gedit - mystyle.css]

highlight: margin: 5px;
| | Here I have also added the '''margin '''for better visibility.
|-
| | 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 specified '''background''' '''color''' is set for the '''list items''' of both the''' lists.'''
|-
| |
| | Let’s move on to '''position '''property.
|-
| | Slide: Position
| |
* '''Position''' property is used to set the position of the '''marker'''.
* It decides whether the''' marker''' should be placed inside or outside the''' list item'''.
* By default, the position of the '''marker''' is set to '''outside'''.

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

Type:

ul{list-style-position:inside;}
| | Now I will set the position for the '''unordered list''' marker, to '''inside.'''

Next to the '''ol li 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 first list
| | Observe the output.

Now the '''markers''' of the '''unordered list''' are positioned inside the '''list.'''
|-
| | [Firefox]

Highlight the second list
| | While the '''markers '''of the '''ordered list '''are positioned outside the '''list.'''

This is because of its default property.
|-
| | Narration
| | Using''' CSS '''we can also set''' Image''' as a '''marker '''for the''' list.'''

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

Type:

list-style-image: url("purplesquare.png");
| | Now inside the '''ul tag''', next to '''list-style-position''' property, type the code as shown.
|-
| | [gedit - mystyle.css]

Highlight:

purplesquare.png
| | '''purplesquare.png''' image is available in the '''Code Files''' link on this tutorial page.

Please download and keep it in the folder where you have saved your code files.
|-
| | 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 '''markers''' of the '''unordered list''' are set to the specified '''image.'''
|-
| | Slide: shorthand
| |
* Using '''shorthand''', we can write the '''list '''properties in a single declaration.
* The order of the properties is: '''list-style-type, list-style-position, list-style-image.'''

|-
| | Slide: shorthand
| |
* If any property is missing, then its default value will be considered.
* '''list-style-type '''value will be considered if '''list-style-image '''value is unavailable.

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

Update:

ul {list-style: circle inside url("purplesquare.png");}
| | Now I will set the '''list''' properties to the '''unordered list''' using the '''shorthand''' method.

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

'''Image''' as a '''marker '''does not fail to display.

This is because the '''marker''' is set to '''image''', not to '''circle'''.

And the''' list items''' are positioned inside.
|-
| | Narration
| | Now let us check what happens if the '''image '''fails to display.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

list-style: circle inside url("img.png");
| | Inside '''ul tag''', change the name of the image to '''img.png '''instead of '''purplesquare.png'''

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

Highlight the output
| | Observe the output.

Since the '''image '''failed to display, the '''marker '''is set to '''circle''', which is the default '''marker'''.
|-
| | [gedit - mystyle.css]

Update:

ul {list-style: circle inside url("purplesquare.png");}
| | Switch to the '''mystyle.css''' file.

I will set it with the correct '''image''' name.

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

This is our required '''list'''.
|-
| | 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:

* '''List '''properties in''' CSS '''of '''ordered '''and '''unordered lists'''
* Customising the '''list markers'''

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

* Open the file '''webpage.html''' which you have created earlier.
* Add an '''unordered''' '''list '''with some''' list items'''

|-
| | Slide: Assignment
| |
* Open the file '''styles.css '''which you have created earlier.
* Using '''shorthand''':
** Set the '''image''' '''purplesquare.png''' as a '''marker '''and
** Position it '''inside'''.
* 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: Answers for THIS Spoken Tutorial
| | 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
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C3/Link-in-CSS/English

2020-11-11T12:45:23Z

Nehasolanki: Created page with "'''Title of the script: '''Link in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywords..."

'''Title of the script: '''Link in CSS

'''Author:''' Neha Solanki

'''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 Link, Visited link''', '''Hover link''', '''Active link''', '''a:link, a:visited, a:hover, a:active

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

* Styling '''links''' in''' CSS '''by applying different properties
* Customising '''links''' to match their individual '''website''' designs.

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor''' and
* '''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
| | Slide: System Requirements
| | You will also need '''internet connectivity''' to go to the external websites.
|-
| | 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: Link
| |
* '''Links '''allow users to navigate through the '''website''' from '''page''' to '''page'''

|-
| | Narration:
| | Let’s add a '''link''' to a '''page'''.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css.'''
|-
| | Point to Mypage.html in my-css folder
| | For this demonstration, I’m using the file '''Mypage.html'''.

The same is available in the '''Code files''' link for practice.
|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''
|-
| | [gedit - Mypage.html]

Type:

<nowiki><br> <br></nowiki>

<a href="[https://spoken-tutorial.org/ https://spoken-tutorial.org]" target=”_blank”> Spoken Tutorial </a>

<nowiki><br> <br></nowiki>
| |

Inside the '''body tag''', next to the '''div closing tag''', type the code as shown.
|-
| | [gedit - Mypage.html]

Highlight:

<a href="[https://spoken-tutorial.org/ https://spoken-tutorial.org]" target=”_blank”> Spoken Tutorial </a>
| | I have created a '''link''' for the '''Spoken Tutorial website homepage.'''

Here, '''target="_blank"''' is used, so that the '''link''' will be opened in a new '''browser tab'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in firefox
| | Switch to the '''my-css''' folder.

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

Highlight the output
| | Observe the output.

The '''link '''for the''' Spoken Tutorial webpage '''is added to this '''page'''.

The color of the '''link''' is by default set to '''blue''' and it is '''underlined'''.
|-
| | [Firefox] Click on the link

Point to the link

Point to the web page
| | Click on the '''link'''.

While clicking, the color of the '''link''' appears in '''red'''.

'''Spoken Tutorial web page''' opens.

Since, '''target="_blank"''' was used, the '''link''' opened in a new '''tab.'''
|-
| | [Firefox]

Switch to previous page

Point to the link

| |

Come back to the previous '''page'''.

Observe the color of the '''link'''.

Now it has changed to '''purple'''.
|-
| | Slide: Link
| | By default:
* All '''links''' are underlined
* The color of the
** unvisited '''link''' is set to '''blue'''
** active '''link''' is set to '''red'''
** visited '''link''' is set to '''purple'''

|-
| | '''Slide: Link States'''
| | '''Links''' can be in any of the four possible states.

* '''link''': It is a normal and unvisited '''link'''
* '''visited''': '''link '''which is already visited
* '''hover''': '''link '''when we place the mouse over it
* '''active''': '''link '''which is just clicked

The order in which '''link '''states have to be written is: '''link, visited, hover, active.'''
|-
| | '''Slide: Link'''
| | Using '''CSS property '''we can style the '''links''' in many ways, to make them stand out.

We can change the values of any of the following to match our web design:

* '''Color'''
* '''Background'''
* '''Text Decoration'''

Let us understand these through examples.
|-
| | Switch to '''my-css '''folder
| | Switch to the “'''my-css'''” folder.
|-
| | Open mystyle.css
| | Now open the file '''mystyle.css''', in any''' text editor.'''

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

Type-

a:link {color: black;}

a:visited {color: red;}

a:hover {color: green;}

a:active {color: blue;}
| | Now I will set '''color '''property for all the '''link''' states.

Next to the '''img tag, '''type code as shown.

|-
| | [gedit - mystyle.css]

Highlight-

a:link {color: black;}

a:visited {color: red;}

a:hover {color: green;}

a:active {color: blue;}
| |

In this code, we are changing the default state colours.

Normal and unvisited '''link''' is set to '''black'''.

Visited '''link''' is set to '''red'''.

Hover '''link''' is set to '''green'''.

Active '''link''' is set to '''blue'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Point to the link
| | Observe the output.

Color of the '''link''' is '''red '''

This is because we have already visited this '''link '''in our previous example.
|-
| | [Firefox]

Point to the link
| | Move the mouse pointer over the '''link'''.

Notice that the color of the '''link '''has changed from '''red '''to '''green'''.

This is because we have set the color '''green '''to the '''hover '''state.
|-
| | Narration:
| | Let us now add two more '''links''' to the page.
|-
| | Switch to Mypage.html in gedit
| | Switch to '''Mypage.html''' file in the '''text editor.'''
|-
| | [gedit - Mypage.html]

<a href="https://forums.spoken-tutorial.org" target=”_blank”> Forum Spoken Tutorial </a>

<nowiki><br> <br></nowiki>

<a href="https://www.google.com" target=”_blank”> Google </a>

<nowiki><br> <br></nowiki>
| | At the end of the '''body tag''', type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Point to the link
| | Observe the output.

The new '''links '''are added to the page.

The color of these '''links''' is set to '''black.'''

This is because the '''links '''are unvisited.
|-
| | [Firefox] Click on the link

Point to the link

Point to the web page
| | Click on the '''link - Forum Spoken Tutorial.'''

While clicking, notice the color of the '''link''' changes to '''blue'''.

'''Forum Spoken tutorial page''' opens.
|-
| | [Firefox]

Switch to previous page

Point to the link

| | Come back to the previous page.

Observe the color of the '''link - Forum Spoken Tutorial.'''

Now the color of the '''link '''has changed to '''red.'''
|-
| | Narration
| | Generally '''links '''are present as '''menus''' in '''web pages'''.

Usually the '''menus '''are not underlined.

So we will use '''text decoration''' property to remove the '''underline'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

a:link {

color: black;

text-decoration: none;

background-color: palegreen;

}

a:visited {

color: red;

background-color: lightcyan;

}

a:hover {

color: green;

text-decoration: underline;

background-color: hotpink;

}

a:active {

color: blue;

background-color: lightgreen;

}
| |

Next to the '''img tag, '''update the code as shown.

To remove the underline from a '''link, '''we are using this '''text decoration''' property.

Here, I am also changing the '''background color''' of the '''links'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Point to the first two links
| | Observe the output.

The '''background color''' for the first two '''links '''is set to '''lightcyan'''.

This is because they are '''visited''' '''links.'''
|-
| | [Firefox]

Point to the third link
| | The '''background color''' for the third '''link '''is set to '''palegreen'''.

This is because it is an '''unvisited''' '''link.'''
|-
| | [Firefox]

Point to the third link
| | These '''links''' are not underlined.

This is because the '''text decoration''' property for '''a:link''' '''state '''is set to '''none'''.
|-
| | [Firefox]

Point to the link
| | When we move the mouse over the '''link''', it gets underlined.

Also, the '''background color''' of the '''link '''changes to '''hot pink.'''
|-
| | [Firefox]

Point to the link
| | When we click on the '''link''', the '''background color''' changes to '''light green.'''
|-
| | Only narration
| | In this manner, we can style our '''links''' using '''CSS.'''
|-
| | 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:

* Styling '''links''' in''' CSS '''by applying different properties
* Customising '''links''' to match their individual '''website''' designs.

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

* Open the file '''webpage.html''' which you have created earlier.
* Add a '''link '''to''' https://forums.spoken-tutorial.org.'''

|-
| | Slide: Assignment
| |
* Open the file '''styles.css '''which you have created earlier.
* Set '''red color''' for the''' unvisited''' '''link.'''
* Set''' green color '''for''' '''the''' visited link'''.
* Remove '''underline''' from all the '''link''' states.
* 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: Forums
| | Please post your timed queries on this forum.
|-
| | Slide: Acknowledgement
| | Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India.
|-
| | Slide: Thanks
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C3/Float-and-Overflow-in-CSS/English

2020-11-11T12:19:01Z

Nehasolanki: Created page with "'''Title of the script: '''Float and Overflow in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer: '''Madhuri Ganapath..."

'''Title of the script: '''Float and Overflow in CSS

'''Author:''' Neha Solanki

'''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 Float, CSS Clear, CSS Overflow

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

* '''Float''', '''Clear '''and '''Overflow '''properties of an '''element '''in''' CSS'''
* Use these properties to achieve the desired output.

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor''' and
* '''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: Float Property
| | '''Float Property'''
* It''' '''is used to set the horizontal positioning of an '''element '''inside the parent '''block'''.
* It allows the '''text '''to wrap around an '''element.'''

|-
| | Slide: Float Property Value
| | The values of this property are:

* '''left''': this positions the '''element''' to the '''left '''side of the parent '''block'''
* '''right''': this positions the '''element''' to the '''right '''side of the parent '''block'''

|-
| | Slide: Float Property Value
| |
* '''none '''(default): does not position the '''element'''
* '''initial: '''sets the '''float''' property to its default value
* '''inherit''' : inherits the position of its parent '''element'''

Let us understand these through examples.
|-
| | Open '''my-css '''folder
| | Go to the practice folder '''my-css.'''
|-
| | Point to Mypage.html in my-css folder
| | For this demonstration, I’m using the file '''Mypage.html'''.

The same is available in the '''Code files''' link for practice.
|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''
|-
| | Narration:
| | To observe the '''float''' property, let's add an image.
|-
| | [gedit - Mypage.html]

Type:

<img src= "veg.png">
| | Add the '''img tag''' in the''' div block.'''

Between the '''div tag''' and '''p tag''', type the code as shown.
|-
| | [gedit - Mypage.html]

Highlight:

veg.png
| | '''veg.png''' image is available in the '''Code Files''' link on this tutorial page.

Please download and keep it in the folder where you have saved your code files.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to '''my-css folder'''
| | Switch to the “'''my-css'''” folder.
|-
| | Open mystyle.css
| | Now open the file '''mystyle.css''', in any''' text editor.'''

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

Type-

img {

width: 100px;

height: 90px;}
| | Let us set '''image '''properties '''width '''to 100''' '''pixels''' '''and''' height '''to 90 pixels'''.'''

Next to the''' div tag, '''type the code as shown.

|-
| | Press Ctrl + S
| | Save the file.
|-
| | Open Mypage.html in firefox
| | Switch to the '''my-css''' folder.

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

Highlight the output
| | Observe the output.

The '''image '''is added in the '''div block.'''

The '''text '''has floated outside the '''block''' due to its restricted size.

To arrange the '''image '''and '''text '''inside the '''block''', we will use '''float '''property.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

float: left;
| | Now I will set the '''float property value '''to''' left, '''for the '''image'''.

In the '''img tag''', next to the '''height''' 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 output.

Now the '''image''' is set to the left side and the '''text''' is wrapped around it.
|-
| | [gedit] highlight:

float: right;

[Firefox]

Highlight the output
| | If I set the '''float''' value to '''right''', then the image will move to the right side'''.'''

The '''text''' will wrap around it.
|-
| | Switch to mystyle.css
| | Come back to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

float: inherit;
| | Now I will set the '''float property value '''to''' inherit '''for''' '''this '''image'''.

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

Now the '''image''' and '''text '''are set to the previous '''style'''.

This is because the '''image inherits''' the property of the '''div block.'''

Observe that the '''div block '''does not have '''float '''property.
|-
| | Switch to mystyle.css
| | Switch back to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

float: right;
| | Now I will set the '''float '''property value''' '''for the '''div block.'''

Inside the''' div tag''', 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 output.

Now the '''block '''has shifted to the right side.

The '''image '''inside it also shifted to the right because it '''inherits '''the '''div block''' property.
|-
| | Switch to mystyle.css
| | Switch back to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

float: left;
| | Now I will set the '''float '''property value''' '''to '''left '''for the '''image.'''

Inside the''' img tag''', 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 output.

Though the '''block '''was set to the right, the '''image '''has shifted to the left.

This is because the '''float '''value of the '''image '''is set to '''left''' instead of '''inherit'''.

Earlier '''float''' property of the '''image '''was inheriting the '''float '''value of the '''div block.'''
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Delete: float: right;

Ctrl + S
| |

Delete the '''float '''property of the '''div tag '''and save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the output
| | Observe the output.

Both the '''block''' and '''image''' are set to the left now.
|-
| | Slide: Clear Property
| | '''Clear Property'''
* It is related to''' float.'''
* It prevents an''' element '''from being displayed next to''' floated elements.'''

|-
| | Slide: Clear Property Value
| | Values of this property are:

* '''left''': '''elements''' are not allowed to '''float''' on the left''' '''side of the specified''' element'''
* '''right''': '''elements''' are not allowed to '''float''' on the right''' '''side of the specified''' element'''

|-
| | Slide: Clear Property Value

| |
* '''both''': '''elements''' are not allowed to '''float''' on both sides of the specified''' element'''
* '''none''' (default):'''elements''' are allowed to '''float''' on both sides of the specified''' element'''

|-
| | Slide: Clear Property Value

| |
* '''initial: '''sets the''' clear '''property to its default value
* '''inherit: element '''inherits the '''clear''' value of its parent.

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

clear: none;
| | I will set the '''clear property value '''to''' none '''for the '''paragraph.'''

In the '''p tag''', next to the '''font '''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 paragraph
| | Observe the output.

There is no change in the output because '''none''' is the default value of '''clear '''property.

The text''' float'''s around the '''image'''.
|-
| | Switch to mystyle.css
| | Switch back to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

clear: both;
| | Now I will change the '''clear '''property value''' '''to''' both '''for the '''paragraph.'''

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 paragraph
| | Observe the output.

Now the '''paragraph''' moved down because it does not allow the '''image '''to '''float''' on both sides.
|-
| | [Firefox]

Highlight the paragraph
| | The '''image''' and '''paragraph''' are too big to fit within the '''block.'''

That is why the '''paragraph''' flows out of the '''block'''.

To solve this problem, we use '''overflow '''property.

Let us understand about this.
|-
| | Slide: Overflow Property
| | '''Overflow''' property decides what to do when the content''' '''overflows the''' block.'''
|-
| | Slide: Overflow Property Value
| | Values of this property are:

* '''visible '''(default):
** Overflowed content is not clipped.
** It is visible outside the''' block'''.
* '''scroll''':
** Overflowed content is clipped.
** A '''scrollbar''' is added to see the whole content.

|-
| | Slide: Overflow Property Value
| |
* '''auto''':
** Automatically adds a '''scrollbar''' whenever required.
* '''hidden''':
** Overflowed content is clipped and is invisible.

|-
| | Slide: Overflow Property Value
| |
* '''initial''':
** Sets the property value to its default value.
* '''inherit''':
** Inherits the property value from its parent '''element'''

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

overflow: auto;
| | Now I will set the '''overflow '''property''' '''to''' auto '''for the''' div block.'''

In the '''div tag''', next to the '''padding''' property, type the code as shown.
|-
| | [gedit - mystyle.css]

Highlight:

overflow: auto;
| | Here '''overflow '''property is set to '''auto.'''

This means''' '''the text''' '''will not overflow outside the border.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser'''
|-
| | [Firefox]

Highlight the paragraph
| | Observe the output.

The text''' '''has overflowed outside the border.
|-
| | [Firefox] Ctrl + R

Highlight the paragraph
| | Refresh the page once again and observe the output.

This time, the overflowed content is clipped.

And a '''scrollbar''' is added to the '''block''' to see the overflowed content.

You may explore '''visible''', '''scroll '''and '''hidden overflow property values''' on your own.
|-
| | 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:

* '''Float, Clear''' and''' Overflow '''properties of an '''element '''in''' CSS'''
* Use these properties to achieve the desired output

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

* Open the file '''webpage.html''' which you have created earlier.
* Add the''' '''image''' veg.png '''in''' '''the''' div block.'''

|-
| | Slide: Assignment
| |
* Open the file '''styles.css '''which you have created earlier.
* Update the following for '''div''' '''block'''
** '''width''' to '''600px.'''
** '''height''' to '''200px.'''
** '''overflow value '''to''' scroll'''.
* Set the '''float value''' to '''right '''for the '''image'''.

|-
| | 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: Answers for THIS Spoken Tutorial
| | 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
| | This is Neha Solanki from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C2/Text-Properties-in-CSS/English

2020-10-24T10:18:10Z

Nehasolanki:

'''Title of the script: '''Text Properties in CSS

'''Author:''' Neha Solanki

'''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 Text, CSS Color, CSS Text Alignment, CSS Text Indentation, CSS Text Spacing, CSS Text Line Height, CSS Text Direction, CSS Text Transformation, CSS Text Decoration, CSS Text Shadow, CSS Letter spacing, CSS Word spacing''' '''

{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the spoken tutorial on “'''Text Properties in CSS”'''.
|-
|| Slide: Learning Objectives
|| In this tutorial we will learn about '''Text '''properties of an '''element''' 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 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: Text Elements

{| style="width: 25em;"
|-
| '''Color''' || '''Direction'''
|-
| '''Alignment''' || '''Transformation'''
|-
| '''Indentation''' || '''Decoration'''
|-
| '''Spacing''' || '''Shadow'''
|-
| '''Line Height ||
|}

| | These are the properties which we use to format and style the '''text''' '''elements '''in '''CSS.'''

Let us understand these one by one through examples.
|-
| | Slide: Color
| | The color of the''' text''' is set by the''' CSS color''' property using these values:

* '''Color names'''
* '''Hexadecimal values'''
* '''RGB (Red Green Blue) values'''

Let us try this.
|-
| | 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.'''
|-
| | 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 practice.
|-
| | Open Mypage.html in firefox
| | Now open the file '''Mypage.html''' in a web browser.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

The '''text color''' of the '''heading''' is set to '''blue'''.
|-
| | [gedit - mystyle.css]

Highlight: color: blue;
| | This is because, inside the '''h1 tag''', text color of the '''heading '''is set to '''blue '''using the color name.
|-
| | [gedit - mystyle.css] Update:

color: #008000;
| | Now I will set the '''text color''' of the '''heading '''to '''green''' using the '''hexadecimal''' value

Inside '''h1 tag''', update the '''color '''code as shown.
|-
| | [gedit - mystyle.css] Highlight:

color: #008000;
| |

'''Hexadecimal value '''of''' green '''is''' #008000 .'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

Now the '''text color''' of the '''heading '''is set to '''green'''.

Likewise, you can set the '''text color''' using '''RGB color '''values.
|-
| |
| | Now let’s move on to '''text '''alignment.
|-
| | Slide: Alignment
| |
* '''text-align '''property''' '''is used to set the horizontal alignment of the '''text'''.

|-
| | Slide: Alignment

[Image = left.png]

[Image = right.png]

[Image = center.png]

[Image = justify.png]
| | '''Text''' can be aligned either to the:

* '''Left'''
* '''Right'''
* '''Center'''
* '''Justify'''

Let us try one of these.
|-
| | Switch to firefox
| | Switch to the '''browser'''.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

The '''heading '''is now aligned to the '''center.'''
|-
| | [gedit - mystyle.css] Highlight

text-align: center;
| | This is because the '''text-align''' property for the '''h1 tag''' is set to '''center'''.

You can explore the remaining '''text-align properties''' on your own.
|-
| |
| | Next let’s learn about some more '''text''' properties.
|-
| | Slide: Indentation
| |
* '''text-indent '''property''' '''is used to insert an empty space before the first line of the '''text'''
* The size of empty space is set using '''length values''' like '''cm, px, % '''etc.

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

Type: text-indent: 60px;
| | I will insert an empty space of '''60 pixels''' before the first line of the '''paragraph'''.

Inside the '''p tag''', below the '''width '''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 paragraph
| | Observe the output.

The paragraph now has an empty space of '''60 pixels''' before the first line.
|-
| | Slide: Spacing
| |
* '''Spacing '''property is used to change the space between '''words '''and '''letters '''of a '''text'''.
* Positive values are used to increase the space.
* Negative values are used to decrease the space.

|-
| | Slide: Spacing
| | It has two types of properties:

* '''letter-spacing '''is used to increase or decrease the space in between letters.
* '''word-spacing '''is used to increase or decrease the space between the words.

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

Type: letter-spacing: -2px;
| | For the '''heading,''' I will decrease the '''space''' between the letters by '''2px'''

Inside the '''h1 tag''', next to the '''font-size 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:

Welcome to Farmer's Market
| | Observe the output.

The '''space''' between the letters in the '''heading''' has decreased.
|-
| | [gedit - mystyle.css]
| | Switch to '''mystyle.css''' file in the '''text editor.'''
|-
| | [gedit - mystyle.css]

Update: letter-spacing: 7px;
| | Now in the '''heading,''' let us increase the '''space''' between the letters by '''7 pixels'''.

Update the '''letter-spacing '''property value to '''7 px.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

The '''space''' between the letters in the '''heading''' has now increased.
|-
| | [gedit - mystyle.css]

Type: word-spacing: 20px;
| | Next, in the '''paragraph''', let’s increase the '''space''' between words by '''20 pixels'''.

Inside the '''p tag''', after the '''text-indent '''property, type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

We can see that the '''space''' between the words in the '''paragraph '''has increased.
|-
| | [gedit - mystyle.css]
| | Switch to '''mystyle.css''' file in the '''text editor.'''
|-
| | [gedit - mystyle.css] Highlight:

word-spacing: 20px;
| | To decrease the '''space''' between the words, '''word-spacing''' accepts the negative values.
|-
| | [gedit - mystyle.css] Update:

word-spacing: 10px;
| | Now, for properly displaying the paragraph in this web page, we will set it to '''10px.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.

This is the required word spacing which we want on this page.
|-
| | Only narration
| | Let’s now move on to the '''height '''property.
|-
| | Slide: Line Height
| |
* '''line-height''' is used to set the space between the lines of the '''text'''.

|-
| | [gedit - mystyle.css]

Type: line-height: 1.8;
| | Switch to the '''mystyle.css''' file.

Now I will assign 1.8 to '''height property''' in the''' paragraph.'''

That is '''1.8''' times the size of the current font.

Inside the '''p''' '''tag''', next to the '''word-spacing property,''' type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

The '''space''' between the lines of''' text''' has increased.
|-
| | Slide: Text Direction
| |
* Direction of a '''text''' is set by '''CSS direction '''property'''.'''
* It has two values:
** '''ltr '''(default): sets the direction from left to right.
** '''rtl: '''sets the direction from right to left.

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

Type: direction: rtl;
| | Let’s set the direction of the '''paragraph''' from right to left first.

Inside the '''p''' '''tag''', after the''' line-height '''property type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

Now the direction of the '''text''' of the '''paragraph''' has changed from '''right to left.'''
|-
| | Switch to mystyle.css
| | Switch back to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update: direction: ltr;
| | Now let’s set the direction of the '''paragraph''' from left to right.

Update the '''direction property '''to''' ltr.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

Now the direction of the '''text''' of the '''paragraph''' has changed to the default left to right '''.'''
|-
| |
| | Next, we’ll learn about the '''transformation '''property.
|-
| | Slide: Transformation
| | The '''text-transform '''property manages the capitalization of '''text'''.
|-
| | Slide: Transformation

[Image = uppercase.png]

[Image = lowercase.png]

[Image = capitalize.png]

| | Values of this property are:

* '''uppercase''': Converts all the letters to uppercase
* '''lowercase''': Converts all the letters to lowercase
* '''capitalize''': Converts the first letter of each word to uppercase

Let us try one of these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

text-transform: uppercase;
| | Now I will set the paragraph''' '''to''' uppercase.'''

Inside the '''p tag,''' next to '''direction property''' type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

All the letters in the paragraph have now changed to''' uppercase.'''

Similarly try the remaining '''direction properties''' on your own.
|-
| | Switch to mystyle.css

Delete: text-transform: uppercase;

Ctrl + S
| | Switch to the file '''mystyle.css'''

Delete the '''text-transform '''property.

And save the file.
|-
| |
| | Next comes the '''decoration '''property.
|-
| | Slide: Decoration
| |
* '''text-decoration '''property is used to apply or remove the decoration of the '''text'''.

|-
| | Slide: Decoration

[Image = overline.png]

[Image = underline.png]

[Image = line-through.png]

[Image = none.png]
| | The values for the '''text decoration''' property are:

* '''Overline'''
* '''Underline'''
* '''Line-through'''
* '''None'''

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

text-decoration: overline;
| | Now let’s set the '''overline text-decoration '''to the '''heading'''.

Inside the '''h1''' tag, next to the '''letter-spacing '''property, type the shown code.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

Now the '''heading''' has an '''overline''' '''text-decoration'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

text-decoration: underline;
| | Now let’s apply an '''underline '''to the '''heading'''.

Update the '''text-decoration''' property to '''underline'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

Similarly, explore the remaining '''text-decoration properties''' on your own.
|-
| | Only narration
| | We now come to '''text shadows'''.
|-
| | Slide: Shadow

'''text-shadow: h-shadow v-shadow blur-radius color;'''
| |
* '''text-shadow''' property is used to apply '''shadow effects''' to the '''text'''.
* This is the syntax

|-
| | Slide: Shadow
| |
* '''h-shadow: '''It sets the position of horizontal shadow.
* '''v-shadow:''' It sets the position of vertical shadow.
* '''h-shadow''' and '''v-shadow''' are mandatory values

|-
| | Slide: Shadow
| |
* '''blur-radius:''' Sets the radius of blur.
* '''color:''' Sets the color of the shadow.
* '''blur-radius '''and''' color''' are optional values.

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type: text-shadow: 4px 4px 2px;
| | Now I will use this property in the '''heading''' of the page.

I will set '''h-shadow to 4 pixels, v-shadow to 4 pixels, blur-radius to 2 pixels'''

Inside the '''h1''' '''tag''', next to '''text-decoration 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:

Welcome to Farmer's Market
| | Observe the output.

In '''heading''', we can see the '''text-shadow''' effect.

Here the shadow color is the same as the text color.

This is because we have not set any '''color''' for the shadow.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

text-shadow: 4px 4px 6px black;
| | Now I will use the '''color''' value for the shadow property.

I will also change the '''blur-radius to 6pixels '''and''' color '''to''' black.'''

So, update the '''text-shadow property''' as shown.
|-
| | Press Ctrl + S
| | Save the file
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

In the '''heading''', we can see the '''text-shadow''' in '''black color'''.
|-
| | Only narration
| | In this manner, we can '''style''' our '''text''' using '''CSS''' properties.

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

Let us summarize.
|-
| | Slide: Summary
| | In this tutorial, we have learnt about '''Text '''properties of an '''element''' in''' CSS.'''
|-
| | Slide: Assignment
| | As an assignment

* Open the file '''styles.css''' which you have created earlier
* Set '''yellow''' color to '''heading '''and''' center '''align''' '''it.

|-
| | Slide: Assignment
| | For the '''Paragraph''' content, set the
* '''text-indentation''' to '''1cm'''
* '''word spacing''' to '''3px '''
* '''line-height''' to '''1.2'''
* Direction as '''left to right'''.

|-
| | Slide: Assignment
| |
* '''Underline''' and '''uppercase''' the '''heading'''.
* Set '''text-shadow '''with '''black''' color in the '''heading.'''

* 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 Neha Solanki.

And this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C2/Display-Property-in-CSS/English

2020-10-23T10:59:53Z

Nehasolanki: Created page with "'''Title of the script: '''Display property in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi..."

'''Title of the script: '''Display property in CSS

'''Author:''' Neha Solanki

'''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 Display, Block Level Element, Inline Level Element

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

* '''Display property''' of an '''element''' 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: Display
| |
* '''Display property''' is used to specify how an '''element''' should be presented on a '''webpage'''.

|-
| | Slide: Display
| |

* Values of this '''property''' are:
** '''block'''
** '''inline'''
** '''none'''

* Each '''element '''has a default '''display '''value.

Let us understand these one by one.
|-
| | Slide: Block
| |
* '''block '''value is used to present an '''element '''as a''' block-level element.'''
* '''Block-level element '''starts with a new line.

|-
| | Slide: Block-level element

'''<nowiki><div></nowiki>'''

'''<nowiki><header></nowiki>'''

'''<nowiki><h1> to <h6></nowiki>'''

'''<nowiki><p></nowiki>'''

'''<nowiki><form></nowiki>'''
| | These are some '''elements '''which have a default '''block''' value:
|-
| | Slide: Inline
| |
* '''inline '''value is used to present an '''element '''as an '''inline-level element.'''

|-
| | Slide: Inline-level element
| | The''' Inline-level element '''

* Does not start with a new line and
* Ignores '''height '''and '''width '''if they are mentioned

|-
| | Slide: Inline-level element

'''<nowiki><span></nowiki>'''

'''<nowiki><a></nowiki>'''

'''<nowiki><img></nowiki>'''

| | These are some '''elements''' which have default '''inline''' value:

Let us try with some examples.
|-
| | 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'''.

The same is available in the '''Code files''' link for practice.

I have already opened it in the '''gedit Text Editor.'''
|-
| | Point to Mypage.html in my-css folder
| | Switch to the '''my-css''' folder

For this demonstration, I’m also using the file '''Mypage.html'''.

The same is available in the '''Code files''' link for practice.
|-
| | Open Mypage.html in firefox
| | Now open the file '''Mypage.html''' in a web browser.

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

Type:

<nowiki>#item1{ </nowiki>

:height: 200px;

:width: 150px;

:background: lightpink;

:display: block;}

<nowiki>#item2{ </nowiki>

:height:200px;

:width: 150px;

:background: lightblue;

:display: inline; }
| | Now let’s create two '''elements '''using an '''id selector'''.

Next to the '''div tag''', type the code as shown.
|-
| | [gedit - mystyle.css] Highlight:

height: 200px;

width: 150px;

background: lightpink;
| | In both the cases I have set the '''height''', '''width''' and '''background'''.

|-
| | Highlight:

display: block;
| | For '''item1''' I have set the value for the '''display property''' to '''block.'''
|-
| | Highlight:

display: inline;
| | For '''item2''' I have set the value for the '''display property''' to '''inline.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to the '''my-css'''
| | Switch to the '''my-css '''folder.
|-
| | Open Mypage.html in gedit
| | Open the file '''Mypage.html''' in the '''text editor.'''
|-
| | [gedit - Mypage.html]Type:

<nowiki><p id = "item1"> Fruits and vegetables provide essential vitamins and minerals to the body </p></nowiki>

<nowiki><p id = "item2"> Fruits and vegetables provide essential vitamins and minerals to the body </p></nowiki>
| | Now add these items to '''paragraphs'''.

Inside the '''body tag''', next to the '''div closing 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 paragraph
| | Observe the output.

We can see two new '''paragraphs'''.

The first '''paragraph '''is in '''blocks '''with the mentioned''' height '''and '''width.'''

While the second '''paragraph '''is in '''inline '''and it ignores the mentioned '''height '''and '''width'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Delete: display: inline;
| | Now I will remove the '''display property''' from '''item2'''.

Inside '''<nowiki>#item2</nowiki>''', delete the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the paragraph
| | Observe the output.

Now the second '''paragraph '''is also inside the '''block.'''

This is because by default the '''display property''' value of a '''paragraph '''is '''block'''.
|-
| | Slide: None
| |
* '''none '''value is used to remove the '''display''' of an '''element'''.
* The '''<script>''' '''element '''has default '''none''' '''display''' value.

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

<nowiki>#item1: Update: display: none;</nowiki>

<nowiki>#item2: </nowiki>Type: display: none;
| | Now I will set the '''display''' value to '''none''' in '''item1 '''and '''item2'''.

In the '''<nowiki>#item1</nowiki>''' and''' #item2''', 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 paragraph
| | Observe the output.

Both the '''paragraphs '''are not displayed now.
|-
| | Switch to mystyle.css

Ctrl + Z

Ctrl + S
| | Switch to the '''mystyle.css''' file

Press''' Ctrl + Z''' keys repeatedly to undo all the changes which we have made in this file.

Save the file.
|-
| | Switch to Mypage.html

Ctrl + Z

Ctrl + S
| | Switch to the '''Mypage.html''' file

Press''' Ctrl + Z''' keys repeatedly to undo all the changes which we have done in this file.

Save the file.
|-
| | 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:

* '''Display property''' of an '''element '''in''' CSS'''

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

* Open the file '''styles.css''' which you have created earlier
* Add one more '''paragraph''' using the '''p''' '''tag''' without the '''div tag'''.
* Set the following '''properties''' for this '''p''' '''tag''' using '''selector''':
** '''Height''' to '''200px'''
** '''Width''' to '''200px'''
** '''Background''' '''color''' to '''lightpink'''
** '''Display''' to '''inline'''

|-
| | 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 Neha Solanki

and this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C2/Font-Properties-in-CSS/English

2020-10-22T15:57:08Z

Nehasolanki: Created page with "'''Title of the script: '''Font properties in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi..."

'''Title of the script: '''Font properties in CSS

'''Author:''' Neha Solanki

'''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 Font, CSS Font Family, CSS Font Style, CSS Font weight, CSS Font Variant, CSS Font Size, CSS Font Shorthand

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

* '''Font properties''' of an '''element '''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 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: Font

{| style="width: 22em;"
|-
| '''font-family''' || '''font-style'''
|-
| '''font-weight || '''font-variant'''
|-
| '''font-size'''
|}

| | These are the properties which we use to style the '''font''' of '''text''' in '''CSS'''

''' '''

Let us understand these one by one through examples.
|-
| | Slide: Font Family
| |
* '''font-family '''property is used to set the '''font''' of the '''text'''.
* One or more '''fonts''', separated by '''commas, '''are used to specify the '''font-family'''.

|-
| | Slide: Font Family

| |
* Sometimes the user's system doesn’t contain the first '''font'''.
* Then the browser uses the second '''font''' and so on.
* '''Font''' should be written priority wise from highest to lowest.

|-
| | Slide: Font Family
| |
* The last '''font''' should ideally be a '''generic font.'''
* For example: '''serif, sans-serif, monospace''', etc.

Let us try this.
|-
| | 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'''.

The same is available in the '''Code files''' link for practice.

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

Update:

height: 3cm
| | First of all for better visibility, I will change the height of the '''div block'''.

Inside the '''div''' section, update the '''height''' to '''3cm'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Point to Mypage.html in my-css folder
| | Switch to''' my-css''' folder.

For this demonstration, I’m also using the file '''Mypage.html'''.

The same is available in the '''Code files''' link for practice.
|-
| | Open Mypage.html in firefox
| | Open the file '''Mypage.html''' in a web browser.

The '''webpage''' opens.
|-
| | [gedit - mystyle.css]

Type-

font-family: Arial, "Times new roman", sans-serif;
| | Switch back to '''mystyle.css''' file.

I will use three different '''fonts''' for the '''text''' of the '''paragraph'''.

Inside the '''p tag''', next to the '''direction property,''' type the code as shown.
|-
| | [gedit - mystyle.css]

Highlight: "Times new roman"
| | If the '''font''' name has more than one word, then it must be written within '''quotes'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the paragraph
| | Observe the output.

Content of the '''paragraph''' is''' '''set to''' Arial font.'''

As this '''font''' is available in my system, it uses the first '''font''' instead of proceeding further.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update-

font-family: monospace;
| | Now I will set the '''paragraph''' to a single generic '''font''': '''monospace.'''

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

Highlight the paragraph
| | Observe the output.

Content''' '''of the '''paragraph''' is''' '''now set to''' monospace font.'''
|-
| | Slide: Font Style
| | '''font-style property''' is used to '''style''' the '''font''' of the''' text'''.
|-
| | Slide: Font Style
| | Values of this '''property''' are:

* '''normal '''(default): sets the '''style''' of '''text''' to normal.
* '''italic''': sets the '''style''' of '''text''' to italics.
* '''oblique'''- sets the '''style''' of '''text''' to slanted or sloped form.

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

Type:

font-style: italic;
| | Now I will set the '''style''' to '''Italic''' for the '''paragraph'''.

Inside the '''p tag''', next to '''font-family''' 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 paragraph
| | Observe the output.

The '''Paragraph''' is set to '''Italic style.'''

Similarly explore the remaining '''font-style properties''' on your own.
|-
| | Slide: Font Weight
| | '''font-weight property''' specifies how thick the '''font''' of the '''text''' should be.
|-
| | Slide: Font Weight
| | Values of this property are:

* '''Keywords''':
** '''normal, bold, lighter '''and''' bolder'''
* '''Numeric''':
** '''400 '''equals to '''normal'''
** '''700''' equals to '''bold'''.

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

Type:

font-weight: bold;
| | I will set the '''font-weight''' property using '''keyword''' value''' bold '''for '''paragraph'''.

Inside the '''p tag''', next to '''font-style property''' type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.
|-
| | [Firefox]

Highlight the paragraph
| | Observe the output.

'''Paragraph''' is''' '''set to '''bold.'''
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

font-weight: 700;
| | Now I will set the '''font-weight property''' to '''bold '''using a numeric value '''700.'''

Update the '''font-weight property''' code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.
|-
| | [Firefox]

Highlight the paragraph
| | Observe the output.

There is no change in the '''paragraph''', it is still''' '''in '''bold.'''

This is because I have set the '''font-weight''' to '''700''', which is equal to '''bold'''.
|-
| | Slide: Font Variant
| | '''font-variant''' decides whether the '''font''' of a '''text''' should be '''small capital''' or not.
|-
| | Slide: Font Variant
| | Values of this property are:

* '''small-caps''':
** Convert all the letters to '''uppercase''' letters
** Sets the '''font '''size smaller than the '''uppercase''' letters.
* '''Normal: '''removes the '''small-cap '''property.

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

Type:

font-variant: small-caps;
| | Now I will set the '''small-cap''' value to '''heading'''.

Inside '''h1 tag''', next to '''text-shadow property '''type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

All the letters of the '''heading''' are converted into '''small-cap'''.
|-
| | Slide: Font Size
| |
* '''font-size '''property specifies the size of the '''text'''.
* The default '''font '''size in most of the browsers is set to '''16px.'''

|-
| | Slide: Font Size''' '''
| | Values of this property are:

* '''Length values: '''pixels, cm, points, em, etc.
* '''Keywords: '''absolute, relative
* '''Percentage'''

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

Type:

font-size: 15pt;
| | Now I will set the '''font-size''' to '''15 points''' for '''paragraph.'''

Inside the '''p tag''', next to '''font-weight 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 paragraph
| | Observe the output.

Notice the difference in the '''font size''' of the '''paragraph'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update: font-size: 100%;
| | Now I will set the '''font''' size using '''percentage'''.

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

Highlight the paragraph:
| | Observe the output.

Now the '''font''' size of the '''paragraph''' is back to its original size.

This is because it is 100% relative to the parent size.

We can set the '''font''' size values using '''percentage''' or with '''font length values'''.
|-
| | Slide: Absolute keywords
| | Next let us see how to set the '''font''' size using '''keywords'''.

* '''Absolute keywords''': sets the '''font''' size based on default '''font''' size

|-
| | Slide: Absolute keywords

{|
|-
| '''xx-small''' || '''xx-large'''
|-
| '''s-small || '''x-large'''
|-
| '''small || '''large'''
|-
| '''medium '''(equals to default '''font''' size)
|}

| | These are the values of '''absolute''' '''keywords'''.
|-
| | Slide: Relative keywords
| |
* '''Relative keywords''': sets the '''font''' size relative to parent '''elements'''.
* The '''keywords''' are:
** '''smaller '''and
** '''larger'''

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

Type:

font-size: medium;
| | Now I will set the '''font''' size of the '''paragraph''' to '''medium'''.

Inside the''' p tag''', update the '''font-size property''' code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox]

Highlight the paragraph
| | Observe the output.

Notice there is no change in the''' font size''' of the '''paragraph.'''

This is because we have set the size to '''medium''' which is the default '''font''' '''size'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

font-size: x-small;
| | Now I will set the '''font''' '''size''' of the '''paragraph''' to '''x-small'''.

Inside the''' p tag''', update the '''font-size property''' code as shown.
|-
| | Press Ctrl+S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page
|-
| | [Firefox]

Highlight the paragraph

| | Observe the output.

Now the font size of the '''paragraph''' is smaller than the normal '''font''' size.

Similarly explore the remaining '''text-size properties''' on your own.
|-
| | Slide: Shorthand
| |
* Using shorthand, we can write all the '''font properties''' in a single line.
* '''font-size '''and''' font-family''' values are mandatory for '''font '''property in shorthand.

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

Delete:

font-family: monospace;

font-style: italic;

font-weight: 700;

font-size: x-small;
| | In our case, we have written the '''font properties''' for '''paragraph''' individually.

Let me delete all the '''font properties'''.

|-
| | [gedit - mystyle.css] Type:

font: italic 18px serif;
| | Now inside the '''p''' '''tag''', next to '''direction property''' type the code as shown.
|-
| | [gedit] Highlight:

font: italic 18px serif;
| | Here I have set '''font-style''' to '''italic''', '''font-size''' to '''18 pixel''' and '''font-family''' to '''serif.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox] Highlight the paragraph
| | Observe the output.

The '''paragraph''' has changed as per our code.
|-
| | Only narration
| | In this manner, we can '''style''' our '''fonts''' for the '''text''' using '''CSS properties'''.

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

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

* '''Font properties''' of an '''element '''in''' CSS'''

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

* Open the file '''styles.css''' which you have created earlier.

|-
| | Slide: Assignment
| |
* Using shorthand, set the following '''properties''' to the '''paragraph''':
** '''font-family''' to '''Arial'''
** '''font-style''' to '''oblique'''
** '''font-weight''' to '''400'''
** '''font-variant''' to '''small-caps'''
** '''font-size''' to '''18 pixels'''

|-
| | 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 Neha Solanki

and this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.

|-
|}

CSS/C2/Text-Properties-in-CSS/English

2020-10-22T13:00:44Z

Nehasolanki: Created page with "'''Title of the script: '''Text Properties in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi..."

'''Title of the script: '''Text Properties in CSS

'''Author:''' Neha Solanki

'''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 Text, CSS Color, CSS Text Alignment, CSS Text Indentation, CSS Text Spacing, CSS Text Line Height, CSS Text Direction, CSS Text Transformation, CSS Text Decoration, CSS Text Shadow, CSS Letter spacing, CSS Word spacing''' '''

{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the spoken tutorial on “'''Text Properties in CSS”'''.
|-
|| Slide: Learning Objectives
|| In this tutorial we will learn about '''Text '''properties of an '''element''' 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 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: Text Elements

{| style="width: 25em;"
|-
| '''Color''' || '''Direction'''
|-
| '''Alignment''' || '''Transformation'''
|-
| '''Indentation''' || '''Decoration'''
|-
| '''Spacing''' || '''Shadow'''
|-
| '''Line Height ||
|}

| | These are the properties which we use to format and style the '''text''' '''elements '''in '''CSS.'''

Let us understand these one by one through examples.
|-
| | Slide: Color
| | The color of the''' text''' is set by the''' CSS color''' property using these values:

* '''Color names'''
* '''Hexadecimal values'''
* '''RGB (Red Green Blue) values'''

Let us try this.
|-
| | 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.'''
|-
| | 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 practice.
|-
| | Open Mypage.html in firefox
| | Now open the file '''Mypage.html''' in a web browser.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

The '''text color''' of the '''heading''' is set to '''blue'''.
|-
| | [gedit - mystyle.css]

Highlight: color: blue;
| | This is because, inside the '''h1 tag''', text color of the '''heading '''is set to '''blue '''using the color name.
|-
| | [gedit - mystyle.css] Update:

color: #008000;
| | Now I will set the '''text color''' of the '''heading '''to '''green''' using the '''hexadecimal''' value

Inside '''h1 tag''', update the '''color '''code as shown.
|-
| | [gedit - mystyle.css] Highlight:

color: #008000;
| |

'''Hexadecimal value '''of''' green '''is''' #008000 .'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

Now the '''text color''' of the '''heading '''is set to '''green'''.

Likewise, you can set the '''text color''' using '''RGB color '''values.
|-
| |
| | Now let’s move on to '''text '''alignment.
|-
| | Slide: Alignment
| |
* '''text-align '''property''' '''is used to set the horizontal alignment of the '''text'''.

|-
| | Slide: Alignment

[Image = left.png]

[Image = right.png]

[Image = center.png]

[Image = justify.png]
| | '''Text''' can be aligned either to the:

* '''Left'''
* '''Right'''
* '''Center'''
* '''Justify'''

Let us try one of these.
|-
| | Switch to firefox
| | Switch to the '''browser'''.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

The '''heading '''is now aligned to the '''center.'''
|-
| | [gedit - mystyle.css] Highlight

text-align: center;
| | This is because the '''text-align''' property for the '''h1 tag''' is set to '''center'''.

You can explore the remaining '''text-align properties''' on your own.
|-
| |
| | Next let’s learn about some more '''text''' properties.
|-
| | Slide: Indentation
| |
* '''text-indent '''property''' '''is used to insert an empty space before the first line of '''text'''
* The size of empty space is set using '''length values''' like '''cm, px, % '''etc.

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

Type: text-indent: 60px;
| | I will insert an empty space of '''60 pixels''' before the first line of the '''paragraph'''.

Inside the '''p tag''', below the '''width '''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 paragraph
| | Observe the output.

The paragraph now has an empty space of '''60px''' before the first line.
|-
| | Slide: Spacing
| |
* '''Spacing '''property is used to change the space between '''words '''and '''letters '''of a '''text'''.
* Positive values are used to increase the space.
* Negative values are used to decrease the space.

|-
| | Slide: Spacing
| | It has two types of properties:

* '''letter-spacing '''is used to increase or decrease the space in between letters.
* '''word-spacing '''is used to increase or decrease the space between the words.

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

Type: letter-spacing: -2px;
| | For the '''heading,''' I will decrease the '''space''' between the letters by '''2px'''.

Inside the '''h1 tag''', next to the '''font-size property''', type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

The '''space''' between the letters in the '''heading''' has decreased.
|-
| | [gedit - mystyle.css]
| | Switch to '''mystyle.css''' file in the '''text editor.'''
|-
| | [gedit - mystyle.css]

Update: letter-spacing: 7px;
| | Now in the '''heading,''' let us increase the '''space''' between the letters by '''7px'''.

Update the '''letter-spacing '''property value to '''7 pixels.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

The '''space''' between the letters in the '''heading''' has now increased.
|-
| | [gedit - mystyle.css]

Type: word-spacing: 20px;
| | Next, in the '''paragraph''', let’s increase the '''space''' between words by '''20px'''.

Inside the '''p tag''', after the '''text-indent '''property, type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

We can see that the '''space''' between the words in the '''paragraph '''has increased.
|-
| | [gedit - mystyle.css]
| | Switch to '''mystyle.css''' file in the '''text editor.'''
|-
| | [gedit - mystyle.css] Highlight:

word-spacing: 20px;
| | To decrease the '''space''' between the words, '''word-spacing''' also accepts the negative values.
|-
| | [gedit - mystyle.css] Update:

word-spacing: 10px;
| | Now, for properly displaying the paragraph in this web page, we will set it to '''10px.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browse'''r and refresh the page.

This is the required word spacing which we want on this page.
|-
| | Only narration
| | Let’s now move on to the '''height '''property.
|-
| | Slide: Line Height
| |
* '''line-height''' is used to set the space between the lines of the '''text'''.

|-
| | [gedit - mystyle.css]

Type: line-height: 1.8;
| | Switch to the '''mystyle.css''' file.

Now I will assign 1.8 to '''height property''' in the''' paragraph.'''

That is '''1.8''' times the size of the current font.

Inside the '''p''' '''tag''', next to the '''word-spacing property,''' type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

The '''space''' between the lines of''' text''' has increased.
|-
| | Slide: Text Direction
| |
* Direction of a '''text''' is set by '''CSS direction '''property'''.'''
* It has two values:
** '''ltr '''(default): sets the direction from left to right.
** '''rtl: '''sets the direction from right to left.

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

Type: direction: rtl;
| | Let’s set the direction of the '''paragraph''' from right to left first.

Inside the '''p''' '''tag''', after the''' line-height '''property type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

Now the direction of the '''text''' of the '''paragraph''' has changed from '''right to left.'''
|-
| | Switch to mystyle.css
| | Switch back to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update: direction: ltr;
| | Now let’s set the direction of the '''paragraph''' from left to right.

Update the '''direction property '''to''' ltr.'''
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

Now the direction of the '''text''' of the '''paragraph''' has changed to the default left to right '''.'''
|-
| |
| | Next, we’ll learn about the '''transformation '''property.
|-
| | Slide: Transformation
| | The '''text-transform '''property manages the capitalization of '''text'''.
|-
| | Slide: Transformation

[Image = uppercase.png]

[Image = lowercase.png]

[Image = capitalize.png]

| | Values of this property are:

* '''uppercase''': Converts all the letters to uppercase
* '''lowercase''': Converts all the letters to lowercase
* '''capitalize''': Converts the first letter of each word to uppercase

Let us try one of these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

text-transform: uppercase;
| | Now I will set the paragraph''' '''to''' uppercase.'''

Inside the '''p tag,''' next to '''direction property''' type the code as shown.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page.
|-
| | [browser]

Highlight the paragraph
| | Observe the output.

All the letters in the paragraph have now changed to''' uppercase.'''

Similarly try the remaining '''direction properties''' on your own.
|-
| | Switch to mystyle.css

Delete: text-transform: uppercase;

Ctrl + S
| | Switch to the file '''mystyle.css'''

Delete the '''text-transform '''property.

And save the file.
|-
| |
| | Next comes the '''decoration '''property.
|-
| | Slide: Decoration
| |
* '''text-decoration '''property is used to apply or remove the decoration of the '''text'''.

|-
| | Slide: Decoration

[Image = overline.png]

[Image = underline.png]

[Image = line-through.png]

[Image = none.png]
| | The values for the '''text decoration''' property are:

* '''Overline'''
* '''Underline'''
* '''Line-through'''
* '''None'''

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type:

text-decoration: overline;
| | Now let’s set the '''overline text-decoration '''to the '''heading'''.

Inside the '''h1''' tag, next to the '''letter-spacing '''property, type the shown code.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

Now the '''heading''' has an '''overline''' '''text-decoration'''.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

text-decoration: underline;
| | Now let’s apply an '''underline '''to the '''heading'''.

Update the '''text-decoration''' property to '''underline'''.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

Similarly, explore the remaining '''text-decoration properties''' on your own.
|-
| | Only narration
| | We now come to '''text shadows'''.
|-
| | Slide: Shadow

'''text-shadow: h-shadow v-shadow blur-radius color;'''
| |
* '''text-shadow''' property is used to apply '''shadow effects''' to the '''text'''.
* This is the syntax

|-
| | Slide: Shadow
| |
* '''h-shadow: '''Sets the position of horizontal shadow.
* '''v-shadow:''' Sets the position of vertical shadow.
* '''h-shadow''' and '''v-shadow''' are mandatory values

|-
| | Slide: Shadow
| |
* '''blur-radius:''' Sets the radius of blur.
* '''color:''' Sets the color of the shadow.
* '''blur-radius '''and''' color''' are optional values.

Let us try these.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Type: text-shadow: 4px 4px 2px;
| | Now I will use this property in the '''heading''' of the page.

I will set '''h-shadow to 4 pixel, v-shadow to 4 pixel, blur-radius to 2 pixel'''

Inside the '''h1''' '''tag''', next to '''text-decoration 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:

Welcome to Farmer's Market
| | Observe the output.

In '''heading''', we can see the '''text-shadow''' effect.

Here the shadow color is the same as the text color.

This is because we have not set any '''color''' for the shadow.
|-
| | Switch to mystyle.css
| | Switch to the '''mystyle.css''' file.
|-
| | [gedit - mystyle.css]

Update:

text-shadow: 4px 4px 6px black;
| | Now I will use the '''color''' value for the shadow property.

I will also change the '''blur-radius to 6pixels '''and''' color '''to''' black.'''

So, update the '''text-shadow property''' as shown.
|-
| | Press Ctrl + S
| | Save the file
|-
| | Switch to firefox
| | Switch to the '''browser''' and refresh the page
|-
| | [Firefox] Highlight:

Welcome to Farmer's Market
| | Observe the output.

In the '''heading''', we can see the '''text-shadow''' in '''black color'''.
|-
| | Only narration
| | In this manner, we can '''style''' our '''text''' using '''CSS''' properties.

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

Let us summarize.
|-
| | Slide: Summary
| | In this tutorial, we have learnt about '''Text '''properties of an '''element''' in''' CSS.'''
|-
| | Slide: Assignment
| | As an assignment

* Open the file '''styles.css''' which you have created earlier
* Set '''yellow''' color to '''heading '''and''' center '''align''' '''it.

|-
| | Slide: Assignment
| | For the '''Paragraph''' content, set the
* '''text-indentation''' to '''1cm'''
* '''word spacing''' to '''3px '''
* '''line-height''' to '''1.2'''
* Direction as '''left to right'''.

|-
| | Slide: Assignment
| |
* '''Underline''' and '''uppercase''' the '''heading'''.
* Set '''text-shadow '''with '''black''' color in the '''heading.'''

* 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 Neha Solanki.

And this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C2/First-CSS-file/English

2020-10-16T06:57:37Z

Nehasolanki:

'''Title of the script: '''First CSS File

'''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 Syntax, CSS Property, CSS Selector, CSS Declaration, Descendant Selector, Grouping Selector, Universal Selector Id Selector, Class Selector

{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the Spoken Tutorial on '''First CSS File'''.
|-
|| Slide 2:

Learning Objectives
|| In this tutorial we will learn,

* To create a '''CSS''' file
* Syntax of '''CSS'''
* Linking a '''CSS''' file with the '''HTML''' file

|-
|| Slide 3:

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 4: Prerequisite

https://spoken-tutorial.org
|| To practise this tutorial,

You should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.

You should also have some basic knowledge of '''HTML.'''

If not, please go through the '''HTML '''tutorials on this website.
|-
|| Slide 5: 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.
|-
|| Open Gedit
|| Now we will see how to create a simple '''CSS style''' file.

Open any '''text editor'''.

I have already opened my '''gedit Text Editor.'''
|-
|| Slide: Syntax

selector {property: value}
|| This is the '''syntax''' to write the '''style''' for the '''HTML'''.

The '''syntax''' has two parts:

:'''Selector''' and '''Declaration'''
|-
|| Slide: Selector
|| The '''selector''' can be any one of the following:

* '''Element'''
* '''Descendant'''
* '''Grouping'''
* '''Universal'''
* '''Id'''
* '''Class'''

|-
|| Slide: Declaration
||
* '''Declaration''' assigns a particular '''property''' and '''value''' to the '''selector'''.
* We can declare multiple '''style properties''' for a '''selector''' using a '''semicolon'''.
* '''Declaration''' has to be written inside the braces.

|-
|| Slide: Syntax Example
|| Here is an example.
|-
|| Switch to gedit
|| Now let us start writing our '''CSS''' code.

Switch to the '''editor'''.
|-
|| [gedit]

body {

background-color: yellow;

}
|| First we will set the background color for the '''body''' as '''yellow'''.

To do so, type the code as shown.
|-
|| [gedit] Highlight: body
|| Here the '''selector''' is '''body''', a '''HTML tag.'''
|-
|| [gedit] Highlight:

{

background-color: yellow;

}
|| Next I have declared the '''style''' within curly braces.

|-
|| [gedit] Highlight:

background-color: yellow;
|| In the '''declaration''' part, '''background-color''' is the '''style property''' and '''yellow''' is its '''value'''.
|-
|| Only narration
|| Our code is ready.

So let’s save this file now.
|-
|| Press '''Ctrl + S'''
|| I’ll press '''Ctrl + S '''keys on my keyboard.

The '''Save''' '''As''' dialog box opens.
|-
|| Select Desktop
|| Now choose the desired location to save your file.

I will select '''Desktop''' on my machine.
|-
|| Create Folder →my-css
|| I will create a folder with the help of the “'''Create Folder'''” button.

Then name the folder as '''my hyphen css'''.

Click on '''Create''' button.

This folder will help me to organize my '''css''' files in a single location on my machine.
|-
|| Filename → mystyle.css

|| I will name the file as '''mystyle.css'''

Please note that the '''CSS''' files have to be saved with '''.css''' file extension.
|-
|| Click on '''Save'''
|| Then click on the '''Save''' button.

Our file is saved now.
|-
|| Open Desktop → my-css folder >> double-click to open
|| Let us check our saved file.

Go to the '''Desktop''' folder.

Here is the folder '''my hyphen css.'''

I will double-click to open it.
|-
|| Point to css file
|| This is the newly created '''CSS''' file.
|-
|| Only narration
|| We have successfully created our first '''CSS''' file and saved it.

Now let’s learn how to '''run''' it.
|-
|| Slide: Note
||
* '''CSS''' file is a dependent file.
* It must be '''linked''' with a '''HTML''' file to see the changes.

Let us link a '''CSS''' file to a '''HTML''' file.
|-
|| Point to Mypage.html in my-css folder
|| For this demonstration, we will use the file '''Mypage.html'''.

I have already downloaded this file and saved it in my practice folder.

The same file is available in the '''Code files''' link for practice.
|-
|| Right-click >> select '''Open With''' >> '''Select''' button
|| Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
|| Select '''Open With Firefox'''
|| Then choose any '''web browser''' that is available.

I will choose '''Firefox'''.

Then click on '''Select''' button.

This will open our '''HTML''' file in the '''Firefox web browser'''.
|-
|| Highlight the background
||

Notice that the background color of the page is white.

Now let us set the background color to yellow with the help of our '''CSS''' file.
|-
|| Right-click >> select '''Open With'''
|| Switch to the folder.

Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
|| Select '''Open With gedit''' >> '''Select''' button
|| Then choose any '''text editor''' that is available.

I will choose '''gedit'''.

Then click on '''Select''' button.

This will open our '''HTML''' file in the '''gedit text editor'''.
|-
|| [gedit - Mypage.html]

Type:

<link rel="stylesheet" href="mystyle.css">
|| Inside the '''head''' section next to the '''title tag''', type the code as shown.
|-
|| Highlight

<link rel="stylesheet" href="mystyle.css">
|| This will '''link''' the '''mystyle.css''' file which we created earlier, to this '''HTML''' file.
|-
|| 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 background color is set to yellow.
|-
|| Switch to mystyle.css
|| Let’s do some more changes in the '''CSS''' file.

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

Type:

h1 {

color: blue;

text-align: center;

}
|| Next to the '''body''' '''tag''', type the code as shown here.

This will set the text color to blue and align the content of '''h1 heading tag '''to the centre.
|-
|| Press Ctrl + S
|| Save the file once again.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| Highlight the output
|| Observe the output.

Now the text appears in blue colour and it is '''center-aligned.'''
|-
|| Only narration
|| So far, we have learned to set '''styles''' for the '''HTML element''' as a '''selector'''.

We also declared single and multiple '''style properties''' for the '''selector'''.

Now let us learn about the usage of other '''selectors'''.
|-
|| Slide: Selectors
||
* '''Descendant''' - This will set the '''style''' if a defined '''element''' comes inside a particular '''element'''
* '''Grouping''' - This will set the same '''styles''' for multiple '''elements'''
* '''Universal''' - This will set the '''styles''' of all the '''HTML elements '''at the same time
* '''Id''' - This will set the '''style''' for a single unique '''element'''
* '''Class''' - This will set the '''style''' for more than one '''element'''

Let us see some examples for this.
|-
|| Slide: Descendant Selector
'''p b {color: green;}'''
||'''Descendant'''.
In this case if the '''bold tag''' comes inside the '''paragraph tag''', text color will be set to green.

For this we have to give a '''space''' between the '''elements'''.
|-
|| Show example of Descendant Selector
|| Here is an example for '''Descendant Selector'''
|-
|| Slide: Grouping Selector
'''h1, h2, h3 { background-color: red;}'''
|| '''Grouping'''.
In this case the background colour for '''h1, h2 '''and''' h3 tags''' will be set to red.

For this we have to use a '''comma '''between the '''elements.'''
|-
|| Show example of Grouping Selector
|| Here is an example for '''Grouping Selector'''.
|-
|| Slide: Universal Selector
'''* {color: blue} '''
||'''Universal'''.
This will set the text color for the entire page to blue.

Here instead of '''element''' names, we have to use an '''asterisk symbol''' as a '''selector.'''
|-
|| Show example of Universal Selector
|| Here is an example for '''Universal Selector'''.
|-
|| Slide: id Selector

'''#list1 {color: blue;}'''
|| '''id'''.
In this case, in '''CSS''' we have a '''hash symbol''' and a name next to the '''id''' as a '''selector'''.
|-
|| Slide: id Selector

'''<nowiki><ul id="list1"></nowiki>'''

:'''<nowiki><li>HTML</li></nowiki>'''

:'''<nowiki><li>CSS</li></nowiki>'''

:'''<nowiki><li>Java Script</li></nowiki>'''

'''<nowiki></ul></nowiki>'''
|| In '''HTML''' we have to use '''id =''' name of the''' id''' in '''double quotes''' inside the respective '''element’s''' start '''tag'''.
|-
|| Show example of id Selector
|| Here is an example for '''id Selector'''.
|-
|| Slide: class Selector

'''. list1 {color: blue;}'''
|| '''Class'''.
In this case, in '''CSS''' we have a '''dot operator''' and a name of the '''class''' as a '''selector'''.
|-
|| Slide: class Selector

'''<nowiki><ul class="list1"></nowiki>'''

:'''<nowiki><li>HTML</li></nowiki>'''

:'''<nowiki><li>CSS</li></nowiki>'''

:'''<nowiki><li>Java Script</li></nowiki>'''

'''</ul>'''
|| In '''HTML''' we have to use '''class = '''name of the''' class''' in '''double quotes''' inside the respective '''element’s''' start '''tag'''.
|-
|| Show example of class Selector
|| Here is an example for '''class Selector'''.
|-
||
|| Try these on your own.

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

Let us now summarize.
|-
|| Slide 6: Summary

|| In this tutorial, we have learnt:

* How to create a '''CSS '''file
* Syntax of '''CSS'''
* About types of '''Selectors'''
* Style '''Declaration'''
* Linking a '''CSS '''file with a '''HTML '''file

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

* Create a '''styles.css''' file using any '''text editor'''
* Set the '''background '''as '''lightblue'''
* Create a '''webpage.html''' using any '''text editor'''
* Link the '''styles.css''' file to '''webpage.html''' file
* Observe the output on the '''web browser'''

|-
|| Slide 9:

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

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

For more details, please write to us.
|-
|| Slide 11:

Answers for THIS Spoken Tutorial
|| Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
|| Slide 12:

Forum for specific questions:

|| The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
|| Slide 13: Acknowledgement
|| Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
|| Slide 14: 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.
|-
|}

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

2020-10-14T06:57:49Z

Nehasolanki:

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

|-
|| 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 from IIT Bombay.

Thank you for watching.
|-
|}

CSS/C2/Background-in-CSS/English

2020-10-09T14:00:25Z

Nehasolanki: Created page with "'''Title of the script: '''Background in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Ke..."

'''Title of the script: '''Background in CSS

'''Author:''' Neha Solanki

'''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 Background, CSS Background-Color, CSS Background Image, CSS Background Repeat, CSS Background Attachment, CSS Background Position, CSS Color, CSS Background Shorthand

{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the spoken tutorial on “'''Background in CSS'''”
|-
|| Slide: Learning Objectives
||In this tutorial, we will learn about''' background '''properties of an '''element '''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 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: Background
|| To '''style '''the '''background''' of an '''element''', '''CSS''' has the following properties:

*'''background-color'''
*'''background-image'''
*'''background-repeat'''
*'''background-attachment'''
*'''background-position'''

Let us understand these one by one through examples.
|-
| | Slide: Background Color
|| The '''background-color''' can be set using these formats

* '''Color names'''
* '''Hexadecimal values'''
* '''RGB (Red Green Blue) values'''

Let us try this.
|-
|| 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:

background-color: yellow;
|| Here for the '''body''' '''tag''' I have set the '''background-color''' as '''yellow'''.
|-
|| Open Mypage.html in firefox
|| Switch to the '''my-css''' folder.

Now open the file '''Mypage.html''' in a '''web browser'''.
|-
|| [Firefox] Highlight the output
|| Observe the output.

The '''background color''' of the page is set to '''Yellow'''.
|-
|| Switch to mystyle.css
|| Let’s do some more changes to the '''CSS''' file '''mystyle.css'''
|-
|| [gedit] mystyle.css

Update:

background-color: #FFFF00;
|| Now I will set the '''background color''' to '''yellow '''using the '''hexadecimal value'''.

The '''hexadecimal value''' of '''yellow''' is '''#FFFF00'''

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

The '''background color''' of the page is still '''yellow'''.

Now I will try with '''RGB color code.'''
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css]

Update:

background-color: rgb(255,102,203);
|| Now change the '''background color''' to '''pink''' using '''rgb '''value.

'''rgb value '''for '''pink''' is''' rgb(255,102,203);'''

Update the code as shown.
|-
|| [gedit - mystyle.css] Highlight:

rgb(225,102,203);
|| '''RGB color''' value is specified with''' rgb(red, green, blue''') ranging between 0 to 255.
|-
|| 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 '''background color''' of the page is set to '''pink.'''
|-
|| Only narration
||We can also set an'''image''' as the'''background''' for an'''element''' using'''CSS.'''

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

background-image: url("tomato.png");
|| Inside the '''body tag''', next to the '''width''' property, type the code as shown.

|-
|| [gedit - mystyle.css] Highlight:

url("tomato.png");
|| The name of the '''image''' along with the path should be written inside the '''url( ) function.'''
|-
|| [gedit - mystyle.css] Highlight:

tomato.png
|| This image is available in the '''Code Files''' link on this tutorial page.

Please download and keep it in the folder where you have saved the other code files.
|-
|| 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 '''image''' is set as a '''background'''.

'''Image''' gets floated according to its '''dimension '''to fit the '''background'''.

If the '''image dimension''' is more than the '''background''' then a single '''image''' will be displayed.

Here the '''image dimension''' is less than the '''background'''.

Therefore multiple '''images''' are displayed.

To control this we have some '''background''' properties in '''CSS.'''
|-
|| Slide: Background Repeat
|| '''background-repeat '''allows to repeat the '''image''' in the '''background''' of an '''element'''.
|-
|| Slide: Background Repeat Values
|| Values of this property are:

* '''repeat-x''': repeats '''image''' horizontally.
* '''repeat-y''': repeats '''image''' vertically.
* '''no-repeat''': does not repeat, shows '''image''' one time.
* '''repeat''': It is the default value, which repeats the '''image''' in both directions.

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

background-repeat: repeat-x;
|| First I will repeat the '''image''' horizontally.

Inside the '''body tag''', below the '''background-image '''property, type the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browse'''r and refresh the page
|-
|| [Firefox] Highlight the output
|| Observe the output.

Earlier the '''background image''' repeated both horizontally and vertically.

Now it is repeated horizontally because the value is set to '''repeat-x'''
|-
|| [gedit - mystyle.css] Highlight

background-repeat: repeat-x;
|| If you wish to repeat the '''image''' vertically, then set the repeat value as '''repeat-y.'''
|-
|| [gedit - mystyle.css] Update:

background-repeat: no-repeat;
|| Now change the '''background-repeat''' value as '''no-repeat'''.

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

Now the '''background image''' is displayed in the '''top left '''corner which is the default position.

It is not repeating.
|-
|| Slide:Background Attachment
|| '''background-attachment''' decides whether to scroll the '''image '''or not, along with the '''webpage'''.
|-
|| Slide:Background- Attachment
||
* '''scroll:''' allows the '''background image''' to scroll along with the page.
* '''fixed''': the '''background image '''remains fixed, it is not allowed to scroll.

Let us try this.
|-
|| Switch to mystyle.css
|| Switch to the '''mystyle.css''' file to try this.
|-
|| [gedit - mystyle.css] Type:

background-attachment: scroll;
|| Now I will set the '''background attachment''' to '''scroll.'''

Inside the '''body tag''', next to '''background-repeat''' property, type the code as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Mypage.html in text editor
|| Switch to '''my-css''' folder.

Now open the file '''Mypage.html''' in a '''text editor'''.
|-
|| [gedit - Mypage.html] Type:

<nowiki><dl></nowiki>

<nowiki><dt> Dry fruits </dt> </nowiki>
:<nowiki><dd> Cashew </dd></nowiki>
:<nowiki><dd> Almond </dd></nowiki>
:<nowiki><dd> Apricot</dd></nowiki>
:<nowiki><dd> Dates </dd></nowiki>
:<nowiki><dd> Fig </dd></nowiki>

<nowiki><dt> Fresh Fruits </dt></nowiki>
:<nowiki><dd> Orange </dd> </nowiki>
:<nowiki><dd> Mango </dd> </nowiki>
:<nowiki><dd> Apple </dd></nowiki>
:<nowiki><dd> Grapes </dd> </nowiki>
:<nowiki><dd> Melon </dd> </nowiki>
:<nowiki><dd> Banana </dd></nowiki>
:<nowiki><dd> Cherry </dd> </nowiki>
:<nowiki><dd> Blueberry </dd> </nowiki>
:<nowiki><dd> Apricot </dd> </nowiki>
:<nowiki><dd> Pineapple </dd></nowiki>
:<nowiki><dd> Dragon Fruit </dd> </nowiki>
:<nowiki><dd> Avocados </dd></nowiki>
:<nowiki><dd> Kiwi </dd> </nowiki>
:<nowiki><dd> Pear </dd> </nowiki>
:<nowiki><dd> Pomegranate </dd> </nowiki>
:<nowiki><dd> Plum </dd></nowiki>
:<nowiki><dd> Papaya </dd></nowiki>

<nowiki></dl></nowiki>
|| Next to the '''div closing 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.

As I scroll down, the '''background image''' also gets scrolled.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

background-attachment: fixed;
|| Change the value of '''background-attachment '''to '''fixed.'''

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 output as I '''scroll '''down.

The '''background image''' remains fixed, while the other contents are getting scrolled.

This is based on the size of the '''browser''' and the '''content''' available in the page.
|-
|| Switch to Mypage.html

Ctrl + Z

Ctrl + S
|| Switch to the '''Mypage.html''' file.

Undo the changes which we have done now.

Save the file.
|-
|| Slide: Background-Position
|| '''background-position''' is used to specify the position of the '''background image''' of an '''element'''.
|-
|| Slide: Background-Position
|| The position value for the '''background image''' can be set as:

*'''Percentage (%)'''
*'''Length values ( eg. mm, cm, px )'''
*'''keywords (top, right, center, left, bottom)'''

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

background-position: 100% 0%;
|| I will set the position of the '''background image''' to the '''top right''' corner using '''percentage'''.

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

background-position: 100% 0%;
|| Here, the first value corresponds to the '''horizontal background''' position.

The second value corresponds to the '''vertical background''' position.
|-
|| 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 position of the '''background image''' has changed to the '''top right corner''' of the page.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

background-position: 4cm 3cm;
|| Now I will set the position for the '''background image''' using '''length value (cm)'''.

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

The position of the '''background image''' has changed as per the given''' length value'''.
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

background-position: right bottom;
|| Let’s set the position of the '''background image''' to the '''bottom right '''using some '''keywords'''.

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

Now the position of the '''background image''' has changed to the '''bottom right'''.
|-
|| Slide: Shorthand
|| Using '''shorthand''', we can write this same code in a single line.

The order in which '''background property''' values should be written is:

'''background: ''color'' ''image'' ''repeat'' ''attachment'' ''position'';'''
|-
|| [gedit - mystyle.css]
|| Switch to '''mystyle.css''' file in the '''text editor.'''
|-
|| [gedit - mystyle.css] Update:

body {

background: yellow url("tomato.png") no-repeat scroll top right; }
|| Update the code of the '''body''' '''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 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 '''background '''properties of an '''element '''in''' CSS.'''
|-
|| Slide: Assignment
|| As an assignment

* Open the file '''styles.css''' which you have created earlier.

|-
|| Slide: Assignment
||
* Set the following '''styles''' for the '''body tag:'''
** '''Image''' as a '''background'''
** '''no-repeat '''for''' background-repeat'''
** '''background-position''' to '''top right'''

|-
|| 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 Neha Solanki

and this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.
|-
|}

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

2020-10-09T13:26:01Z

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

'''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.
|-
|}

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

2020-10-09T12:22:22Z

Nehasolanki: Created page with "'''Title of the script: '''Dimensions and Measuring Units in CSS '''Author:''' Praveen S '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri..."

'''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.
|-
|}

CSS/C2/First-CSS-file/English

2020-10-09T11:01:06Z

Nehasolanki: Created page with "'''Title of the script: '''First CSS File '''Author:''' Praveen S '''webDomain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywo..."

'''Title of the script: '''First CSS File

'''Author:''' Praveen S

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

'''Novice Reviewer:''' Madhuri Ganapathi

'''Keywords: '''CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Syntax, CSS Property, CSS Selector, CSS Declaration, Descendant Selector, Grouping Selector, Universal Selector Id Selector, Class Selector

{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| Slide: Title
|| Welcome to the Spoken Tutorial on '''First CSS File'''.
|-
|| Slide 2:

Learning Objectives
|| In this tutorial we will learn,

* To create a '''CSS''' file
* Syntax of '''CSS'''
* Linking a '''CSS''' file with the '''HTML''' file

|-
|| Slide 3:

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 4: Prerequisite

https://spoken-tutorial.org
|| To practise this tutorial,

You should know to use any '''WYSIWYG '''or '''Text Editor''' and a '''Web Browser'''.

You should also have some basic knowledge of '''HTML.'''

If not, please go through the '''HTML '''tutorials on this website.
|-
|| Slide 5: 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.
|-
|| Open Gedit
|| Now we will see how to create a simple '''CSS style''' file.

Open any '''text editor'''.

I have already opened my '''gedit Text Editor.'''
|-
|| Slide: Syntax

selector {property: value}
|| This is the syntax to write the style for the '''HTML'''

The syntax has two parts:

'''Selector''' and '''Declaration'''
|-
|| Slide: Selector
|| The '''selector''' can be any one of the following:

* '''Element'''
* '''Descendant'''
* '''Grouping'''
* '''Universal'''
* '''Id'''
* '''Class'''

|-
|| Slide: Declaration
||
* '''Declaration''' assigns a particular '''property''' and '''value''' to the '''selector'''.
* We can declare multiple style '''properties''' for a '''selector''' using a '''semicolon'''.
* '''Declaration''' has to be written inside the braces.

|-
|| Slide: Syntax Example
|| Here is an example.
|-
|| Switch to gedit
|| Now let us start writing our '''CSS''' code.

Switch to the '''editor'''.
|-
|| [gedit]

body {

background-color: yellow;

}
|| First we will set the background color for the '''body''' as '''yellow'''.

To do so, type the code as shown.
|-
|| [gedit] Highlight: body
|| Here the '''selector''' is '''body''', a '''HTML tag.'''
|-
|| [gedit] Highlight:

{

background-color: yellow;

}
|| Next I have declared the '''style''' within curly braces.

|-
|| [gedit] Highlight:

background-color: yellow;
|| In the '''declaration''' part, '''background-color''' is the '''style property''' and '''yellow''' is its '''value'''.
|-
|| Only narration
|| Our code is ready.

So let’s save this file now.
|-
|| Press '''Ctrl + S'''
|| I’ll press '''Ctrl + S '''keys on my keyboard.

The '''Save''' '''As''' dialog box opens.
|-
|| Select Desktop
|| Now choose the desired location to save your file.

I will select '''Desktop''' on my machine.
|-
|| Create Folder →my-css
|| Then I will create a folder with the help of the “'''Create Folder'''” button and name it as '''my hyphen css'''.

This folder will help me to organize my '''css''' files in a single location on my machine.
|-
|| Filename → mystyle.css

|| I will name the file as '''mystyle.css'''

Please note that the '''CSS''' files have to be saved with '''.css''' file extension.
|-
|| Click on '''Save'''
|| Then, click on the '''Save''' button.

Our file is saved now.
|-
|| Open Desktop → my-css folder >> double-click to open
|| Let us check our saved file.

Go to the '''Desktop''' folder.

Here is the folder '''my hyphen css.'''

I will double-click to open it.
|-
|| Point to css file
|| This is the newly created '''CSS''' file.
|-
|| Only narration
|| We have successfully created our first '''CSS''' file and saved it.

Now let’s learn how to '''run''' it.
|-
|| Slide: Note
||
* '''CSS''' file is a dependent file.
* It must be linked with a '''HTML''' file to see the changes.

Let us link a '''CSS''' file to a '''HTML''' file.
|-
|| Point to Mypage.html in my-css folder
|| For this demonstration, we will use the file '''Mypage.html'''.

I have already downloaded this file and saved it in my practice folder.

The same file is available in the '''Code files''' link for practice.
|-
|| Right-click >> select '''Open With'''
|| Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
|| Select '''Open With Firefox'''
|| Then choose any '''web browser''' that is available.

I will choose '''Firefox'''.

This will open our '''HTML''' file in the '''Firefox web browser'''.
|-
|| Highlight the background
|| The '''webpage''' opens.

Notice that the background color of the page is white.

Now let us set the background color to yellow with the help of our '''CSS''' file.
|-
|| Right-click >> select '''Open With'''
|| Switch to the folder.

Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
|| Select '''Open With gedit'''
|| Then choose any '''text editor''' that is available.

I will choose '''gedit'''.

This will open our '''HTML''' file in the '''gedit text editor'''.
|-
|| [gedit - Mypage.html]

Type:

<link rel="stylesheet" href="mystyle.css">
|| Inside the '''head''' section next to the '''title tag''', type the code as shown.
|-
|| Highlight

<link rel="stylesheet" href="mystyle.css">
|| This will link the '''mystyle.css''' file which we created earlier, to this '''HTML''' file.
|-
|| 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 background color is set to yellow.
|-
|| Switch to mystyle.css
|| Let’s do some more changes in the '''CSS''' file.

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

Type:

h1 {

color: blue;

text-align: center;

}
|| Next to the '''body''' '''tag''', type the code as shown here.

This will set the text color to blue and align the content of '''h1 heading tag '''to the centre.
|-
|| Press Ctrl + S
|| Save the file once again.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| Highlight the output
|| Observe the output.

Now the text appears in blue colour and it is '''center-aligned.'''
|-
|| Only narration
|| So far, we have learned to set '''styles''' for the '''HTML element''' as a '''selector'''.

We also declared single and multiple '''style properties''' for the '''selector'''.

Now let us learn about the usage of other '''selectors'''.
|-
|| Slide: Selectors
||
* '''Descendant''' - Will set the style if a defined element comes inside a particular element
* '''Grouping''' - Will set the same styles for multiple elements
* '''Universal''' - Will set the styles of all the '''HTML elements '''at the same time
* '''Id''' - Will set the style for a single unique element
* '''Class''' - Will set the style for more than one element

Let us see some examples for this.
|-
|| Slide: Descendant Selector
|| '''p b {color: green;}'''

In this case if the '''bold tag''' comes inside the '''paragraph tag''', text color will be set to green.

For this we have to give a '''space''' between the '''elements'''.
|-
|| Show example of Descendant Selector
|| Here is an example for '''Descendant Selector'''
|-
|| Slide: Grouping Selector
|| '''h1, h2, h3 { background-color: red;}'''

In this case the background colour for '''h1, h2 '''and''' h3 tags''' will be set to red.

For this we have to use a '''comma '''between the '''elements.'''
|-
|| Show example of Grouping Selector
|| Here is an example for '''Grouping Selector'''
|-
|| Slide: Universal Selector
|| '''* {color: blue} '''

This will set the text color for the entire page to blue.

Here instead of '''element''' names, we have to use an '''asterisk''' '''symbol''' as a '''selector.'''
|-
|| Show example of Universal Selector
|| Here is an example for '''Universal Selector'''
|-
|| Slide: id Selector

'''#list1 {color: blue;}'''
|| In this case, in '''CSS''' we have a '''hash symbol''' and a '''name''' next to the '''id''' as a '''selector'''.
|-
|| Slide: id Selector

'''<nowiki><ul id="list1"></nowiki>'''

:'''<nowiki><li>HTML</li></nowiki>'''

:'''<nowiki><li>CSS</li></nowiki>'''

:'''<nowiki><li>Java Script</li></nowiki>'''

'''<nowiki></ul></nowiki>'''
|| In '''HTML''' we have to use '''id =''' name of the''' id''' in '''double quotes''' inside the respective '''element’s''' start '''tag'''.
|-
|| Show example of id Selector
|| Here is an example for '''id Selector'''
|-
|| Slide: class Selector

'''. list1 {color: blue;}'''
|| In this case, In '''CSS''' we have a '''dot operator''' and a '''name''' of the '''class''' as a '''selector'''.
|-
|| Slide: class Selector

'''<nowiki><ul class="list1"></nowiki>'''

:'''<nowiki><li>HTML</li></nowiki>'''

:'''<nowiki><li>CSS</li></nowiki>'''

:'''<nowiki><li>Java Script</li></nowiki>'''

'''</ul>'''
|| In '''HTML''' we have to use '''class = '''name of the''' class''' in '''double quotes''' inside the respective '''element’s''' start '''tag'''.
|-
|| Show example of class Selector
|| Here is an example for '''class Selector'''
|-
||
|| Try these on your own.

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

Let us now summarize.
|-
|| Slide 6: Summary

|| In this tutorial, we have learnt:

* How to create a '''CSS '''file
* Syntax of '''CSS'''
* About types of '''Selectors'''
* Style '''Declaration'''
* Linking a '''CSS '''file with a '''HTML '''file

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

* Create a '''styles.css''' file using any '''text editor'''
* Set the '''background '''as '''lightblue'''
* Create a '''webpage.html''' using any '''text editor'''
* Link the '''styles.css''' file to '''webpage.html''' file
* Observe the output on the web browser

|-
|| Slide 9:

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

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

For more details, please write to us.
|-
|| Slide 11:

Answers for THIS Spoken Tutorial
|| Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
|| Slide 12:

Forum for specific questions:

|| The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
|| Slide 13: Acknowledgement
|| Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
|| Slide 14: Thanks
|| The script for this tutorial is contributed by Praveen

and this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.
|-
|}