CSS Lesson 17: Display

0
12

Introduction to CSS Display

Remember! You learned about Block and Inline Elements in the HTML lesson. Here you’ll learn how to use the Inline element into the block element and vice-versa. Additionally, you’ll learn how to hide the content or part of the content by using the CSS Display Property.

Inline Display

HTML Elements which appears in a line without any line spacing, is known as the Inline Element. For example, <b>, <a> and <img> are Inline Elements. In CSS you can convert the block elements into inline elements using the display property. Here’s the demonstration of it:

Source Code Output

This is a first paragraph

This is a second paragraph

This is a third paragraph

This is a fourth paragraph

As you can see, all the paragraphs (block elements) are showing in one line because of display:inline property. This is the beauty of CSS!

Block Display

Block display property is beneficial to convert display elements into inline elements. Block elements have a line spacing at the end of each element. For example, <p>, <h1> and <ul> are block elements and they will appear in the next line even if you write them in the same line. Here’s the demonstration of it:

Source Code Output
Link 1
Link 2
Link 3

You See! CSS display:block; property shows <a> (inline Element) into a block element.

Hidden Display

Another important value of the CSS Display property is hiding the content. display:none┬áproperty is a syntax. Here’s the demonstration of it:

Source Code Output

This is a normal paragraph

This paragraph is hidden due to the display property

You might be thinking, why would I use the hidden value? Actually, there are several advantages. Here are few of them:

  • You can use the hidden value to create closable divs e.g pop-up etc
  • You can simply hide irrelevant content instead of deleting it, because there is a chance that you might need that later.
  • If you want to hide the content in RSS feeds, you can use this property.

Importance of CSS Display Property

Basically, a webpage has a mixture of inline and block elements. It’s important we use them the correct way so the CSS Display property converts their actual behavior to what you want. Here are the some important tips for you regarding Display property:

  • Try to use the Display property when you want to change a part of content.
  • You can use the Display Property to target anchor tags in a drop down navigation bar.
  • Don’t use the Display property heavily if you are writing a webpage in a tabular format.

Summary

  • CSS Display property is useful in hiding elements, or converting inline elements into block elements and vice-versa.
  • Use inline values to convert a block element into an inline element.
  • Use block values to convert an inline element into a block element.
  • Use none value to hide the content.

Next Lesson

In the next lesson you’ll learn about how to Position the CSS sections.

Leave a Reply