CSS3 > Display

Display properties in CSS3

How to create display properties using display method in css


Display

The display property affects the most basic presentation of an element, effectively classing the element as a certain type of element. The rendering of the element may depend heavily on its display type, and certain properties will only work on elements that have specific display values.

There are different display properties they are 

Display:inline

It creates the text in the line

<style>
    .class1{
        display:inline;
    }
</style>
</head>
<body>
    <p class="class1">TechFunda</p>
    <p class="class1">is </p>
    <p class="class1">online website </p>
    <p class="class1">Step by step</p>
    <p class="class1">procedure </p>
</body>

In the above code snippet we have display property as inline which creates text in the line 

output

Display:block

It creates text in the vertical line

<style>
    .class1{
        display:block;
    }
</style>
</head>
<body>
    <h2><i>Display block creates text in vertical line</i></h2>
    <p class="class1">TechFunda</p>
    <p class="class1">is </p>
    <p class="class1">online website </p>
    <p class="class1">Step by step</p>
    <p class="class1">procedure </p>
</body>

Display:block

In the above code snippetg we have display :block which creates text in vertical line 

output

Display:listitem

It selects the selected list to change values

<style>
    .s {
    background-color:green;
    display:list-item;
}
</style>
</head>
<body>
    <h2><i>Display list item selects the selected list </i></h2>
    <p class="s">TechFunda</p>
    <p>is </p>
    <p>online website </p>
    <p>Step by step</p>
    <p>procedure </p>
</body>

Display:listitem

In the above code snippet we have .s style element with values and .s is given to the paragraph (p) element which changes the color of the p tag

output

Display:none

Display property does not show value which is present in it

<style>
    .s {
    
    display:none;
}
</style>
</head>
<body>
    <h2><i>Display list item selects the selected list </i></h2>
    <p class="s">TechFunda</p>
    <p>is </p>
   
</body>

Display:none

In the above code snippet we have display property:none in the .s and we have given the s in the p tag using class, displays no value in the output

output

 Views: 591 | Post Order: 136



Write for us