CSS Display
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.
- display: inline;
- display: inline-block;
- display: block;
- display: run-in;
- 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.
| Values | Usage |
| alias | This is used to display the gesture of the cursor of something to be created. |
| auto | This is the default property of the browser that sets the cursor. |
| all-scroll | Indicates the scrolling. |
| cell | The cursor represents that a cell or the collection of cells is chosen. |
| context-menu | Indicates the presence of the context menu. |
| default | Indicates the arrow that is the default cursor. |
| copy | Used to indicate something is copied. |
| crosshair | The cursor switches to the crosshair or the plus sign. |
| e-resize | Indicates the edge of the box is to be moved right. |
| ew-resize | It stands for the east/west direction and shows a two-way directional resize cursor. |
| n-resize | It stands for the north direction, showing that the box's edge is to be moved up. |
| ne-resize | It represents the north/east direction and shows that the edge of the box is to be moved up and right. |
| move | It indicates that something is to be relocated |
| help | This is the form of a question mark or ballon that represents available help. |
| None | Indicates that no cursor is generated for the element |
| No-drop | Used to show that a dragged item cannot be dropped here. |
| s-resize | Indicates an edge box is to be shifted down. |
| Row-resize | Indicates that a row can be resized vertically. |
| Se-resize | Represents the south/east direction, which reveals that an edge box should be shifted down and right. |
| Sw-resize | It represents the south/west direction and indicates that an edge of the box should be moved down and left. |
| Wait | An hourglass. |
| <url> | Indicates the origin of the cursor image file. |
| w-resize | It indicates the west direction and shows that the edge of the box should be moved left. |
| Zoom-in | Indicates that something can be zoomed in. |
| Zoom-out | Indicates 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> 
