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.
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:
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 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:
You See! CSS display:block; property shows <a> (inline Element) into a block element.
Another important value of the CSS Display property is hiding the content. display:none property is a syntax. Here’s the demonstration of it:
This is a normal paragraph
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.
- 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.
In the next lesson you’ll learn about how to Position the CSS sections.