×

Html & Html5

Introduction to Html

Component of Html

HTML Advance

HTML Advance

Html Form

Html5 basics

Html5 Grid

Html5 Graphics

Html5 Media

Html5 APIs

it training classes Logo

The World's best Software Development Study Portal

CSS3

Introduction to CSS

Component of CSS


CSS Display



It is the very important property of CSS which mainly controls the layout of webpage. Sometimes you have observed that whenever we use any element after heading element or div element it usually starts with next line , but when we use to write any other element after image element or span element than it use to continue with same line.


Why this happens? -     because it totally depends on the display property of the HTML tags or elements because headings elements and div elements are Block-Level elements and span or image elements are Inline elemets. And most of these elements by default having these two display properties.

    Let's talk more about these properties:-


Block-Level elements


These are those type of elements which always starts with new line and takes the full width of the available screen . Some examples of block-level elements are as follows:-


  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <section>
  • <footer>


Let's take an example :-

<!DOCTYPE html>

<html>

<head>

<style>

p{

          border:4px solid red;

}

</style>

</head>

<body>

<p> I am Manish Singh Bhakuni </p>

</body>

</html>


Output of the Program



I am Manish Singh Bhakuni


Here we can see block-level elements takes up the full width of the available webpage.



Inline elements


These are those type of elements which does not starts with new line and just take the necessary width and also we are not able to change the width of these elements here. Some examples of block-level elements are as follows:-


  • <a>
  • <img>
  • <span>


Let's take an example :-

<!DOCTYPE html>

<html>

<head>

<style>

a {

          border:4px solid hotpink;

}

</style>

</head>

<body>

<a href="#"> Click here </a>

</body>

<html>


Output of the Program



Click here


Here we can see inline elements takes up only necessary width of the available webpage.



Display:none;


This property is used to hide the elements without deleting them. By just writing these propertywe can hide any elements which we want.



Let's understand this by taking an example:-



<!DOCTYPE html>

<html>

<head>

<style>

.red{

          display:none;

}

</style>

</head>

<body>

<p> I am Manish Singh Bhakuni </p>

<p class="red"> Hey I love my India </p>

</body>

</html>


Output of the Program



I am Manish Singh Bhakuni

Hey I love my India

Here our one paragraph is not visible where we implement display:none; property.




Override the default display property


If we want to change the displaying property of elements, than yes we can do this also through CSS



Let's understand this by taking an example:-



<!DOCTYPE html>

<html>

<head>

<style>

p{           display:inline;

          border:4px solid blue;

}

a{

          display:block;

          border:4px solid hotpink; }

</style>

</head>

<body>

<p> I am Manish Singh Bhakuni </p>

<a href="#"> Click Here </a>

</body>

</html>


Output of the Program



I am Manish Singh Bhakuni



Click Here

So this is how we can change the display property of any element.










CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute