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

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

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


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

<div>

<header>

<h1> to <h6>

<p>

<form>

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

<span>

<a>

<img>

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 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:

#item1{

height: 200px;
width: 150px;
background: lightpink;
display: block;}

#item2{

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:

<p id = "item1"> Fruits and vegetables provide essential vitamins and minerals to the body </p>

<p id = "item2"> Fruits and vegetables provide essential vitamins and minerals to the body </p>

Now add these items to the 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 block 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 #item2, 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]

#item1: Update: display: none;

#item2: Type: display: none;

Now I will set the display value to none in item1 and item2.

In the #item1 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.

Contributors and Content Editors

Nancyvarkey, Nehasolanki, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C2/Display-Property-in-CSS/English&oldid=54126"