CSS – Max Inline Size

CSS – max-inline-size Property ”; Previous Next CSS max-inline-size property specifies the maximum horizontal or vertical size of an element”s block, determined by its writing mode and equivalent to either max-height and max-width based on the writing mode value. The max-inline-size property sets the maximum width for horizontal writing modes and the maximum height for vertical writing modes, respectively. A companion property, max-block-size defines the other dimension. Possible Values The max-inline-size property accepts the same values as max-height and max-width. Applies To Same as width and height. Syntax <length> Values max-inline-size: 300px; max-inline-size: 25em; <percentage> Values max-inline-size: 40%; Keyword Values max-inline-size: none; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content; max-inline-size: fit-content(20em); CSS max-inline-size – <length> Value The following example demonstrates the max-inline-size: 300px property sets the maximum width of the element to the 300px − <html> <head> <style> div { background-color: greenyellow; border: 3px solid red; max-inline-size: 300px; } </style> </head> <body> <div> <h2>Tutorialspoint</h2> <h4>CSS max-inline-size: 300px</h4> </div> </body> </html> CSS max-inline-size – <percentage> Value The following example demonstrates the max-inline-size: 80% property sets the maximum width of the element to the 80% − <html> <head> <style> div { background-color: greenyellow; border: 3px solid red; max-inline-size: 80%; } </style> </head> <body> <div> <h2>Tutorialspoint</h2> <h4>CSS max-inline-size: 80%</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </body> </html> CSS max-inline-size – <max-content> Value The following example demonstrates the max-inline-size: max-content property allowed the width of the div element to expand horizontally to fit the content − <html> <head> <style> div { background-color: greenyellow; border: 3px solid red; max-inline-size: max-content; } </style> </head> <body> <div> <h2>Tutorialspoint</h2> <h4>CSS max-inline-size: max-content</h4> </div> </body> </html> CSS max-inline-size – With Vertical Text The following example demonstrates the max-inline-size property with writing-modes to display text in vertical direction − <html> <head> <style> div { background-color: greenyellow; border: 2px solid blue; margin: 10px; padding: 5px; block-size: 100%; max-inline-size: 100px; writing-mode: vertical-rl; } </style> </head> <body> <div > <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </body> </html> Print Page Previous Next Advertisements ”;

CSS – Positioning

CSS – Positioning ”; Previous Next CSS Positioning helps to manipulate position of any element in a web page. In this tutorial we will learn position property and values associated with it. Table of Contents What is CSS Position? Static Positioned Element Relative Positioned Elements Absolutely Positioned Elements Position Fixed Element Sticky Positioned Element Positioning Text in an Image Position Related Properties   What is CSS Position? In CSS position property is used to create floating elements, floating sidebar, and other interactive features by adjusting position of elements in webpage. Along with position property, other properties like top, bottom, right, and left are used to control its exact position on the page. They specify the offsets of an element from its edges. We will see examples for those in this tutorial. Syntax Following are possible values for css position. position: static | relative | absolute | fixed | sticky; Static Positioned Element When you use the position: static property, the element will be positioned normally in the document flow. The left, right, top, bottom, and z-index properties will not affect the element. This is the default value for position property. Example In this example we defined two static positioned div elements and one relative positioned element. See the difference. <!DOCTYPE html> <html lang=”en”> <head> <style> .container { padding: 20px; border: 1px solid #ccc; } .static-element { position: static; background-color: lightblue; padding: 10px; margin: 10px 0; } .non-static-element { position: relative; top: 20px; background-color: lightgreen; padding: 10px; } </style> </head> <body> <div class=”container”> <div class=”static-element”> This is a static element (default position). </div> <div class=”non-static-element”> This element is not static and is moved 20px down. </div> <div class=”static-element”> This is another static element (default position). </div> </div> </body> </html> Relative Positioned Elements CSS position: relative property positions the elements relative to their original position in the page. You can use the left, right, top, and bottom properties to move the element around, but it will still take up space in the document flow. Example In this example we defined one static positioned div element and one relative positioned element. See the difference. <!DOCTYPE html> <html lang=”en”> <head> <style> *{ padding: 15px; } .container { border: 1px solid #ccc; } .static-element { position: static; background-color: lightblue; } .relative-element { position: relative; top: 20px; left: 30px; background-color: lightgreen; } .normal-flow { background-color: lightcoral; margin: 10px 0; } </style> </head> <body> <div class=”container”> <div class=”static-element”> This is a static element (default position). </div> <div class=”relative-element”> This element is relatively positioned 20px down and 30px right. </div> <div class=”normal-flow”> This element is in the normal document flow, after the relative element. </div> </div> </body> </html> Absolutely Positioned Elements An element with position: absolute is taken out of the document flow and positioned relative to its nearest positioned ancestor (if any). If there is no positioned ancestor, then the element is positioned relative to the viewport. You can use top, right, bottom, and left properties to specify the position of the element relative to its containing block. Example This example show use of position absolute <!DOCTYPE html> <html lang=”en”> <head> <style> *{ padding: 15px; } .container { /* This makes container positioned ancestor */ position: relative; width: 70%; height: 200px; border: 1px solid #ccc; } .static-element { position: static; background-color: lightblue; padding: 10px; margin: 10px 0; } .absolute-element { position: absolute; /* 50px from top of nearest positioned ancestor */ top: 50px; /* 30px from left of nearest positioned ancestor */ left: 30px; background-color: lightgreen; padding: 10px; } </style> </head> <body> <div class=”container”> <div class=”static-element”> This is a static element (default position). </div> <div class=”absolute-element”> This element is absolutely positioned 30px from top and 50px from left. </div> </div> </body> </html> Position Fixed Element In CSS position: fixed property is used to make element stay in the same place on the screen even when the user scrolls. You can then use the left, right, top, and bottom properties to position the element where you want it. Example In this example you can see that paragraph element remain there when you scroll down. <html> <head> <style> div { width: 100%; height: 500px; background-color: lightgrey; overflow: auto; padding: 15px; } .fixed-position { position: fixed; top: 50%; left: 20%; padding: 5px; background-color: white; } </style> </head> <body> <div> <p>You can Scroll down…</p> <p class=”fixed-position”> Tutorialspoint CSS Position Fixed </p> <p> White screen will remain at 50% height from top </p> </div> </body> </html> Sticky Positioned Element In CSS position: sticky property is used to make any element stay at the top of container even when the user scrolls. You can then use the left, right, top, and bottom properties to position the element where you want it. The position: sticky property is a combination of the position: relative and position: fixed properties Example In this example you can see that when you scroll, fixed move to top <html> <head> <style> div { width: 100%; height: 500px; background-color: lightgrey; overflow: auto; padding: 15px; } .sticky-position { position: sticky; top: 50%; left: 20%; padding: 5px; background-color: white; } </style> </head> <body> <div> <p>You can Scroll down…</p> <p class=”sticky-position”> TutorialsPoint CSS Position Fixed </p> <p> White screen will stick at top of screen when you scroll down. </p> </div> </body> </html> Positioning Text in an Image In following example, you can use the position: absolute property to position text in different directions inside an image. The text elements are positioned at the top left, top right,

CSS – Accent Color

CSS – accent-color Property ”; Previous Next CSS accent-color property determines the accent color that can be applied to user-interface controls such as radio button, checkboxes, buttons etc. This property gives the flexibility to assign color of user”s choice to the user-interface control. Syntax accent-color: auto | color | initial | inherit; Value Description auto The browser selects the accent color. Default value. color It specifies the color to be used. Different formats (rgb, hex, color-name, etc) can be used. initial This sets the property to its initial value inherit This inherits the property from the parent element Examples of CSS Accent Color Property Below examples will explain the accent-color property with different values. Setting Default Color To allow the browser to give the color to the user-interface controls, the auto value can be used. This is shown in the example below. Example <!DOCTYPE html> <html> <head> <style> input { accent-color: auto; } </style> </head> <body> <h2>CSS accent-color property</h2> <div> <input type=”checkbox” id=”check” checked> <label for=”check”>accent-color: auto</label> </div> <div> <input type=”radio” id=”clicked” checked> <label for=”clicked”>accent-color:auto</label> </div> <div> <input type=”range” id=”pull”> <label for=”pull”>accent-color:auto</label> </div> </body> </html> Customizing Color To apply color of our choice to the user-interface controls, we can specify the color in different formats. This is shown in the example below. Three different formats have been used – color name, color rgb value and color hexadecimal value. Example <!DOCTYPE html> <html> <head> <style> input[type=radio] { accent-color: #ffa500; } input[type=range] { accent-color: rgb(55, 255, 0); } progress { accent-color: red; } </style> </head> <body> <h2>CSS accent-color property</h2> <h3>accent-color for radio buttons</h3> <input type=”radio” id=”radio1″ name=”gender” checked> <label for=”radio1″>Male</label></br> <input type=”radio” id=”radio2″ name=”gender”> <label for=”radio2″>Female</label> <h3>accent-color for a range</h3> <label for=”ran”>Range</label></br> <input type=”range” id=”ran” name=”range_val” min=”0″ max=”5″> <h3>accent-color for a progress</h3> <label for=”prog”>Progress</label></br> <progress id=”prog” name=”prog_val” value=”60″ max=”100″>60%</progress> </body> </html> Supported Browsers Element accent-color 93.0 93.0 92.0 15.4 79.0 css_properties_reference.htm Print Page Previous Next Advertisements ”;

CSS – Pointer Events

CSS – pointer-event Property ”; Previous Next CSS pointer-event property is used to control how an element responds to pointer events such as mouse clicks, mouseovers, and mouse movements. It allows you to specify whether an element should receive pointer events and whether those events should trigger actions like clicking or hovering. Possible Values auto − : This is the default value. It indicates that the element behaves as normal and responds to pointer events based on its specified CSS properties and content. In SVG content, this value and visiblePainted have the same effect. none − This value indicates that the element should not respond to pointer events. Clicks, hover effects, and other interactions will pass through the element as if it were not there, and the elements beneath it will receive those events instead. visiblePainted − This value indicates that the element does not receive pointer events unless they are triggered on a visible, painted area of the element. Transparent areas within the element do not respond to pointer events.. visibleFill − Similar to visiblePainted, this value indicates that the element only responds to pointer events triggered on visible, painted areas or the fill of the element, ignoring pointer events on transparent areas. visibleStroke − Similar to visiblePainted and visibleFill, this value indicates that the element only responds to pointer events triggered on visible, painted areas or the stroke of the element, ignoring pointer events on transparent areas. visible − Targets pointer events only when the visibility is set to visible. and the mouse cursor is over its interior (fill) or perimeter (stroke), with the fill and stroke values not affecting event processing painted − This value indicates that the element only responds to pointer events triggered on its painted content. Transparent areas within the element do not respond to pointer events. fill − Similar to painted, this value indicates that the element only responds to pointer events triggered on its fill, ignoring events on transparent areas. stroke − Similar to painted and fill, this value indicates that the element only responds to pointer events triggered on its stroke, ignoring events on transparent areas. all − Targets to pointer events when the pointer is over their interior (fill) or perimeter (stroke). The fill, stroke and visibility properties values are unaffected. Applies To All elements. Syntax pointer-event: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all; Points To Remember When this property is not defined, SVG content has the same properties as the visiblePainted value. The “one value in pointer events not only makes the element the target rather than the pointer event, but it also allows the event to pass through, targeting what is underneath the element. Disabling pointer events on an element using pointer-events does not mean that event listeners will not be triggered. If a child of that element has pointer-events enabled to allow it to be the event target, events aimed at the child will pass via the parent, potentially triggering event listeners. However, if the pointer activity occurs in an area only covered by the parent, it will be missed by both the child and the parent. Elements with pointer-events: none will still get focus via sequential keyboard navigation with the Tab key. CSS pointer-event – none Value The following example demonstrates how the pointer-event: none property disables the hyperlink from being clicked − <html> <head> <style> a[href=”https://tutorialspoint_css_pointer-event.com”] { pointer-events: none; } </style> </head> <body> <a href=”https://tutorialspoint_css_pointer-event.com”>css_pointer-event</a> </body> </html> CSS pointer-event – auto Value The following example demonstrates the pointer-event: auto property allows the anchor element to be clickable − <html> <head> <style> a[href=”https://tutorialspoint_css_pointer-event.com”] { pointer-events: auto; } </style> </head> <body> <a href=”https://tutorialspoint_css_pointer-event.com”>css_pointer-event</a> </body> </html> CSS pointer-event – Disabling Pointer Events on Images The following example demonstrates the pointer-event: auto property disables pointer events (clicking, hovering, etc.) on an images − <html> <head> <style> img { height: 100px; width: 100px; pointer-events: none; } </style> </head> <body> <img src=”images/pink-flower.jpg” alt=”pink-flower”> </body> </html> Print Page Previous Next Advertisements ”;

CSS – Icons

CSS – Icons ”; Previous Next CSS icons are used to add graphical representations, symbols, or small images to web elements. They serve several purposes in web development, such as: Table of Contents Importance of Icon How to add Icons to a Webpage? Icons using SVG Icons using icon fonts Icons using images Icons using Pseudo-Elements Icons using Google Icons Bootstrap Icons   Importance of Icon Enhanced user experience: Provides visual cues and context to various elements on a webpage, like instead of adding the text save, delete, etc. you may add an icon to represent them. Reduced load time: CSS icons are often lightweight compared to traditional image icons, which means they can load quickly, reducing the overall page load time. Scalability: CSS icons can be easily scaled up or down without loss of quality. It is important for responsive web designing. Customization: CSS icons can be customized by changing their size, color, and other visual properties using CSS rules. This flexibility allows you to match the icons to your website”s overall design and branding. Accessibility: CSS icons can be styled to meet accessibility standards, such as providing alternative text for screen readers. Reduced HTTP Requests: Using CSS icons can reduce the number of HTTP requests made by a webpage since they are often part of the stylesheet. How to Add Icons to a Webpage? Inline SVGs: Involves embedding SVG (Scalable Vector Graphics) directly into your HTML code. You can create or obtain SVG icons and insert them as inline elements. Icon fonts: Icon fonts are custom fonts that contain icons as glyphs. You can use these fonts to display icons by setting the appropriate font-family and specifying the icon”s Unicode character. CSS background images: You can use CSS background images to display icons by setting the background-image property on an element. Pseudo-elements: Involves using the ::before and ::after pseudo-elements to insert content before or after an HTML element and then styling that content to display an icon. CSS Libraries and Frameworks: Many CSS libraries and frameworks, like Font Awesome, Material Icons, and Google Icons, provide pre-designed sets of icons that you can easily include in your projects. They often come with ready-to-use classes or utility classes. Icons Using SVG In HTML <svg> tag can be used to create custom icons using d attribute of <path>. The d attribute of the <path> tag in SVG defines the shape of the path using a series of commands and parameters in a predefined syntax, representing lines, curves, and other geometric shapes. These commands include moveto (M), lineto (L), curveto (C), and others, each followed by coordinates or control points that specify the path”s structure. Example <!DOCTYPE html> <html> <head> <style> .icon { width: 24px; height: 24px; fill: #000; margin-left: 15px; } </style> </head> <body> <h1>SVG Icons</h1> <!– Search Icon –> <svg class=”icon” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″> <path d=”M23.707 22.293l-6.364-6.364C18.454 14.68 19 13.418 19 12c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.418 0 2.68-.546 3.929-1.071l6.364 6.364a1 1 0 0 0 1.414-1.414zM5 12c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6z”/> </svg> <!– Download Icon –> <svg class=”icon” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″> <path d=”M19 14v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-7-9h2v7h3l-4 4-4-4h3V5zm-1-2h4V0h-4v3z”/> </svg> <!– Cloud Icon –> <svg class=”icon” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″> <path d=”M19.35 10.04c.63-.34 1.22-.79 1.68-1.35C21.47 6.39 19.76 4 17 4c-2.33 0-4.31 1.45-5.13 3.5H11.5C8.42 7.5 6 9.92 6 13s2.42 5.5 5.5 5.5h7c3.04 0 5.5-2.46 5.5-5.5-.01-2.52-1.65-4.67-4-5.46l.35.5z”/> </svg> <!– Home Icon –> <svg class=”icon” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″><path d=”M12 2l10 9h-3v11h-6V14H9v8H3V11H0l12-9z”/> </svg> </body> </html> Icons Using Icon Fonts To use icon fonts in your web project, you need to follow this steps: Include the icon font library, Popular choices include Font Awesome, Material Icons, or custom icon fonts. Use <i> tag in HTML and apply the icon font class to it. Then, specify the Unicode character for the desired icon. Example <!DOCTYPE html> <html> <head> <!– Include Font Awesome –> <link rel=”stylesheet” href= “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css”> <style> .icon { /* Specify Font Awesome family */ font-family: “Font Awesome 5 Free”; /* Minimum Font weight for Font Awesome */ font-weight: 600; font-size: 24px; color: #000; margin-right: 15px; } </style> </head> <body> <h1>CSS font Awesome Icons</h1> <span class=”icon”> &amp#xf002; </span> <span class=”icon”> &amp#xf019; </span> <span class=”icon”> &amp#xf0c2; </span> <span class=”icon”> &amp#xf015; </span> </body> </html> Icons Using Images The background-image property in CSS can also used to display icons that are stored at system storage. Example Following example demonstrates using background image as an icon: <DOCTYPE html> <html> <head> <style> .icon-img { width: 30px; height: 30px; background-image: url(”/css/images/logo.png”); background-size: cover; } </style> </head> <body> <div class=”icon-img”> </div> </body> </html> Icons Using Pseudo-Elements Pseudo-elements like ::before and ::after can be used to insert an icon before or after an element as demonstrated in the following example. To know more about pseudo-elements check out tutorial on CSS Pseudo-Elements. Example Here in this example we use pseudo element to render icons. <DOCTYPE html> <html> <head> <style> li { list-style: none; } li::before { content: url(/css/images/smiley.png); margin-right: 15px; font-size: 20px; } p::after { content: url(/css/images/smiley.png); margin-left: 15px; font-size: 5px; } </style> </head> <body> <ul> <li>Butterscotch</li> <li>Chocolate</li> <li>Coconut</li> </ul> <p> In the above list we made custom label using before pseudo-element, we added icon at the end of this paragraph using ::after pseudo-element. </p> </body> </html> Icons Using Google

CSS – Forms

CSS – Forms ”; Previous Next Forms are required, when you want to collect some data from the site visitor. They have input fields for users to enter information, labels to identify the input fields, and buttons to submit the form or perform an action. We can style HTML forms by changing the appearance of form elements, such as text fields, checkboxes, radio buttons, select menus, and submit buttons. First Name: Last Name: Tutorial: Select Tutorial HTML CSS Python JavaScript Submit

CSS – Overflow

CSS – Overflow Property ”; Previous Next CSS overflow is a shorthand property that specifies how to handle content that overflows the boundaries of its container. It can be used to clip the content, add scrollbars, or display an ellipsis. The overflow property only works for block-level elements with a specified height or width. The overflow property can be used to control the overflow of content in both the horizontal and vertical directions. CSS provides following possible values for overflow property to handle content that overflows an element”s box. 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.This can be used with overflow-clip-margin to set the clipped area. 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. CSS overflow – With visible and hidden Values Following example shows how to set the CSS overflow property to visible or hidden. The default value is visible, which allows content to overflow its boundaries. The hidden value hides any overflowing content. <html> <head> <style> .container { display: flex; } .overflow-visible { height: 130px; width: 250px; overflow: visible; border: 2px solid #000000; background-color: #2fe262; padding: 5px; margin-right: 15px; } h4 { text-align: center; color: #D90F0F; } .overflow-hidden { height: 130px; width: 250px; overflow: hidden; border: 2px solid #000000; background-color: #2fe262; padding: 5px; } </style> </head> <body> <div class=”container”> <div class=”overflow-visible”> <h4>Tutorialspoint CSS Overflow Visible</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class=”overflow-hidden”> <h4>Tutorialspoint CSS Overflow Hidden</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> </div> </body> </html> CSS overflow – clip Value The following example shows how to hide overflowing content of an element by setting the CSS overflow property to clip. <html> <head> <style> div { height: 130px; width: 250px; overflow: clip; border: 2px solid #000000; background-color: #2fe262; padding: 5px; } h4 { text-align: center; color: #D90F0F; } </style> </head> <body> <div> <h4>Tutorialspoint CSS Overflow Clip</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic type setting, remaining essentially unchanged.</p> </div> </body> </html> CSS overflow – With scroll and auto Values The following example determines how the CSS overflow property can be set to scroll or auto. Scroll always adds a scrollbar, while auto only adds a scrollbar when needed. <html> <head> <style> .container { display: flex; } .overflow-scroll { height: 130px; width: 250px; overflow: scroll; border: 2px solid #000000; background-color: #2fe262; padding: 5px; margin-right: 15px; } h4 { text-align: center; color: #D90F0F; } .overflow-auto { height: 130px; width: 250px; overflow: auto; border: 2px solid #000000; background-color: #2fe262; padding: 5px; } </style> </head> <body> <div class=”container”> <div class=”overflow-scroll”> <h4>Tutorialspoint CSS Overflow Scroll</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class=”overflow-auto”> <h4>Tutorialspoint CSS Overflow Auto</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> </div> </body> </html> CSS Overflow – Related Properties Following is the list of CSS properties of overflow: property value overflow-x Displays overflowing content in the horizontal direction. overflow-y Displays overflowing content in the vertical direction. overflow-anchor Determines whether the browser will scroll the page to keep an element in view. overflow-block Determines how the content of an element behaves when it is too wide to fit inside its container. overflow-inline Determines how content is displayed when it overflows the left and right edges of an element. overflow-clip-margin Determines how far the content of an element can overflow its box before being clipped. overflow-wrap Determines whether the browser can break a line of text within an unbreakable string. Print Page Previous Next Advertisements ”;

CSS – Width

CSS – Width Property ”; Previous Next The width property sets the width of an element”s content area. In case, the box-sizing is set to border-box, the property width sets the width of the border area. The value specified by the width property remains within the values defined by min-width and max-width properties. Refer the image for the understanding of width of an element. Possible Values <length>: A specific length value such as pixels (px), centimeters (cm), inches (in), etc. <percentage>: A percentage of the width of the containing element. auto: The browser will calculate the width automatically based on the content. It is the default value. max-content: Defines the intrinsic preferred width. min-content: Defines the intrinsic minimum width. fit-content: Fits the content in the available space, but never more than max-content. fit-content: fit-content formula is used, i.e, min(max-content, max(min-content, <length-percentage>)). Applies to All the HTML elements except non-replaced inline elements, table rows, and row groups. DOM Syntax object.style.width = “100px”; CSS Width – Length Unit Here is an example of adding a width to a div element in length units: <html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.a { width: 100px; background-color: rgb(230, 230, 203); } div.b { width: 5em; background-color: rgb(230, 230, 203); } </style> </head> <body> <div class=”a”>This div element has a width of 100px.</div> <div class=”b”>This div element has a width of 5em.</div> </body> </html> CSS Width – Percentage Value Here is an example of adding a width to a div element in percentage values: <html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.a { width: 120%; background-color: yellow; } div.b { width: 20%; background-color: rgb(236, 190, 190); } </style> </head> <body> <div class=”a”>This div element has a width of 120%.</div> <div class=”b”>This div element has a width of 20%.</div> </body> </html> CSS Width – Auto Here is an example of adding a width to a div element as auto: <html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.auto { width: auto; background-color: yellow; } </style> </head> <body> <div class=”auto”>This div element has a width set as auto.</div> </body> </html> CSS Width – Using max-content and min-content Here is an example of width equal to max-content and min-content: <html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } div.c { width: max-content; background-color: bisque; } div.d { width: min-content; background-color: darkseagreen; } </style> </head> <body> <div class=”c”>This div element has a width as max-content.</div> <div class=”d”>This div element has a width of min-content.</div> </body> </html> CSS width – Image Here is an example of adding width to an image: <html> <head> <style> div { border: 1px solid black; margin-bottom: 5px; } .demoImg { margin-top: 15px; width: 300px; margin-right: 0.5in; } </style> </head> <body> <img class=”demoImg” src=”images/scancode.png” alt=”image-width”> </body> </html> CSS width – Using fit-content Here is an example of fit-content value set for width of a list: <html> <head> <style> ul { background-color: beige; width: fit-content; padding: 1.5em; border: 2px solid black; } li { display: inline-flex; background-color: orange; border: 2px solid black; padding: 0.5em; } </style> <body> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </body> </html> CSS Width – Related Properties Following is the list of related CSS properties of width: property value max-width Sets an upper bound on the width of an element. min-width Sets a lower bound on the width of an element. min-content Sets intrinsic minimum width of the content. max-content Sets intrinsic maximum width of the content. fit-content Fits the content depending on the available size. fit-content() Clamps a given size based on the formula min(maximum size, max(minimum size, argument)). Print Page Previous Next Advertisements ”;

CSS – Min Block Size

CSS – min-block-size Property ”; Previous Next CSS min-block-size property sets the minimum size, either horizontally or vertically, of an element”s block based on its writing mode, which corresponds to either the min-width or min-height property based on the writing_mode value. The min-block-size determines the minimum width for vertically oriented writing modes, and the minimum height for horizontally oriented mode.The min-inline-size property defines the other dimension. Possible Values The min-block-size property accepts the same values as min-height and min-width. Applies To Same as width and height. Syntax <length> Values min-block-size: 100px; min-block-size: 5em; <percentage> Values min-block-size: 10%; Keyword Values min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content; min-block-size: fit-content(20em); CSS min-block-size – <length> Value The following example demonstrates the min-block-size: 100px property sets the height of the div element to a minimum of 100px − <html> <head> <style> div { background-color: orange; border: 2px solid blue; min-block-size: 100px; } </style> </head> <body> <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> </body> </html> CSS min-block-size – max-content Value The following example demonstrates the min-block-size: max-content property sets minimum height that fits the content inside it − <html> <head> <style> div { background-color: orange; border: 2px solid blue; min-block-size: max-content; } </style> </head> <body> <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> </body> </html> CSS min-block-size – With Horizontal and Vertical Text The following example demonstrates how to use min-block-size property with writing-modes to display text in vertical direction − <html> <head> <style> div { background-color: pink; border: 2px solid blue; min-block-size: 200px; writing-mode: vertical-rl; } </style> </head> <body> <div> <p>CSS min-block-size</p> </div> </body> </html> Print Page Previous Next Advertisements ”;

CSS – Overscroll

CSS – overscroll-behavior ”; Previous Next The CSS property overscroll-behavior is a shorthand property that determines what a browser does when the boundary of a scrolling area is reached. The constituent properties of this property are overscroll-behavior-x and overscroll-behavior-y. Scroll chaining is a behavior that is observed when a user scrolls past the boundary (top, bottom, left or right) of a scrollable element, causing the scrolling on an ancestor element. This creates a chain effect in scrolling. For example, if you have a modal dialog box on the webpage, that has content which can be scrolled vertically. As you reach the end of the scrollable area of this modal, the scrolling continues on the main page”s content behind the modal dialog box. This continuous scrolling experience is called the scroll chaining. This behavior may or may not be desirable and in order to avoid it, the property overscroll-behavior is used. The property is applied only on the scrollable containers. Setting this property on <iframe> has no effect and thus it needs to be set on both the <html> and the <body> elements of the iframe”s document. Possible Values The CSS property overscroll-behavior is defined as one or two of the keywords as given below. The two keywords specifies the value on the x and y axes respectively. When only one value is specified, both the x and y axes have the same value. auto − The default scroll behavior is normal. contain − The scroll behavior is seen only in the element where the value is set. No scrolling set on neighboring elements. none − No scroll chaining behavior is seen. Default scroll overflow behavior is avoided. Applies To All non-replaced block-level elements and non-replaced inline-block elements. Syntax overscroll-behavior = [ contain | auto | none ]{1,2} CSS overscroll-behavior – auto Value Following example demonstrates the use of overscroll-behavior: auto that sets the scroll effect continuous. So as the boundary of the scrollable element is reached, on scrolling, the parent element gets scrolled. <html> <head> <style> div { margin: 5px 15px; padding: 3px; border: solid black 1px; overflow: auto; border: 2px solid black; } #main-box { display: flex; flex-wrap: wrap; background-color: cornsilk; height: 800px; } #box-1 { background-color: lightblue; overscroll-behavior: auto; } #main-box > div { flex: 1; height: 150px; } </style> </head> <body> <h1>overscroll-behavior Property</h1> <p>The box displayed below has overscroll-behavior set as auto, which is the default value.</p> <p>Scroll the blue box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p> <div id=”main-box”> <div id=”box-1″> <h2>overscroll-behavior: auto</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.</p> </div> </div> </body> </html> CSS overscroll-behavior – Comparison of Values Following example demonstrates the use of overscroll-behavior: contain that sets the scrolling effect contained to the element it is applied. So as the boundary of the scrollable element is reached, on scrolling, the parent element does not get scrolled. <html> <head> <style> div { margin: 5px 15px; padding: 3px; border: solid black 1px; overflow: auto; border: 2px solid black; } #main-box { display: flex; flex-wrap: wrap; background-color: darkcyan; height: 800px; } #box-1 { background-color: pink; } #box-2 { background-color: aliceblue; overscroll-behavior: contain; } #main-box > div { flex: 1; height: 150px; } </style> </head> <body> <h1>overscroll-behavior Property</h1> <p>The two boxes displayed below has overscroll-behavior set as auto and contain, respectively.</p> <p>Scroll the first pink box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p> <p>Scroll the second white box using the mouse and once it is scrolled completely keep scrolling and see the parent element not getting scrolled.</p> <div id=”main-box”> <div id=”box-1″> <h3>overscroll-behavior: auto</p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste