Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 519 of 652
Usage of CSS grid-row-start property
The CSS grid-row-start property specifies on which row line a grid item will start. This property allows you to control the exact row position where a grid item begins, giving you precise control over grid layout positioning. Syntax selector { grid-row-start: value; } Possible Values ValueDescription autoDefault value. The item will be placed automatically line-numberSpecifies which row line to start at (1, 2, 3, etc.) line-nameSpecifies a named grid line to start at span nSpecifies how many rows the item will span Example: Basic Grid Row Start ...
Read MoreSet the flex items vertically from bottom to top with CSS
Use the flex-direction property with column-reverse value to set the flex items vertically from bottom to top. This reverses the normal column direction, making items stack from the bottom upward. Syntax .container { display: flex; flex-direction: column-reverse; } Example The following example demonstrates how to arrange flex items vertically from bottom to top using column-reverse − .mycontainer { display: flex; ...
Read MoreSet whether the text should be overridden to support multiple languages with CSS
The CSS unicode-bidi property controls how bidirectional text is handled in HTML elements. This property is essential when working with documents that contain text in multiple languages with different writing directions, such as mixing English (left-to-right) with Arabic or Hebrew (right-to-left). Syntax selector { unicode-bidi: value; } Possible Values ValueDescription normalDefault value. Does not use additional embedding level bidi-overrideCreates an additional level of embedding and overrides the inherent directionality isolateIsolates the element from its surroundings for bidirectional text algorithm embedCreates an additional level of embedding Example: Bidirectional ...
Read MoreCSS unicode-bidi Property
The CSS unicode-bidi property controls the bidirectional text algorithm, determining how text with mixed left-to-right and right-to-left content should be displayed. This property is essential when working with multilingual content that includes languages like Arabic, Hebrew, or Persian alongside Latin-based languages. Syntax selector { unicode-bidi: value; } Possible Values ValueDescription normalDefault behavior, follows Unicode bidirectional algorithm embedCreates an additional level of embedding bidi-overrideForces text direction override based on direction property isolateIsolates element from surrounding text for bidirectional calculations isolate-overrideCombines isolate and bidi-override behaviors Example: Comparing Different Unicode-bidi ...
Read MoreSet the width of a tab character with CSS
Use the tab-size property in CSS to set the width of a tab character. This property determines how many spaces a tab character should take up when displaying text content inside elements or other elements with preserved whitespace. Syntax selector { tab-size: value; } Possible Values Value Description number ...
Read MoreCSS quotes Property
The CSS quotes property is used to set quotation marks for the element or elements that use the quotes property with content. It defines which characters to use for opening and closing quotes. Syntax selector { quotes: open-quote close-quote; } Possible Values ValueDescription noneRemoves quotation marks autoUses browser default quotation marks string stringCustom opening and closing quote characters Example 1: Custom Quote Marks The following example sets single quotes for the element − #demo ...
Read MoreCSS hanging-punctuation Property
The CSS hanging-punctuation property allows punctuation marks to be positioned outside the line box at the beginning or end of text lines. This creates better visual alignment by preventing punctuation from affecting text indentation. Syntax selector { hanging-punctuation: value; } Possible Values ValueDescription noneNo punctuation marks hang outside the line box (default) firstPunctuation at the start of the first line hangs outside lastPunctuation at the end of the last line hangs outside allow-endPunctuation at the end of lines may hang outside force-endPunctuation at the end of lines must hang ...
Read MoreHow to preserve the readability when font fallback occurs with CSS
The CSS font-size-adjust property helps preserve text readability when font fallback occurs. When the preferred font is unavailable and the browser falls back to another font, this property maintains consistent visual sizing by adjusting the font size based on the aspect ratio. Syntax selector { font-size-adjust: value; } Possible Values ValueDescription noneDefault. No adjustment applied numberAspect ratio value (typically 0.4 to 0.7) Example: Font Size Adjustment The following example demonstrates how font-size-adjust maintains consistent visual sizing when fonts change − ...
Read MorePerform Animation on CSS border-bottom-color property
The CSS border-bottom-color property can be animated to create smooth color transitions for the bottom border of an element. This property is animatable, allowing you to create engaging visual effects. Syntax selector { border-bottom-color: color; animation: animation-name duration timing-function; } @keyframes animation-name { from { border-bottom-color: initial-color; } to { border-bottom-color: final-color; } } Example: Animating Border Bottom Color The following example demonstrates how to animate the border-bottom-color property from blue to red over a 2-second duration ...
Read MoreUsage of radial-gradient() CSS function
The CSS radial-gradient() function creates a smooth transition between colors radiating from a center point. Unlike linear gradients that flow in a straight line, radial gradients expand outward in a circular or elliptical pattern. Syntax background: radial-gradient([shape] [size] [at position], color-stop1, color-stop2, ...); Possible Values ParameterDescription shapeOptional. circle or ellipse (default) sizeOptional. closest-side, farthest-side, closest-corner, farthest-corner positionOptional. Center position like center, top left, or 50% 30% color-stopTwo or more colors with optional stop positions Example: Basic Radial Gradient The following example creates a radial gradient background with three colors − ...
Read More