Category: Basic

quotes

CSS quotes property allows browser to render quotation marks for the content.

Quotes can be added to any element. They seek the benefit of pseudo-elements ::before and ::after to insert the quotation marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property.

This CSS quotes specifies how the browser should render quotation marks that are added using the open-quote and close-quote values of the content property.

Possible Values

none − The open-quote and close-quote values of the content property produce no quotation marks.
string,string,+ − One or more pairs of string values for open-quote and close-quote. The first pair represents the outer level of quotation. The second pair is for the first nested level and next pair for third level and so on.
initial − Depends on user agent
auto − Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).

Applies to

All elements.

Syntax

Keyword Value

quotes: none;
quotes: auto;

<string> Value

   quotes: "" ""; 
   quotes: "" "" "" "";

Following table describes the various quotation mark characters:

Quotes	Description	Entity Number
“	double quotes	\0022
‘	single quote	\0027
<	single, left angle quote	\2039
>	single, right angle quote	\203A
<<	double, left angle quote	\00AB
>>	double, right angle quote	\00BB
>>	double, right angle quote	\00BB
	left quote (single high-6)	\2018
	right quote (single high-9)	\2019
	left quote (double high-6)	\201C
	right quote (double high-9)	\201D
	double quote (double low-9)	\201E

CSS quotes – none Value

The none value for the quotes property indicates that open-quote and close-quote values of the content property produce no quotation marks. Following example demonstartes this:

<html><head><style>
   p {
  quotes: none;   }
   p:before {
  content: open-quote;   }
   p:after {
  content: close-quote;   }
</style></head><body><p>Tutorialspoint CSS Quotes set to &lti&gtnone&lt/i&gt</p></body></html>

CSS quotes – <string> Value

Following example demonstartes specifies which quotation marks to use when string,string,+ value is used.

The first value specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, and so on

<html><head><style>
   #quote1 {
  quotes: '' '';   }
   #quote2 {
  quotes: '"' '"';   }
   #quote3 {
  quotes: '&lt;' '&gt;';   }
   #quote4 {
  quotes: '&lt;&lt;' '&gt;&gt;';   }
   #quote5 {
  quotes: "&lt;&lt;" "&gt;&gt;" "&lt;" "&gt;";   }
   #quote6 {
  quotes: '\2018' '\2019';   }
   #quote7 {
  quotes: '\'' 00AB' ' \00BB';   }
   #quote8 {
  quotes: '\2039' '\203A';   }
   #quote9 {
  quotes: '\00AB' '\00BB';   }
   #quote10 {
  quotes: '\201D' '\201E';   }
</style></head><body><h3>Using quotes symbol:</h3><p><q id="quote1">Tutorialspoint CSS Quotes.</q></p><p><q id="quote2">Tutorialspoint CSS Quotes</q>.</q></p><p><q id="quote1">Tutorialspoint CSS <q id="quote2">Quotes</q>.</q></p><p>Tutorialspoint CSS <q id="quote3">Quotes</q>.</p><p><q id="quote4">Tutorialspoint CSS Quotes</q>.</q></p><p><q id="quote5">Tutorialspoint CSS<q id="quote5">Quotes</q>.</q></p><h3>Using entity number:</h3><p><q id="quote6">Tutorialspoint CSS Quotes.</q></p><p><q id="quote6">Tutorialspoint CSS<q id="quote6">Quotes</q>.</q></p><p><q id="quote7">Tutorialspoint CSS Quotes.</q></p><p>Tutorialspoint CSS <q id="quote8">Quotes</q>.</p><p><q id="quote9">Tutorialspoint CSS <q id="quote9">Quotes</q>.</q></p><p><q id="quot10">Tutorialspoint CSS Quotes.</q></p></body></html>

CSS quotes – initial Value

Followig example demonstrates use of the quotes: initial; property value. This values sets default values to quotes.

<html><head><style>
   q {
  quotes: initial;   }
</style></head><body><p><q>Tutorialspoint CSS Quotes.</q></p></body></html>

CSS quotes – auto Value

Sets the quotes property to the value auto that automatically determines the correct quotation marks based on the language – as demonstrated in the following example:

<html><head><style>
   q {
  quotes: auto;   }
</style></head><body><div lang="fr"><q>Tutorialpoint est un site de cours d'anglais.</q></div><hr /><div lang="ru"><q>Tutorialpoint     .</q></div><hr /><div lang="de"><q>Tutorialpoint is een Engelse cursuswebsite</q></div><hr /><div lang="en"><q>Tutorialpoint is an english course website.</q></div></body></html>

CSS quotes – Using :lang pseudo-class

You can also use the :lang pseudo-class to define different styles for quotation marks based on the language attribute (lang) within the elements.

The :lang(en) rule defines styles for elements with the English language attribute.
The :lang(fr) rule defines styles for elements with the French language attribute.

Let us see an example −

<html><head><style>
   :lang(en) {
 quotes: "#" "#" "&lt;&lt;" "&gt;&gt;";   }
   :lang(fr) {
 quotes: '\2039' '\203A';   }
</style></head><body><p><q lang="en">Tutorialspoint CSS <q lang="en">Quotes</q>.</q></p><p>Tutorialspoint CSS <q lang="fr">Quotes</q>.</p></body></html>

August 19, 2025

Resize

CSS resize is a property that allows users to adjust the size of an element, either vertically, horizontally, both, or none, based on the specified value.

Resize property adds a handle at the bottom-right corner of an element on a webpage. This handle allows users to click and drag to change the size of an elements, making it larger or smaller according to their preference.

This chapter will cover the use of resize property.

Possible Values

none − No user-controllable method for resizing an element is possible. This is default value.
vertical − User can resize an element in the vertical direction.
horizontal − User can resize an element in the horizontal direction.
both − User can resize an element both horizontally and vertically.
block − User can resize an element in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).
inline − User can resize an element in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).

The properties block and inline are supported only on Firefox and Safari browsers.

Applies to

Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes

Syntax

resize: none | vertical | horizontal| both;

CSS resize – none Value

Following example demonstrates use of CSS resize property set to none value. Here we see user is prevented from resizing the element in any direction. The resize: none is a default value.

<html><head><style>
   textarea {
  background-color: #e7ef0e;
  color: #ee2610;
  resize: none;
  overflow: auto;
  height: 150px;
  width: 250px;   }
</style></head><body><textarea>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</textarea></body></html>

CSS resize – vertical Value

Following example demonstrates use of CSS resize property set to vertical. Here we see user is allowed to resize the height of the <div> element vertically by dragging the bottom-right corner.

<html><head><style>
   div {
  background-color: #e7ef0e;
  color: #ee2610;
  resize: vertical;
  overflow: auto;
  height: 150px;
  width: 250px;   }
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element vertically.</h3><div><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
   There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
   some form, by injected humour, or randomised words which don't look even slightly believable. If you are
   going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
   </div></body></html>

CSS resize – horizontal Value

Following example demonstrates use of CSS resize property set to horizontal. Here we see user is allowed to modify the width of a <div> element horizontally by dragging the bottom-right corner.

<html><head><style>
   div {
  background-color: #e7ef0e;
  color: #ee2610;
  resize: horizontal;
  overflow: auto;
  height: 150px;
  width: 250px;   }
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element horizontally.</h3><div><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
  There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
  some form, by injected humour, or randomised words which don't look even slightly believable. If you are
  going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
  middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the internet.
   </div></body></html>

CSS resize – both Value

Following example demonstrates use of CSS resize property set to both. Here we see user is allowed to resize the element both horizontally and vertically.

<html><head><style>
   div {
  background-color: #e7ef0e;
  color: #ee2610;
  resize: both;
  overflow: auto;
  height: 150px;
  width: 250px;   }
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element vertically and horizontally.</h3><div><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
  There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
  some form, by injected humour, or randomised words which don't look even slightly believable. If you are
  going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
  middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
   </div></body><html>

CSS resize – inherit Value

Following example demonstrates use of CSS resize property set to inherit on a child element. Here we see it will have the same resizing behavior as its parent element.

<html><head><style>
   .my-box1 {
  background-color: #e7ef0e;
  color: #ee2610;
  resize: vertical;
  overflow: auto;
  height: 150px;
  width: 250px;   }
   .my-box2 {
  resize: inherit;   }
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element.</h3><div class="my-box1"><div class="my-box2"><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
     There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS resize - Arbitrary Elements



It is possible to create a resizable <div> container with a resizable <p> (paragraph) element inside it, where user can click and drag the bottom-right corner to change the size of both the container and the paragraph. Following example demonstartes this behavior.



<html><head><style>
   .my-box {
  background-color: #e7ef0e;
  color: #ee2610;
  resize: both;
  overflow: scroll;
  border: 2px solid black;   }
   div {
  height: 250px;
  width: 250px;   }
   p {
  height: 150px;
  width: 150px;   }
</style></head><body><h3>Click and drag the bottom-right corner to change the size of an element.</h3><div class="my-box"><h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2><p class="my-box"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you ar going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p></div></body></html>

August 19, 2025

Arrows

CSS arrows are graphical symbols created using CSS properties, used to point the viewers attention in a specific direction. Arrows in CSS created using techniques like borders, clip paths, or icons. In this tutorial we will explore all the ways to create and style arrows in CSS.

How to Create Arrows in CSS?
CSS Arrow Using Border
CSS Arrows Using Icons

Arrows Using Clip Path Property
CSS Arrows Styling
CSS Tooltip Arrow

How to Create Arrows in CSS?

Arrows can be created using CSS properties as listed below:

Using CSS Border: You can create an arrow in CSS by defining a square element and setting two of it’s adjacent borders as transparent and other two borders visible.
Using Icons: You can use predefined arrow icons defined in libraries like Font Awesome, Material Icons, and Google Icons. They often come with ready-to-use classes or utility classes.
Using Clip Path: The clip-path property in CSS is used to define polygon of any shape, with this you can also define arrows of any shape.
Using Unicode Characters: For creating simple arrows, you can specify unicode characters inside containers like div, For example the code ‘&#9654;’ will make a right-pointing arrow.

CSS Arrow Using Border

The borders is the most common way to create arrows. With borders we can create two types of arrows,

For solid arrow, Set height and width of container element to zero. Then pick any border (for example, border-bottom) set a solid color and thickness as per size of arrow. Now give same thickness and but a transparent color to two adjacent borders of it ( In this case border-left and border-right). This will create a arrow pointing upwards.
For line arrow, Set a height and width for element depending upon size of arrow needed. Now set thickness and color for any two adjacent borders (for example border-left and border-top). Rotate element to required direction using transform property.

Example

<!DOCTYPE html><html><head><style>
    .arrow-up {
        width: 0; 
        height: 0; 
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid black;
    }
    .arrow-down{
        width: 10px;
        height: 10px;
        border-left: 2px solid;
        border-top: 2px solid;
        transform: rotate(225deg) skew(10deg, 10deg);
    }
    
    .arrow-diagonal{
        width: 10px;
        height: 10px;
        border-left: 2px solid;
        border-top: 2px solid;
        transform: rotate(90deg) skew(10deg, 10deg);
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h3&gt;Arrow Type 1&lt;/h3&gt;&lt;div class="arrow-up"&gt;&lt;/div&gt;&lt;h3&gt;Arrow Type 2&lt;/h3&gt;&lt;div class="arrow-down"&gt;&lt;/div&gt;&lt;h3&gt;Arrow Rotated&lt;/h3&gt;&lt;div class="arrow-diagonal"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Arrows Using Icons



We can also create arrows using predefined icon libraries like Font Awesome, Material Icons, and Google Icons. Following example uses google icons to display arrows.



Example



<!DOCTYPE html><html><head><link rel="stylesheet" 
     href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt; Google Fonts Icon &lt;/h1&gt;&lt;span class="material-icons" style="font-size:40px;"&gt;
    arrow_forward
&lt;/span&gt;&lt;span class="material-icons" style="font-size:40px;"&gt;
    arrow_backward
&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Arrows Using Clip Path Property



We can create arrows of any shape using clip-path property in CSS.



clip-path:polygon(x1 y1, x2 y2, x3 y3, ...);




x1 y1, x2 y2, ... are pairs of coordinates that define the vertices of the polygon. The coordinates are given as percentages or absolute units (e.g., px).



The origin (0, 0) is the top-left corner of the element, and (100%, 100%) is the bottom-right corner.




Example



<!DOCTYPE html><html><head><style>
    .arrow-right {
        width: 0;
        height: 0;
        margin: 29px;
        border-style: solid;
        border-width: 10px 0 10px 20px;
        clip-path: polygon(100% 50%, 0 100%, 0 0);
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h3&gt; Arrow Using Clip Path &lt;/h3&gt;&lt;div class="arrow-right" &gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Arrows Styling



The following example shows how to style an arrow in css by setting properties like color, transform-rotate, shadow and animations.



Example



<!DOCTYPE html><html lang="en"><head><style>
    .arrow {
        width: 0;
        height: 0;
        margin: 20px;
    }
    .arrow-color {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid red;
    }
    .arrow-shadow {
        width: 20px;
        height: 20px;
        border-left: 2px solid;
        border-top: 2px solid;
        transform: rotate(135deg) skew(10deg, 10deg);
        box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.5);
    }
    .arrow-rotated {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid black;
        transform: rotate(45deg);
    }
    .arrow-animate {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid aqua;
        transition: transform 0.3s ease-in-out;
    }
    .arrow-animate:hover {
        transform: translateY(-10px);
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h3&gt;Colored Arrow&lt;/h3&gt;&lt;div class="arrow arrow-color"&gt;&lt;/div&gt;&lt;h3&gt; Arrow with shadow &lt;/h3&gt;&lt;div class="arrow arrow-shadow"&gt;&lt;/div&gt;&lt;h3&gt; Rotated arrow &lt;/h3&gt;&lt;div class="arrow arrow-rotated"&gt;&lt;/div&gt;&lt;h3&gt; Animated arrow &lt;/h3&gt;&lt;div class="arrow arrow-animate"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Tooltip Arrow



We can create a tooltip with an upward-pointing triangular arrow using CSS borders and transform property. We have used hover pseudo-class to make tooltip visible when user hovered over content.



Example



<!DOCTYPE html><html><head><style>
    .tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    .tooltipContent {
        display: none;
        position: absolute;
        background-color: grey;
        color: #fff;
        padding: 8px;
        border-radius: 4px;
        z-index: 1;
        font-size: 14px;
        white-space: nowrap;
    }
    .tooltip:hover .tooltipContent {
        display: block;
    }
    .tooltipContent::before {
        content: "";
        position: absolute;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent grey transparent;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h3 class="tooltip"&gt;
    Hover Me!!!
    &lt;span class="tooltipContent"&gt;CSS - Arrow&lt;/span&gt;&lt;/h3&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 19, 2025

float Property

The float Property

CSS float property controls the positioning and formatting of content on the page. It positions an element either on the right or left side of the container, letting text and other inline elements wrap around it. Absolutely positioned elements are not affected by this property.

Syntax

The syntax for the CSS float property is as follows:

float: none | left | right | initial | inherit;

Property Values

Value	Description
none	It is the default value. The element does not float.
left	The element floats to the left of its container.
right	The element floats to the right of its container.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

CSS float Property with none Value

To prevent the positioning of an element to the left or right of the container, we use the none value. The none value ensures that the element is not floated and remains in the normal document flow. This is shown in the following example.

Example

In this example, we have used the none value to disable the float property on the img tag.

<!DOCTYPE html><html><head><style>
  .float-container {
     background-color: lightgreen;
     padding: 20px;
  }
  .float-container img {
     float: none;
  }   </style></head><body><h2>
  CSS float property   </h2><h4>
  float: none   </h4><div class="float-container"><img src="/css/images/tutimg.png" 
  alt="tutorials" height=150 width=150/&gt;&lt;p&gt;
     TutorialsPoint is a comprehensive online learning 
     platform offering tutorials on a wide range of topics,
     including programming, web development, and digital
     marketing. It provides structured courses with 
     easy-to-understand explanations, practical examples,
     and interactive exercises. Designed for learners at
     various levels, TutorialsPoint supports self-paced
     learning through its extensive library of resources,
     including text-based tutorials and coding exercises.
     The platform aims to help users enhance their kills
     and knowledge in diverse fields through accessible
     and practical educational content.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS float Property with left Value



To position an element to the left of the container, we use the left value. The left value positions the element to the left with the surrounding elements wrapping around it, to prevent this wrapping we can use the clear property. This is shown in the following example.



Example



In this example, we have used the left value that floats the image in the left direction.



<!DOCTYPE html><html><head><style>
  .float-container {
     background-color: lightgreen;
     padding: 20px;
  }
  .float-container img {
     float: left;
  }   </style></head><body><h2>
  CSS float property   </h2><h4>
  float: left   </h4><div class="float-container"><img src="/css/images/tutimg.png" 
  alt="tutorials" height=150 width=150/&gt;&lt;p&gt;
     TutorialsPoint is a comprehensive online learning 
     platform offering tutorials on a wide range of topics,
     including programming, web development, and digital
     marketing. It provides structured courses with 
     easy-to-understand explanations, practical examples,
     and interactive exercises. Designed for learners at
     various levels, TutorialsPoint supports self-paced
     learning through its extensive library of resources,
     including text-based tutorials and coding exercises.
     The platform aims to help users enhance their kills
     and knowledge in diverse fields through accessible
     and practical educational content.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS float Property with right Value



To position an element to the left of the container, we use the right value. The right value positions the element to the right with the surrounding elements wrapping around it, to prevent this wrapping we can use the clear property. This is shown in the following example.



Example



In this example, we have used the right value that floats the image in the right direction.



<!DOCTYPE html><html><head><style>
  .float-container {
     background-color: lightgreen;
     padding: 20px;
  }
  .float-container img {
     float: right;
  }   </style></head><body><h2>
  CSS float property   </h2><h4>
  float: right   </h4><div class="float-container"><img src="/css/images/tutimg.png" 
  alt="tutorials" height=150 width=150/&gt;&lt;p&gt;
     TutorialsPoint is a comprehensive online learning 
     platform offering tutorials on a wide range of topics,
     including programming, web development, and digital
     marketing. It provides structured courses with 
     easy-to-understand explanations, practical examples,
     and interactive exercises. Designed for learners at
     various levels, TutorialsPoint supports self-paced
     learning through its extensive library of resources,
     including text-based tutorials and coding exercises.
     The platform aims to help users enhance their kills
     and knowledge in diverse fields through accessible
     and practical educational content.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using clear Property with float Property



The float property positions elements to the left or right, due to this the surrounding elements wrap around the elements. To prevent this wrapping, we can use the clear which makes them appear below the floated elements. This is shown in the following example.



Example



In this example, we have used values of the float property with the clear property.



<!DOCTYPE html><html><head><style>
  .float-container {
     background-color: lightgreen;
     padding: 20px;
  }
  .float-container1 img {
     float: left;
  }
  .float-container1 p {
     clear: left;
  }
  .float-container2 img {
     float: right;
  }
  .float-container2 p {
     clear: right;
  }
  .float-container3 #left {
     float: left;
  }
  .float-container3 #right {
     float: right;
  }
  .float-container3 p {
     clear: both;
  }   </style></head><body><h2>
  CSS float property   </h2><h4>
  float: left, clear: left   </h4><div class="float-container float-container1"><img src="/css/images/tutimg.png" 
  alt="tutorials" height=150 width=150 /&gt;&lt;p&gt;
     TutorialsPoint is a comprehensive online learning 
     platform offering tutorials on a wide range of topics,
     including programming, web development, and digital
     marketing. It provides structured courses with 
     easy-to-understand explanations, practical examples,
     and interactive exercises. Designed for learners at
     various levels, TutorialsPoint supports self-paced
     learning through its extensive library of resources,
     including text-based tutorials and coding exercises.
     The platform aims to help users enhance their kills
     and knowledge in diverse fields through accessible
     and practical educational content.
  &lt;/p&gt;&lt;/div&gt;&lt;h4&gt;
  float: right, clear: right   </h4><div class="float-container float-container2"><img src="/css/images/tutimg.png" 
  alt="tutorials" height=150 width=150 /&gt;&lt;p&gt;
     TutorialsPoint is a comprehensive online learning 
     platform offering tutorials on a wide range of topics,
     including programming, web development, and digital
     marketing. It provides structured courses with 
     easy-to-understand explanations, practical examples,
     and interactive exercises. Designed for learners at
     various levels, TutorialsPoint supports self-paced
     learning through its extensive library of resources,
     including text-based tutorials and coding exercises.
     The platform aims to help users enhance their kills
     and knowledge in diverse fields through accessible
     and practical educational content.
  &lt;/p&gt;&lt;/div&gt;&lt;h4&gt;
  float: left, right, clear: both   </h4><div class=" float-container float-container3"><img src="/css/images/tutimg.png" 
  alt="tutorials" height=150 width=150 id="left" /&gt;&lt;img src="/css/images/tutimg.png" 
  alt="tutorials" height=150 width=150 id="right" /&gt;&lt;p&gt;
     TutorialsPoint is a comprehensive online learning 
     platform offering tutorials on a wide range of topics,
     including programming, web development, and digital
     marketing. It provides structured courses with 
     easy-to-understand explanations, practical examples,
     and interactive exercises. Designed for learners at
     various levels, TutorialsPoint supports self-paced
     learning through its extensive library of resources,
     including text-based tutorials and coding exercises.
     The platform aims to help users enhance their kills
     and knowledge in diverse fields through accessible
     and practical educational content.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 19, 2025

Clearfix

Clearfix is a technique to ensure that a container properly encloses and contains floated elements ( such as images ) within it. It prevents layout issues by adding an empty element to the container, which clears both left and right floats.Toggle Clearfix

Float Left

Float Right

Following Content

How Clearfix Works?

To understand the working of clearfix, first you need to know about float property and floated elements. In CSS, floated elements are the elements that are removed from normal document flow and positioned left or right of their containing block. For example, sometimes an image element will be positioned right side in container element and texts will be wrapped around it.

Since the floated elements are removed from normal document flow, the parent container may collapse and not able to contain the floated child. Hence the clearfix technique is used to ensure that the parent element properly wraps around the floated elements. Here is the basic CSS code of clearfix:

.clearfix::after{content:"";display: table;clear: both;}

Above syntax is following the below mentioned rules.

content: “”This is used to generate a pseudo-element.
display: table This makes the pseudo-element a block element and ensures that it occupies the full width of the parent.
clear: both This clears the float from both sides (left and right).

Clearfix helps to prevent the problems like container collapse, uneven heights, overlapping content, inconsistent alignment.

Example of CSS Clearfix

The following HTML code shows how clearfix can be used to prevent collapsing of containers.

Example

<!DOCTYPE html><html><head><style>
    div {
        border: 3px solid;
        padding: 5px;
    }
    
    img {
        float: right;
        width: 150px;
    }
    
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Without Clearfix&lt;/h2&gt;&lt;div&gt;&lt;img src="/css/images/css.png"&gt;
    This image is floated to the right. As the image is 
    taller than the container, it overflows to outside.
&lt;/div&gt;&lt;h2 style="clear:right"&gt;With Clearfix&lt;/h2&gt;&lt;div class="clearfix"&gt;&lt;img src="/css/images/css.png" &gt;
    Here we added clearfix class to the containing element, 
    to fix this problem.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Clearfix With Overflow Property



We can also achieve similar functionality as clearfix, using overflow property in CSS. The overflow: auto; will make container stretch to fit all the inner elements.



This method is not recommended to use. The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars).



Example



<!DOCTYPE html><html><head><style>
    div {
        border: 3px solid;
        padding: 5px;
    }
    
    img {
        float: right;
        width: 150px;
        border: 1px solid;
    }
    
    .clearfix {
        overflow: auto;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Without Clearfix&lt;/h2&gt;&lt;div&gt;&lt;img src="/css/images/css.png"&gt;
    This image is floated to the right. As the image is 
    taller than the container, it overflows to outside.
&lt;/div&gt;&lt;h2 style="clear:right"&gt;With Clearfix&lt;/h2&gt;&lt;div class="clearfix"&gt;&lt;img src="/css/images/css.png" &gt;
    Here we added clearfix class to the containing element, 
    to fix this problem.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 19, 2025

overflow Property

The overflow Property

CSS overflow property specifies how to handle the content that overflows the boundaries of its container. It can be used to clip the content, add scrollbars, or display an ellipsis. The property only works for block-level elements with a specified height or width.

Syntax

The syntax for the CSS overflow property is as follows:

overflow: visible | hidden | clip | scroll | auto | initial | inherit;

Property Values

Value	Description
visible	The content is not clipped and will overflow the container.
hidden	The content is clipped and the overflow is not visible. There are no scroll bars, and the clipped content is not visible.
clip	The content is clipped when it proceeds outside its box.
scroll	A scrollbar is added to the container so that the user can scroll to see the overflowed content.
auto	A scrollbar is added to the container only when the content overflows.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

CSS overflow Property with visible Value

To display the content of an element beyond its size, if the content’s length is greater than the element’s size, we use the visible value. This is shown in the following example.

Example

In this example, we have used ‘overflow: visible;’ to display the content that does not fit in the container.

<!DOCTYPE html><html><head><style>
  p {
     height: 100px;
     width: 200px;
     background-color: lightgreen; 
     border: 2px solid #031926;
     overflow: visible;
  }   </style></head><body><h2>
  CSS overflow property   </h2><h4>
  overflow: visible   </h4><p>
  TutorialsPoint is an online learning platform 
  offering a wide range of tutorials, courses, 
  and resources in programming, web development, 
  data science, and more, catering to beginners 
  and advanced learners alike. 
   </p></body></html>

Hide Overflowing Content with overflow:hidden

To only show the content that fits the container, we use the hidden value with the overflow property. The layout of the page will still be affected as the value only hides the extra content but does not remove the space occupied by it. This is shown in the following example.

Example

In this example, we have used ‘overflow: hidden;’ to hide the content that does not fit in the container.

<!DOCTYPE html><html><head><style>
  p {
     height: 100px;
     width: 200px;
     background-color: lightgreen; 
     border: 2px solid #031926;
     overflow: hidden;
  }   </style></head><body><h2>
  CSS overflow property   </h2><h4>
  overflow: hidden   </h4><p>
  TutorialsPoint is an online learning platform 
  offering a wide range of tutorials, courses, and 
  resources in programming, web development, data 
  science, and more, catering to beginners and advanced 
  learners alike. 
   </p></body></html>

Clip Overflowing Content Using CSS overflow: clip

The clip value is similar to the hidden value as it also only shows the content that fits the container. The difference is that the layout of the page will not be affected as now you can not access the clipped portion. This is shown in the following example.

Example

In this example, we used ‘overflow: clip;’to clip the content that did not fit in the container.

<!DOCTYPE html><html><head><style>
  p {
     height: 100px;
     width: 200px;
     background-color: lightgreen; 
     border: 2px solid #031926;
     overflow: clip;
  }   </style></head><body><h2>
  CSS overflow property   </h2><h4>
  overflow: clip   </h4><p>
  TutorialsPoint is an online learning platform 
  offering a wide range of tutorials, courses, and 
  resources in programming, web development, data 
  science, and more, catering to beginners and advanced 
  learners alike. 
   </p></body></html>

Add Scrollbars Using CSS overflow: scroll

To see the overflowed content of the container, you can use the scrollbar using the scroll value of the overflow property. It is useful when you want to fit the content in the existing container and you don’t want to clip or hide the content. This is shown in the following example.

Example

In this example, we have used ‘overflow: scroll;’ to show the content that does not fit in the container with the help of a scrollbar.

<!DOCTYPE html><html><head><style>
  p {
     height: 100px;
     width: 200px;
     background-color: lightgreen; 
     border: 2px solid #031926;
     overflow: scroll;
  }   </style></head><body><h2>
  CSS overflow property   </h2><h4>
  overflow: scroll   </h4><p>
  TutorialsPoint is an online learning platform 
  offering a wide range of tutorials, courses, and 
  resources in programming, web development, data 
  science, and more, catering to beginners and advanced 
  learners alike. 
   </p></body></html>

CSS overflow Property with auto Value

To add scroll-bars to an element only if its content exceeds the element’s size, you can use the auto value. If the content fits well within the size of the element, no scroll bars will be added. This is shown in the following example.

Example

In this example, we have used ‘overflow: auto;’ to add scrollbars to the container only when the content overflows.

<!DOCTYPE html><html><head><style>
  p {
     height: 100px;
     width: 200px;
     background-color: lightgreen; 
     border: 2px solid #031926;
     overflow: auto;
  }   </style></head><body><h2>
  CSS overflow property   </h2><h4>
  overflow: auto   </h4><p>
  TutorialsPoint is an online learning platform 
  offering a wide range of tutorials, courses, and 
  resources in programming, web development, data 
  science, and more, catering to beginners and advanced 
  learners alike. 
   </p></body></html>

August 19, 2025

visibility Property

The visibility Property

CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space.

The visibility property can be used to create a variety of effects, such as hiding elements that are not yet ready to be displayed, or hiding elements that are only relevant to certain users.

Syntax

The syntax for the CSS visibility property is as follows:

visibility: visible | hidden | collapse | initial | inherit;

Possible Values

Value	Description
visible	It is the default value where the elements are visible.
hidden	It hides the element, but it still takes up space on the page.
collapse	It removes the table rows, columns, column groups, and row groups from a table. The collapse has the same meaning as hidden if it is used on non-table elements.
initial	It sets the visibility of an element to its default value.
inherit	It inherits the visibility property from its parent element.

Applies to

The visibility property can be applied to all the HTML elements.

CSS visibility – visible Value

You can use the visibility property with visible to make an element visible.

Example

The following example uses the visibility property to make the h2 element visible.

<html><head><style>
   h2 {
  visibility: visible;   }
</style></head><body><h2>Tutorials Point CSS visibility</h2></body></html>

Hide Elements with CSS visibility Property

To hide any HTML element, you can use the visibility property with the hidden value. It hides the element, but it does not remove it from the document layout. The element will still be accessible to screen readers and will affect the layout of the page, even though it is not visible.

Example

In this example, we have hidden the heading of the web page using ‘visibility: hidden;’.

<html><head><style>
   h2 {
  visibility: hidden;   }
</style></head><body><h2>Tutorials Point CSS visibility hidden</h2><p>The hidden heading is still visible to screen readers and takes up space in the page.</p></body></html>

Collapse Table Cells with CSS visibility

To remove a table row, column, or any cell without affecting the layout of the table, you can set the visibility property of the row, column, or cell to collapse. This value is only valid for table elements.

Example 1

In this example, we have used the ‘visibility: collapse;’ property to collapse the table cell. You can use it to hide any row or column.

<html><head><style>
   .collapse {
  visibility: collapse;   }
   table {
  border-collapse: collapse;
  color: #ffffff;
  width: 100%;
  background-color: #35DC5A;
  border: 2px solid black;   }
   th,
   td {
  border: 2px solid black;
  padding: 8px;
  text-align: left;
  font-size: 20px;   }
</style></head><body><table><tr><td>visible</td><td>hidden</td><td class="collapse">collapse</td></tr><tr><td>initial</td><td>inherit</td><td>revert</td></tr></table></body></html>

Example 2

In this example, we have used the ‘visibility: collapse;’ property on a non-table element. On a non-table element, it works as hidden value.

<html><head><style>
   .collapse {
  visibility: collapse;   }

</style></head><body><h2>Collapse on non-table elements</h2><p class="collapse">you cant see me</p><p>the above sentence is hidden</p></body></html>

August 19, 2025

Dropdowns

Dropdown is a user interface element that includes a list of options. It allows the user to choose one value from a list by hovering or clicking on a trigger element. It is typically used in navigation menus, forms, and other interactive components of a website.

Dropdown menu is created using HTML’s unordered list (<ul>) and list item (<li>) elements.

This chapter will cover the utilization of CSS for styling and arranging dropdown menu elements, controlling their appearance and behavior.

CSS Dropdown – Basic Example

Let us see a simple example of dropdowns with list of options. When you hover over the “Select an Option” text, a dropdown menu appears with options.

<html><head><style>
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-button {
    background-color: #e81a1a;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    color: #ffffff;
    margin: 0;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
</style></head><body><div class="dropdown"><span class="dropdown-button">Select an Option</span><div class="dropdown-menu"><p>Option 1</p><p>Option 2</p><p>Option 3</p></div></div></body></html>

In the above example:

Use any HTML element such as <span>, or a <button> to open the dropdown content.
To create the dropdown content or menu, use a container element (like >div<
Use CSS to wrap and position dropdown content correctly.
The .dropdown class uses position:relative. This property places dropdown menu right below the dropdown button (using position:absolute).
.dropdown-menu class holds the actual dropdown content. It is hidden by default, and will be displayed on hover.
CSS box-shadow property to make the dropdown menu look like a card.
The :hover selector shows the dropdown menu when the user moves the mouse over the dropdown button.

CSS Dropdown – Hoverable Effect

A hoverable dropdown is a user interface element where a dropdown menu appears when a user hovers their cursor over the trigger element. The dropdown menu usually disappears when the user moves their cursor away from the trigger element.

Let us see an example. This example uses anchor tags inside the dropdown box and style them to fit a styled dropdown button:

<html><head><style>
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-button {
    background-color: #e81a1a;
    padding: 15px;
    border: none;
    cursor: pointer;
    color: #ffffff;
    margin: 0;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
}
.dropdown-menu li {
    padding: 10px;
    background-color: #15AD39;
}
.dropdown-menu li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu li:hover {
    background-color: #82ea32;
}
</style></head><body><div class="dropdown"><button class="dropdown-button">Select an Option</button><ul class="dropdown-menu"><li><a href="#">Option 1</a></li><li><a href="#">Option 2</a></li><li><a href="#">Option 3</a></li></ul></div></body></html>

CSS Dropdown – Clicked Dropdowns

When you click on a dropdown, it expands to show the available options, and you can select one of these options by clicking on it.

Let us see an example:

<html><head><style>
.dropdown-button {
    background-color: #e81a1a;
    padding: 15px;
    border: none;
    cursor: pointer;
    color: #ffffff;
    margin: 0;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
}
.dropdown-menu li {
    padding: 10px;
    background-color: #15AD39;
}
.dropdown-menu li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
}
.dropdown-menu li:hover {
    background-color: #82ea32;
}
.show {
    display: block;
}</style></head><body><div class="dropdown"><button class="dropdown-button">Select an Option</button><ul class="dropdown-menu"><li><a href="#">Option 1</a></li><li><a href="#">Option 2</a></li><li><a href="#">Option 3</a></li></ul></div><script>
    document.addEventListener('DOMContentLoaded', function () {
        const button = document.querySelector('.dropdown-button');
        const dropdownContent = document.querySelector('.dropdown-menu');
        button.addEventListener('click', function () {
            dropdownContent.classList.toggle('show');
        });
        window.addEventListener('click', function (event) {
            if (!event.target.matches('.dropdown-button') &amp;&amp; dropdownContent.classList.contains('show')) {
                dropdownContent.classList.remove('show');
            }
        });
    });
&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Dropdown - Right-aligned Menu



You can place a dropdown menu on the right side of the screen by applying a float: right style to the <div> that contains the dropdown menu. This arrangement shifts the menu to the right-hand side of the screen.



Let us see an example:



<html><head><style>
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-button {
    background-color: #e81a1a;
    padding: 15px;
    border: none;
    cursor: pointer;
    color: #ffffff;
    margin: 0;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
    list-style: none;
}
.dropdown-menu li {
    padding: 10px;
    background-color: #15AD39;
}
.dropdown-menu li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu li:hover {
    background-color: #82ea32;
}
</style></head><body><div class="dropdown" style="float: right;"><button class="dropdown-button">Select an Option</button><ul class="dropdown-menu"><li><a href="#">Option 1</a></li><li><a href="#">Option 2</a></li><li><a href="#">Option 3</a></li></ul></div></body></html>



CSS Dropdown - Left-aligned Menu



You can achieve a left-aligned dropdown menu by adding the float: left style to the <div> containing the dropdown menu. This arrangement shifts the menu to the leftmost part of the screen.



Let us see an example:



<html><head><style>
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-button {
    background-color: #e81a1a;
    padding: 15px;
    border: none;
    cursor: pointer;
    color: #ffffff;
    margin: 0;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
    list-style: none;
}
.dropdown-menu li {
    padding: 10px;
    background-color: #15AD39;
}
.dropdown-menu li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu li:hover {
    background-color: #82ea32;
}
</style></head><body><div class="dropdown" style="float: left;"><button class="dropdown-button">Select an Option</button><ul class="dropdown-menu"><li><a href="#">Option 1</a></li><li><a href="#">Option 2</a></li><li><a href="#">Option 3</a></li></ul></div></body></html>



CSS Dropdown - With Image



You can enhance the dropdown by including images alongside the textual options. When you hover over an image, a larger size image appears along with a description.



Let us see an example:



<html><head><style>
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-img-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
}
.dropdown:hover .dropdown-img-menu {
    display: block;
}
.img-descripition {
    padding: 15px;
    background-color: rgb(38, 222, 53);
    text-align: center;
}
</style></head><body><div class="dropdown"><img src="images/red-flower.jpg" alt="Cinque Terre" width="200" height="100"><div class="dropdown-img-menu"><div class="img-descripition">Red color flower</div><img src="images/red-flower.jpg" alt="Cinque Terre" width="300" height="150"></div></div></body></html>



CSS Dropdown - With Navbar



A dropdown navbar is commonly found in website navigation menus. It consists of a horizontal bar that contains a list of links. When users hover over or click on a specific link, a dropdown menu appears, display additional navigation options or content related to the selected link.



Let us see an example:



<html><head><style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #208926;
}
li {
    float: left;
}
li a,
.dropdown-option {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover,
.dropdown:hover .dropdown-option {
    background-color: #f39a1d;
}
li.dropdown {
    display: inline-block;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #44e2d5;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 120px;
}
.dropdown-menu a {
    color: black;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-menu a:hover {
    background-color: #ee3131;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
</style></head><body><ul><li><a href="#">Tutorialspoints</a></li><li><a href="#">Home</a></li><li class="dropdown"><a href="#" class="dropdown-option">Articles</a><div class="dropdown-menu"><a href="#">HTML</a><a href="#">CSS</a><a href="#">Bootstrap</a></div></li></ul></body></html>

August 19, 2025

inline block

CSS display: inline-block

CSS inline-block is a value for the display property that allows elements to be formatted as block boxes that are laid out as inline boxes. Inline block elements start on the same line but take up multiple lines depending on the height and width of the element.

Display inline vs inline-block vs block Values

Here is an example differentiating inline, inline-block, and block:Display: Inline BlockDisplay: InlineDisplay: Block

This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.

Characteristics of the inline-block Display in CSS

Here are some of the key characteristics of the inline-block property:

The ‘display: inline-block’ property is a combination of the ‘display: inline’ and ‘display: block’ properties.
The element will be displayed on the same line as other inline elements.
If there’s not enough space on one line, the elements will wrap onto the next line, similar to words in a paragraph.
The element uses the width and height properties you set, unlike ‘display: inline;’, which ignores these properties.
The element can be floated or positioned.

Difference Between Inline, Block and Inline-block

The following table shows the difference between the ‘display: inline’, ‘display: block’, and ‘display: inline-block’ properties:

inline	block	inline-block
The element is displayed on the same line.	The element is displayed on a new line.	The element is displayed on the same line.
It does not take up the full width of the container.	It takes up the full width of the container.	It does not take up the full width of the container.
It does not have a margin or padding by default.	It has a margin and padding by default.	It has a margin and padding by default.

CSS inline and block Example

Here’s an example that demonstrates the different behaviors of the ‘display: inline’, ‘display: block’, and ‘display: inline-block’ properties.

Example

In this example, we have used an inline tag i.e. span tag to specify an inline element. Then we used inline, block, and inline-block values to see the difference between them.

<html><head><style>
    span{
        background-color: #1f9c3f;
        border: 2px solid #000000;
        color: #ffffff;
        padding: 5px;
        height: 30px;
        text-align: center;
    }
    .inline {
        display: inline;
    }
    .block {
        display: block;
    }
    .inline-block {
        display: inline-block;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Display Inline&lt;/h2&gt;&lt;div&gt;
    There are many variations of passages of Lorem Ipsum 
    available, &lt;span class="inline"&gt;TutorialsPoint
    &lt;/span&gt;, by injected humour, or randomized words 
    which don't look even slightly believable.
&lt;/div&gt;&lt;h2&gt;Display Block&lt;/h2&gt;&lt;div&gt;
    There are many variations of passages of Lorem Ipsum 
    available, &lt;span class="block"&gt;TutorialsPoint
    &lt;/span&gt; ,by injected humour, or randomized words 
    which don't look even slightly believable.
&lt;/div&gt;&lt;h2&gt;Display Inline Block&lt;/h2&gt;&lt;div&gt;
    There are many variations of passages of Lorem Ipsum 
    available, &lt;span class="inline-block"&gt;TutorialsPoint
    &lt;/span&gt; by injected humour, or randomized words 
    which don't look even slightly believable.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Navigation Links Using inline-block



To create a horizontal navigation menu or list, you can use the inline-block property value where each navigation item is displayed as a block-level element but remains inline with other items.



Example



In this example, we have used the inline-block property value to create a horizontal navigation bar with four links using an anchor tag.



<!DOCTYPE html><html lang="en"><head><style>
    .nav-item {
        display: inline-block;
        padding: 10px 20px;
        margin: 5px;
        background-color: rgba(3, 25, 38, 0.9);
        color: white;
        text-decoration: none;
        border-radius: 5px;
    }
    .nav-item:hover {
        background-color: rgba(3, 25, 38, 1);
        cursor: pointer;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;nav&gt;&lt;a class="nav-item"&gt;Home&lt;/a&gt;&lt;a class="nav-item"&gt;About&lt;/a&gt;&lt;a class="nav-item"&gt;Services&lt;/a&gt;&lt;a class="nav-item"&gt;Contact&lt;/a&gt;&lt;/nav&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 19, 2025

Scrollbars

Scrollbars are UI elements that allow users to navigate through long content that doesn’t fit entirely within the visible area.

They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.

It is important to test your scrollbar styling in different browsers and devices to make sure it works as expected.

How to Style Scrollbars?
Scrollbar Selectors
Create Custom Scrollbar

Styling Scrollbar
Realated CSS Scrollbar Properties

How to Style Scrollbars?

Create a container element, such as div, to hold the content and the scrollbar.
Set the height of the container element to a fixed value.
Add the overflow: auto property to the container element to enable the scrollbar.
Use the :-webkit-scrollbar pseudo-element to style the scrollbar.

div{width: 370px;height: 120px;overflow: auto;}div::-webkit-scrollbar{width: 15px;}

Customize the scrollbars using CSS properties ( width, height, background-color, border, border-radius ).

Scrollbar Selectors

For webkit browsers(Chrome, Safari, Edge), you can use following pseudo-elements to make changes to scrollbar.

::-webkit-scrollbar Selects the entire scrollbar to style it.
::-webkit-scrollbar-button Selects the buttons at the top and bottom of scrollbar.
::-webkit-scrollbar-thumb Selects the draggable scrolling thumb.
::-webkit-scrollbar-track Tracks background of the scrollbar.
::-webkit-scrollbar-track-piece Selects the intermediate part of the scrollbar track between the thumb’s top and bottom positions.
::-webkit-scrollbar-corner Selects the bottom corner of scrollbar where horizontal and vertical scrollbar meets.
::-webkit-resizer Selects tha draggable resizer at the bottom of scrollbar.

Create a Custom Scrollbar

The following example demonstrates how to create and style a basic scrollbar using the -webkit-scrollbar CSS pseudo-element.

Example

This example will only work properly on webkit browsers(Chrome, Safari, Edge).

<html><head><style>
   div {
  width: 100%;
  height: 120px;
  background-color: #F1EFB0;
  overflow: auto;    }
   div::-webkit-scrollbar {
  width: 35px;   }
   div::-webkit-scrollbar-track {
  background: yellow;    }
   div::-webkit-scrollbar-thumb {
  background: green; 
  border-radius: 10px;   }
   div::-webkit-scrollbar-thumb:hover {
  background: darkgreen;    }
</style></head><body><div><h3>
     Scrollbars using -webkit-scrollbar
  &lt;/h3&gt;
  This block includes a large amount of content 
  to demonstrate how scrollbars work when there 
  is an overflow within an element box. 
  They consist of vertical or horizontal bars 
  with a draggable thumb, enabling users to 
  move content up and down or left to right.
  &lt;br&gt;&lt;strong&gt;Changes Made:&lt;/strong&gt;&lt;br&gt;
  Changed Scrollbar Thumb Color
  &lt;br&gt;
  Changed Scrollbar background Color
  &lt;br&gt;
  Add Hover effect to thumb
   </div></body></html>

Styling a CSS Scrollbar

The following example demonstrates how to style scrollbars using the -webkit-scrollbar pseudo-element to customize their appearance by adding colors, width, border and border-radius −

Example

This example will only work properly on webkit browsers(Chrome, Safari, Edge).

<html><head><style>
   div {
  width: 370px;
  height: 120px;
  background-color: #F1EFB0;
  overflow: auto;    }
   div::-webkit-scrollbar {
  width: 15px;   }
   div::-webkit-scrollbar-track {
  background: #90e9e4;   }
   div::-webkit-scrollbar-thumb {
  background: #e77f7f;
  border-radius: 10px;
  border: 3px solid yellow;   }
   div::-webkit-scrollbar-thumb:hover {
  background: #da3e3e;    }
   .heading{
  color: #DC4299;
  text-align: center;   }
</style></head><body><div><h3 class="heading">
     Scrollbars using -webkit-scrollbar
  &lt;/h3&gt;
  This block includes a large amount of content 
  to demonstrate how scrollbars work when there 
  is an overflow within an element box. 
  They consist of vertical or horizontal bars
  with a draggable thumb, enabling users to 
  move content up and down or left to right.
   </div></body></html>

CSS Scrollbar Related Properties

Following is the list of CSS pseudo-elements related to scrollbar:

Property	Value	Example
-webkit-scrollbar	Selects the entire scrollbar to style it.	Try It
-webkit-scrollbar-button	Selects the buttons at the top and bottom of scrollbar.	Try It
-webkit-scrollbar-thumb	Selects the draggable scrolling thumb.	Try It
-webkit-scrollbar-track	Tracks background of the scrollbar.	Try It
-webkit-scrollbar-track-piece	Selects the intermediate part of the scrollbar track between the thumb’s top and bottom positions.	Try It
-webkit-scrollbar-corner	Selects the bottom corner of scrollbar where horizontal and vertical scrollbar meets.	Try It

August 19, 2025

Category: Basic

Possible Values

Applies to

Syntax

Keyword Value

<string> Value

CSS quotes – none Value

CSS quotes – <string> Value

CSS quotes – initial Value

CSS quotes – auto Value

CSS quotes – Using :lang pseudo-class

Applies to

Syntax

CSS resize – none Value

CSS resize – vertical Value

CSS resize – horizontal Value

CSS resize – both Value

CSS resize – inherit Value

CSS resize - Arbitrary Elements

Table of Contents

How to Create Arrows in CSS?

CSS Arrow Using Border

Example

CSS Arrows Using Icons

Example

Arrows Using Clip Path Property

Example

CSS Arrows Styling

Example

CSS Tooltip Arrow

Example

The float Property

Syntax

Property Values

CSS float Property with none Value

Example

CSS float Property with left Value

Example

CSS float Property with right Value

Example

Using clear Property with float Property

Example

How Clearfix Works?

Example of CSS Clearfix

Example

CSS Clearfix With Overflow Property

Example

The overflow Property

Syntax

Property Values

CSS overflow Property with visible Value

Example

Hide Overflowing Content with overflow:hidden

Example

Clip Overflowing Content Using CSS overflow: clip

Example

Add Scrollbars Using CSS overflow: scroll

Example

CSS overflow Property with auto Value

Example

The visibility Property

Syntax

Possible Values

Applies to

CSS visibility – visible Value

Example

Hide Elements with CSS visibility Property

Example

Collapse Table Cells with CSS visibility

Example 1

Example 2

CSS Dropdown – Basic Example

CSS Dropdown – Hoverable Effect

CSS Dropdown – Clicked Dropdowns

CSS Dropdown - Right-aligned Menu

CSS Dropdown - Left-aligned Menu

CSS Dropdown - With Image

CSS Dropdown - With Navbar

CSS display: inline-block

Display inline vs inline-block vs block Values