CSS Properties: CSS Display and CSS Cursor

CSS Display

CSS Properties

The CSS display property controls the element's layout, which is the most crucial property. Simply put, it defines how the element is displayed. Every element has a base display value according to its qualities. The webpage has rectangular boxes, and this CSS property determines how those boxes behave.

CSS-Display Values

Below are CSS-display values that are commonly used.

  1. display: inline;
  2. display: inline-block;
  3. display: block;
  4. display: run-in;
  5. display: none;

CSS Display Inline

display inline elements only use the necessary width. The inline text does not break because it doesn't force a line break, so the text flow doesn't break.

The inline elements are:

  • <span>
  • <a>
  • <em>
  • <b> etc.

Below is an example of CSS inline.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
display: inline;   
}  
</style>  
</head>  
<body>  
<p>Hello Techstack</p>  
<p>CSS Tutorial.</p>  
<p> CSS Basics.</p>  
<p>CSS Properties.</p>  
<p>CSS display example.</p>  
</body>  
</html>  

Display Inline-block

A CSS display inline-block element differs from an inline element in that it can set its width and height.
<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
display: inline-block;   
}  
</style>  
</head>  
<body>  
<p>Hello Techstack</p>  
<p>CSS Techstack Tutorial.</p>  
<p>CSS Techstack Basics.</p>  
<p>CSS Techstack Properties.</p>  
<p>CSS Techstack display example.</p>  
</body>  
</html>  

CSS Block

CSS display blocks consume as much horizontal space as possible. This means that the block element takes up all of the available widths. A line break separates the lines between them.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
display: block;   
}  
</style>  
</head>  
<body>  
<p>Hello Techstack</p>  
<p>CSS Tutorial.</p>  
<p>CSS Basics.</p>  
<p>CSS properties.</p>  
<p>CSS display example.</p>  
</body>  
</html>  

CSS |Display Run-in

This element produces no specific box on its own. If a run-in box contains a block box, it will be the same as a block box, and if the block box follows the run-in box, the run-in box becomes the first inline box of the block box. Also, if the inline box follows the run-in box, the run-in box becomes a block box.

N.B; This isn't compatible with Mozilla Firefox yet

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
display: run-in;   
}  
</style>  
</head>  
<body>  
<p>Hello Techstack</p>  
<p>CSS Tutorial.</p>  
<p>CSS Basics.</p>  
<p>CSS Properties.</p>  
<p>CSS display example.</p>  
</body>  
</html>  

CSS Display None

The "none" value removes the element entirely from the page and does not take up space.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1.hidden {  
    display: none;  
}  
</style>  
</head>  
<body>  
<h1>Hey! A visible heading.</h1>  
<h1 class="hidden">Oh no! A not visible heading.</h1>  
<p>Notice the lack of space in the hidden heading.</p>  
</body>  
</html> 

CSS CURSOR

The CSS cursor defines the manner of the mouse cursor when the mouse pointer is on an element. It allows you to set the cursor type displayed to the user.
Observe the table below to understand the cursor's property values further.

ValuesUsage
aliasThis is used to display the gesture of the cursor of something to be created.
autoThis is the default property of the browser that sets the cursor.
all-scrollIndicates the scrolling.
cellThe cursor represents that a cell or the collection of cells is chosen.
context-menuIndicates the presence of the context menu.
defaultIndicates the arrow that is the default cursor.
copyUsed to indicate something is copied.
crosshairThe cursor switches to the crosshair or the plus sign.
e-resizeIndicates the edge of the box is to be moved right.
ew-resizeIt stands for the east/west direction and shows a two-way directional resize cursor.
n-resizeIt stands for the north direction, showing that the box's edge is to be moved up.
ne-resizeIt represents the north/east direction and shows that the edge of the box is to be moved up and right.
moveIt indicates that something is to be relocated
helpThis is the form of a question mark or ballon that represents available help.
NoneIndicates that no cursor is generated for the element
No-dropUsed to show that a dragged item cannot be dropped here.
s-resizeIndicates an edge box is to be shifted down.
Row-resizeIndicates that a row can be resized vertically.
Se-resizeRepresents the south/east direction, which reveals that an edge box should be shifted down and right.
Sw-resizeIt represents the south/west direction and indicates that an edge of the box should be moved down and left.
WaitAn hourglass.
<url>Indicates the origin of the cursor image file.
w-resizeIt indicates the west direction and shows that the edge of the box should be moved left.
Zoom-inIndicates that something can be zoomed in.
Zoom-outIndicates that something can be zoomed out.
<html>  
   <head>  
   </head>  
   <style>  
      body{  
         background-color: blue;  
         color: red;  
         text-align: center;  
         font-size: 20px;  
      }  
      
   </style>  
     
   <body>  
      <p>Moving your mouse over each sentences below words for the cursor change.</p>  
      <div style = "cursor:alias">Techstack alias Value</div>        
      <div style = "cursor:auto">Techstack  auto Value</div>  
      <div style = "cursor:all-scroll">Techstack  all-scroll value</div>  
      <div style = "cursor:col-resize">Techstack 
 col-resize value</div>  
      <div style = "cursor:crosshair">Techstack 
 Crosshair</div>  
      <div style = "cursor:default">Techstack 
 Default value</div>  
      <div style = "cursor:copy">Techstack 
 copy value</div>  
      <div style = "cursor:pointer">Techstack 
 Pointer</div>  
      <div style = "cursor:move">Techstack 
 Move</div>  
      <div style = "cursor:e-resize">Techstack 
 e-resize</div>  
      <div style = "cursor:ew-resize">Techstack 
 ew-resize</div>  
      <div style = "cursor:ne-resize">Techstack 
 ne-resize</div>  
      <div style = "cursor:nw-resize">Techstack 
 nw-resize</div>  
      <div style = "cursor:n-resize">Techstack 
 n-resize</div>  
      <div style = "cursor:se-resize">Techstack 
 se-resize</div>  
      <div style = "cursor:sw-resize">Techstack 
 sw-resize</div>  
      <div style = "cursor:s-resize">Techstack 
 s-resize</div>  
      <div style = "cursor:w-resize">Techstack 
 w-resize</div>  
      <div style = "cursor:text">Techstack 
 text</div>  
      <div style = "cursor:wait">Techstack 
 wait</div>  
      <div style = "cursor:help">Techstack 
 help</div>  
      <div style = "cursor:progress">Techstack 
 Progress</div>  
      <div style = "cursor:no-drop">Techstack 
 no-drop</div>  
      <div style = "cursor:not-allowed">Techstack 
 not-allowed</div>  
      <div style = "cursor:vertical-text">Techstack 
 vertical-text</div>  
      <div style = "cursor:zoom-in">Techstack 
 Zoom-in</div>  
      <div style = "cursor:zoom-out">Techstack 
 Zoom-out</div>  
   </body>  
</html>