Nancyvarkey at 05:01, 26 October 2020

2020-10-26T05:01:51Z

Pravin1389 at 06:50, 24 October 2020

2020-10-24T06:50:23Z

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

2020-10-23T10:59:53Z

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

New page

'''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.
|-
|}

@@ Line 199: / Line 199: @@
 <nowiki><p id = "item2"> Fruits and vegetables provide essential vitamins and minerals to the body </p></nowiki>
-|  | Now add these items to the '''paragraphs'''.
+|  | Now add these '''items''' to the '''paragraphs'''.
 Inside the '''body tag''', next to the '''div closing tag''', type the code as shown.
@@ Line 216: / Line 216: @@
 We can see two new '''paragraphs'''.
-The first '''paragraph '''is in '''blocks '''with the mentioned''' height '''and '''width.'''
+The first '''paragraph '''is in '''block '''with the mentioned''' height '''and '''width.'''
 While the second '''paragraph '''is in '''inline '''and it ignores the mentioned '''height '''and '''width'''.

@@ Line 126: / Line 126: @@
 |  | Switch to the '''my-css''' folder
-For this demonstration, I’m also using the file '''Mypage.html'''.
+For this demonstration, I’m using the file '''Mypage.html'''.
 The same is available in the '''Code files''' link for practice.
@@ Line 199: / Line 199: @@
 <nowiki><p id = "item2"> Fruits and vegetables provide essential vitamins and minerals to the body </p></nowiki>
-|  | Now add these items to '''paragraphs'''.
+|  | Now add these items to the '''paragraphs'''.
 Inside the '''body tag''', next to the '''div closing tag''', type the code as shown.

CSS/C2/Display-Property-in-CSS/English - Revision history

Nancyvarkey at 05:01, 26 October 2020

Pravin1389 at 06:50, 24 October 2020

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