CSS display


    There are two type of display properties in CSS:
  • Inline:Inline elements are those elements which only take desired space.
  • Block:Block elements are those which occupy entire width of screen.

Example of inline elements in CSS:

1.<span>
2.<a>
3.<img>
3<strong>
4.<sup>

Examples of block elements in CSS

1.<div>
2.<h1>
3.<section>
4.<footer>

Hiding an element in CSS

Using CSS many HTML elements can also be hidded to make web pages look more attractive when viewed from different devices.Like in our desktop site there is navigation bar on left handside but it is absent on smartphone version.

    Syntax:

  • visibility:hidden;

Controlling display of certain element in CSS

Using CSS one can controll appearance of web pages on different devices.There are many websites which look completely different in desktop and smartphone versions.

    Syntax:

  • display:none;

Max-width property in CSS

To hide an element one must mention the screen size for which described element will appear and for which it will be hidden.

    Syntax:

  • max-width:value;

Inline display in CSS

Inline property is mainly used to make navigation menu.We will be describing this in depth in our next chapters.
<!DOCTYPE html>
<html>
<head>
<style>
p.hiden{
visibility: hidden;
}
@media screen and (max-width:680px){
p.disp{display:none;}
}
ul.men li{
display: inline;
text-decoration: none;
color:red;
}
</style>
<title>
CSS DISPLAY
</title>
</head>
<body>
<p class="hiden">This paragraph will be hidden.</p>
<p class="disp">This paragraph will be displayed.</p>
<ul class="men">
<li>HOME</li>
<li>NEWS</li>
</ul>
</body>
</html>

Output:

  • Here p element with class hiden is hidden but it occupies space.
  • Here p element with class disp is not displayed in small screens but it is visible in desktop screen.To achieve this we have used @ media screen and (max-width:680px) which describes what to do when condition satisfies.This element not even occupies space in small screens.
  • Here ul element is displayed in single line.

This paragraph will be hidden.

This paragraph will be displayed.

  • Home
  • NEWS