Category: CSS

Hover Effects

CSS hover effects are used to make interactive elements such as buttons and links more interactive. The :hover pseudo-class in CSS is used to target an element when the user hovers over it with the mouse cursor. Its purpose is to apply styles to improve the user experience.

The :hover property can be used in various scenarios such as to change the button color when we hover it, adjust the size of div boxes, or show the hidden content.

Hover over me!

What is Hover Pseudo-Class?

In CSS, the pseudo-class :hover is a type of selector used to target and style an element when a user moves the mouse pointer over the element.
Hover effects are mostly used with interactive elements like buttons, links, etc to provide the user with a dynamic experience.
Hover effects are useful to add a dynamic and engaging look to a website.

Background Change on Hover CSS

You can use the :hover property to change the background of any element by hovering over it.

Example

In this example, we have used the background-color property with :hover pseudo class to change the background color of the div container when hovered over it.

<!DOCTYPE html><html><head><style>
    .main{
        display: flex;
        justify-content: space-around;
    }
    .container{
        width: 40%; 
        height: 100px; 
        background-color: #D5E8D4; 
        border: 2px solid black; 
        padding: 10px;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .container:hover{
        background-color: #33FF33;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;CSS :hover pseudo class&lt;/h2&gt;&lt;div class="main"&gt;&lt;div class="container"&gt; Hover over me! &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Display Hidden Text with CSS hover



To display any hidden text or content with CSS, you can use the :hover pseudo-class. Here is an example to display the hidden text on hover.



Example



In this example, we have used the opacity property with the :hover pseudo-class to display the hidden text upon hovering over the div element.



<!DOCTYPE html><html><head><style>
    .container {
        width: 200px;
        height: 30px;
        padding: 10px 20px;
        margin: 10px;
        font-size: 16px;
        font-weight: bold;
        border: 2px solid #04af2f;
        border-radius: 10px;
        text-align: center;
        line-height: 30px;            
    }
    .hide {
        opacity: 0;   
        transition: opacity 0.3s;         
    }
    .container:hover .hide {
        opacity: 1;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;CSS :hover pseudo-class&lt;/h2&gt;&lt;p&gt;&lt;strong&gt;Hover over the box below to reveal the hidden message inside.&lt;/strong&gt;&lt;/p&gt;&lt;div class="container"&gt;&lt;div class="hide"&gt;April Fool :)&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Button Scale Effect on Hover



You can style a button by hovering over it to make the web page more interactive. You can add transformation properties, transition, animation, and many more to a button while hovering over it.



Example



In this example, we have used the text-transform property to the button that scales the size of the button using the scale() function on hovering over it.



<!DOCTYPE html><html><head><style>
    button {
        padding: 10px 20px;
        margin: 10px;
        background-color: #ffffff;
        color: #228B22;
        border: 2px solid #228B22;
        border-radius: 5px;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        transition: transform 0.3s;
    }
    button:hover {
        transform: scale(1.2);
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;CSS :hover pseudo class&lt;/h2&gt;&lt;button&gt;Hover over me!&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border with Hover Effect



To set a border with the hover effect, we use the border property with :hover property. You can set the border properties such as color, width, style, and radius of the border.



Example



In this example, we have added a border to the div element when we hover the div element.



<!DOCTYPE html><html><head><style>
    div {
        width: fit-content;
        padding: 10px 20px;
        margin: 10px;
        font-size: 16px;
        font-weight: bold;
        transition: border 0.1s, border-radius 0.1s;
    }
    div:hover {
        border: 2px solid #228B22;
        border-radius: 10px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;CSS :hover pseudo class&lt;/h2&gt;&lt;div&gt; Hover me!!! &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS hover Effect with Box Shadow



You can add shadow to any HTML element when hovering over that element. Here is an example of adding a shadow to the div element.



Example



The following example uses the box-shadow property with :hover property to add a shadow to the div box when we hover over it.



<!DOCTYPE html><html><head><style>
    div {
        width: fit-content;
        padding: 10px 20px;
        margin: 10px;
        font-size: 16px;
        font-weight: bold;
        transition: box-shadow 0.1s;
        border: 2px solid #228B22;
        border-radius: 10px;
    }
    div:hover {
        box-shadow: 20px 20px 10px grey;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;CSS :hover pseudo class&lt;/h2&gt;&lt;div&gt; Hover me!!! &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Glow Effect on Hover



You can add glowing effects to HTML elements using CSS properties such as linear-gradient, background-color, animation, and many more. Here is an example of how you can add the glowing effect to a button.



Example



In this example, we have used the linear-gradient function with :hover property to add a glowing effect to the button when we hover over it.



<!DOCTYPE html><html><head><style>
    body {
        height: 300px;
        overflow: hidden;
        display: grid;
        justify-content: center;
        align-items: center;
    }
    .glow {
        padding: 10px;
        width: 250px;
        height: 50px;
        border: none;
        outline: none;
        color: #fff;
        background: #111;
        cursor: pointer;
        position: relative;
        z-index: 0;
        border-radius: 20px;
    }
    .glow:before {
        content: '';
        background: linear-gradient(60deg, #ff0000, #ff7300, 
                            #fffb00, #48ff00, #00ffd5, #002bff, 
                            #7a00ff, #ff00c8, #ff0000);
        position: absolute;
        top: -4px;
        left:-4px;
        background-size: 400%;
        z-index: -1;
        filter: blur(15px);
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: 10px;
    }
    .glow:active {
        color: rgb(246, 235, 235)
    }
    .glow:active:after {
        background: transparent;
    }
    .glow:hover:before {
        opacity: 1;
    }
    .glow:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #111;
        left: 0;
        top: 0;
        border-radius: 10px;
    }
    @keyframes glowing {
        0% { 
            background-position: 0 0; 
        }
        50% { 
            background-position: 400% 0; 
        }
        100% { 
            background-position: 0 0; 
        }
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;button class="glow" type="button"&gt;
    HOVER OVER &amp; CLICK!
&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 19, 2025

hyphens Property

The hyphens Property

The CSS hyphens property controls how words are broken into lines when text is too long to fit on a single line. It improves the readability of text that wraps across multiple lines. The property only applies to block-level elements.

Syntax

The syntax for the hyphens property is as follows:

hyphens: none | manual | auto | initial | inherit;

Property Values

Value	Description
none	It disables the hyphenation.
manual	It is the default value that specifies manual hyphenation behavior for text at &hyphen or &shy.
auto	It allows hyphenation at appropriate hyphenation points, as determined by the browser.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Prevent Hyphenation with hyphens: none in CSS

To prevent the hyphenation of words, we use the none value. The words will not be broken into lines, even if they are too long to fit on a single line.

Example

In this example, we have used hyphens: none; to prevent automatic hyphenation of words.

<!DOCTYPE html><html><head><style>
  .container {
     border: 2px solid #12782f;
     background-color: coral;
     width: 70px;
     padding: 10px;
  }
  .hyphenated-none {
     hyphens: none;
  }   </style></head><body><h2>
  CSS hyphens property   </h2><h4>
  hyphens: none   </h4><div class="container"><p class="hyphenated-none">
     This is a muchmuchmuch larger building.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Manual Hyphenation with hyphens: manual in CSS



To allow hyphenation only at points where we have explicitly inserted hyphens using &hyphen or &shy, we use the manual value. This is a default value.



Example



In this example, we have used the hyphens: manual, to allow hyphenation only where we have manually inserted using soft hyphens ().



<!DOCTYPE html><html><head><style>
  .container {
     border: 2px solid #12782f;
     background-color: coral;
     width: 70px;
     padding: 10px;
  }
  .hyphenated-none {
     hyphens: manual;
  }   </style></head><body><h2>
  CSS hyphens property   </h2><h4>
  hyphens: manual   </h4><div class="container"><p class="hyphenated-none">
     This is a muchmuchmuch larger building.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Automatic Hyphenation with hyphens:auto in CSS



To let the browser automatically hyphenate words at points that are considered to be appropriate, according to the language's hyphenation rules, we use the auto value.



Example



Here is an example using hyphens: auto value.



<!DOCTYPE html><html><head><style>
  .container {
     border: 2px solid #12782f;
     background-color: coral;
     width: 70px;
     padding: 10px;
  }
  .hyphenated-none {
     hyphens: auto;
  }   </style></head><body><h2>
  CSS hyphens property   </h2><h4>
  hyphens: auto   </h4><div class="container"><p class="hyphenated-none">
     This is a muchmuchmuch larger building.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 19, 2025

position Property

The position Property

CSS position property specifies the position of an element in a web page. CSS properties such as top, bottom, right, and left are used to control the exact position of an element in the web page.

The position property can be used to create floating elements, a floating sidebar, and other interactive features.

Syntax

The syntax for the CSS position property is as follows:

position: static | relative | absolute | fixed | sticky;

Possible Values

Value	Description
static	It is the default value where the element is positioned according to the normal flow of the page. So, if we set left/right/top/bottom/z-index, then there will be no effect on that element.
relative	The element’s original position is according to the normal flow of the page just like static value. But now the left/right/top/bottom/z-index will work.
absolute	The element is completely removed from the document flow. It is then positioned with respect to its nearest positioned ancestor element. The positioned element should be any value except static.
fixed	The element’s fixed positioning is just like absolute positioning, except the containing block of a fixed element is always the viewport. Here the element is totally removed from the document’s flow and does not have a position relative to any part of the document.
sticky	The element sticks to the top of its nearest positioned ancestor that has a “scrolling mechanism”. It behaves as relative till it reaches the scrolling position, then behaves as fixed.

Applies To

The position property can be applied to all elements.

CSS position Property with static Value

The position property for the div element in this example is set to static. The left, right, top, and bottom properties will have no effect on the div element.

Example

The following example sets the position property of the div element to static.

<html><head><style>
   .container {
  display: inline-block;
  background-color: #f2c3ee;
  border: 1px solid #000000;
  padding: 10px;
  margin-bottom: 20px;
  width: 300px;
  height: 100px;   }
   .box {
  display: inline-block;
  position: static;
  background-color: #bbedbb;
  border: 1px solid #000000;
  padding: 10px;
  width: 300px;
  height: 100px;   }
</style></head><body><div class="container"><h2>Normal Box</h2><p>This is a normal box.</p></div><div class="box"><h2>Position: static</h2><p>This is a box with static position.</p></div></body></html>

CSS position Property with relative Value

The following example sets the position property of the div element to relative. This allows you to set the top, bottom, left, and right positioning of the div element.

Example

In this example, we have used position: relative; to set the positioning of the child element to relative.

<html ><head><style>
   .container {
  background-color: #f2c3ee;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
  width: 350px;
  height: 300px;   }
   .box {
  background-color: #bbedbb;
  border: 1px solid #333;
  padding: 10px;
  position: relative;
  width: 300px;
  height: 100px;
  left: 20px;
  top: 20px;   }
</style></head><body><div class="container"><h2>Normal Box</h2><p>This is a Normal box.</p><div class="box"><h2>Position: Absolute</h2><p>This is a box with absolute position.</p></div></div></body></html>

CSS position Property with absolute Value

You can use absolute value to set the position of an element relative to its nearest ancestor element.

Example

In this example, we have used position: absolute; to position the child element relative to its nearest positioned container.

<html ><head><style>
   .container {
  background-color: #f2c3ee;
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
  width: 350px;
  height: 100px;   }
   .box {
  background-color: #bbedbb;
  border: 1px solid #333;
  padding: 10px;
  position: relative;
  width: 300px;
  height: 100px;
  left: 20px;
  bottom: 20px;   }
</style></head><body><div class="container"><h2>Normal Box</h2><p>This is a Normal box.</p><div class="box"><h2>Position: Absolute</h2><p>This is a box with absolute position.</p></div></div></body></html>

CSS position Property with fixed Value

To make an element stay in the same place on the screen even when the user scrolls, you can set the position property to fixed. You can then use the left, right, top, and bottom properties to position the element where you want it.

Example

In this example, we have used position: fixed; to create a fixed position of paragraph on the div.

<html><head><style>
   .container {
  width: 400px;
  height: 200px;
  background-color: #f2c3ee;
  overflow: auto;
  padding: 5px;   }
   .box {
  position: fixed;
  top: 15px;
  left: 60px;
  padding: 5px;
  background-color: #bbedbb;
  text-align: center;   }
</style></head><body><div class="container"><p>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.</p><p class="box">Tutorials point CSS Position Fixed</p><p>CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.</p></div></body></html>

CSS position Property with sticky Value

You can set the position property to sticky to create an element that sticks to the top of the viewport when the user scrolls through a page. It is a combination of the position: relative and position: fixed properties.

Example

In this example, we have applied position: sticky; on a paragraph element that scrolls until a specified position then sticks at one place.

<html><head><style>
   .container {
  width: 400px;
  height: 200px;
  background-color: #f2c3ee;
  overflow: auto;
  padding: 5px;   }
   .box {
  position: sticky;
  top: 15px;
  padding: 5px;
  background-color: #bbedbb;
  text-align: center;   }
</style></head><body><div class="container"><p>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.</p><p class="box">Tutorials point CSS Position Sticky</p><p>CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.</p><p>Each version of CSS builds upon the previous ones, adding new features and refining existing capabilities to meet the evolving needs of web developers and designers. CSS is referred as just CSS now, without a version number.</p></div></body></html>

Positioning Text In an Image Using CSS

To position the text in different directions, you can use the position: absolute property.

Example

In this example, we have used the absolute value to position the text elements in different directions on the image. The text elements are positioned at the center, top left, top right, bottom left, and bottom right corners.

<html><head><style>
   .container {
  position: relative;
  border: 2px solid #ef2c2c;   }
   .center {
  position: absolute;
  top: 45%;
  width: 100%;
  text-align: center;   }
   .top-left {
  position: absolute;
  top: 12px;
  left: 30px;   }
   .top-right {
  position: absolute;
  top: 12px;
  right: 30px;   }
   .bottom-left {
  position: absolute;
  bottom: 12px;
  left: 30px;   }
   .bottom-right {
  position: absolute;
  bottom: 12px;
  right: 30px;   }
   img {
  width: 100%;
  opacity: 0.3;   }
</style></head><body><div class="container"><img src="/css/images/pink-flower.jpg" alt="Pink flower" width="1000px" height="350px"><h3 class="center">Text at Centered</h3><h3 class="top-left">Text at Top Left</h3><h3 class="top-right">Text at Top Right</h3><h3 class="bottom-left">Text at Bottom Left</h3><h3 class="bottom-right">Text at Bottom Right</h3></div></body></html>

CSS Position – Related Properties

Following is the list of all the CSS properties related to the position:

Property	Description
bottom	Used with the position property to place the bottom edge of an element.
clip	Sets the clipping mask for an element.
left	Used with the position property to place the left edge of an element.
overflow	Determines how overflow content is rendered.
position	Sets the positioning model for an element.
right	Used with the position property to place the right edge of an element.
top	Sets the positioning model for an element.
vertical-align	Sets the vertical positioning of an element.
z-index	Sets the rendering layer for the current element.

August 19, 2025

order Property

CSS order property is used to specify the order in which flex items appear within a flex container. The order of the flex items is determined by the values of their order property. The flex items with the lower order value will be displayed first.

Syntax

order: number | initial | inherit;

Property Values

Value	Description
number	Order of flex items is specified using numeric values – positive or negative values. With positive values, the element with smaller positive value appears first. With negative values, the element with larger negative value appears first.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Order Property

The following examples explain the order property with different elements.

Order Property with Positive Numeric Values

The order of the flex-items can be set by specifying positive numeric values to the order property. With positive values, the element will smaller value appears first. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  .container {
     height: 150px;
     display: flex;
     gap: 4px;
  }
  .container&gt;div {
     padding: 10px;
     text-align: center;
     height: 70px;
     width: 70px;
  }
  .box1 {
     background-color: lightgreen;
     order: 2;
  }
  .box2 {
     background-color: lightblue;
     order: 4;
  }
  .box3 {
     background-color: lightcoral;
     order: 1;
  }
  .box4 {
     background-color: lightgray;
     order: 3;
  }   </style></head><body><h2>
  CSS order property   </h2><h4>
  order: 2-4-1-3 (first element- second position, 
  second element- fourth position, third element- 
  first position, fourth element- third position)   </h4><div class="container"><div class="box1">
     One
  &lt;/div&gt;&lt;div class="box2"&gt;
     Two
  &lt;/div&gt;&lt;div class="box3"&gt;
     Three
  &lt;/div&gt;&lt;div class="box4"&gt;
     Four
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Order Property with Negative Numeric Values



The order of the flex-items can be set by specifying negative numeric values to the order property. With negative values, the element will larger value appears first. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     height: 150px;
     display: flex;
     gap: 4px;
  }
  .container &gt; div {
     padding: 10px;
     text-align: center;
     height: 70px;
     width: 70px;
  }
  .box1 {
     background-color: lightgreen;
     order: -2;
  }
  .box2 {
     background-color: lightblue;
     order: -1;
  }
  .box3 {
     background-color: lightcoral;
     order: -3;
  }
  .box4 {
     background-color: lightgray;
     order: -4;
  }   </style></head><body><h2>
  CSS order property   </h2><h4>
  order: -2 / -1 / -3 / -4 (first element- third position, 
  second element- fourth position, third element- second 
  position, fourth element- first position)   </h4><div class="container"><div class="box1">
     One
  &lt;/div&gt;&lt;div class="box2"&gt;
     Two
  &lt;/div&gt;&lt;div class="box3"&gt;
     Three
  &lt;/div&gt;&lt;div class="box4"&gt;
     Four
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Order Property with Images



The order property can also be used with images as flex-items. The positions of the images depend on the values provided - positive or negative. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     height: 150px;
     display: flex;
     gap: 4px;
  }
  .container&gt;img {
     height: 100px;
     width: 100px;
  }
  .img1 {
     background-color: lightgreen;
     order: 4;
  }
  .img2 {
     background-color: lightblue;
     order: 2;
  }
  .img3 {
     background-color: lightcoral;
     order: 1;
  }
  .img4 {
     background-color: lightgray;
     order: 3;
  }   </style></head><body><h2>
  CSS order property   </h2><h4>
  order: 4-2-1-3 (first image- fourth position, 
  second image- second position, third image - 
  first position, fourth image - third position)   </h4><div class="container"><img src="/css/images/red-flower.jpg" 
  alt="flower" class="img1" /&gt;&lt;img src="/css/images/orange-flower.jpg" 
  alt="flower" class="img2" /&gt;&lt;img src="/css/images/white-flower.jpg" 
  alt="flower" class="img3" /&gt;&lt;img src="/css/images/pink-flower.jpg" 
  alt="flower" class="img4" /&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 19, 2025

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

Category: CSS

What is Hover Pseudo-Class?

Background Change on Hover CSS

Example

Display Hidden Text with CSS hover

Example

CSS Button Scale Effect on Hover

Example

CSS Border with Hover Effect

Example

CSS hover Effect with Box Shadow

Example

CSS Glow Effect on Hover

Example

The hyphens Property

Syntax

Property Values

Prevent Hyphenation with hyphens: none in CSS

Example

Manual Hyphenation with hyphens: manual in CSS

Example

Automatic Hyphenation with hyphens:auto in CSS

Example

The position Property

Syntax

Possible Values

Applies To

CSS position Property with static Value

Example

CSS position Property with relative Value

Example

CSS position Property with absolute Value

Example

CSS position Property with fixed Value

Example

CSS position Property with sticky Value

Example

Positioning Text In an Image Using CSS

Example

CSS Position – Related Properties

Syntax

Property Values

Examples of CSS Order Property

Order Property with Positive Numeric Values

Example

Order Property with Negative Numeric Values

Example

Order Property with Images

Example

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