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
CSS Articles
Page 83 of 130
Set 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 MoreAnimate CSS border-top property
The CSS border-top property can be animated to create dynamic visual effects. You can animate the border width, color, and style using CSS animations and transitions. Syntax selector { border-top: width style color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-top: initial-value; } to { border-top: final-value; } } Example: Animating Border Top Width and Color The following example demonstrates how to animate the border-top property by changing its width and color − ...
Read MoreDefine colors using the Red-Green-Blue-Alpha model (RGBA) with CSS
CSS provides the RGBA color model to define colors using Red, Green, Blue values along with an Alpha channel for transparency. The rgba() function allows you to specify colors with precise opacity control, making it ideal for creating semi-transparent elements and layered designs. Syntax selector { color: rgba(red, green, blue, alpha); background-color: rgba(red, green, blue, alpha); } Possible Values ParameterRangeDescription red0-255Red color intensity green0-255Green color intensity blue0-255Blue color intensity alpha0-1Opacity level (0 = transparent, 1 = opaque) Example: RGBA Colors with Transparency ...
Read More