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
Articles by Chandu yadav
Page 19 of 81
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 MoreHow to specify the size of the gap between rows in CSS Grid
Use the grid-row-gap property to set the size of the gap between rows in CSS Grid. This property controls the vertical spacing between grid items, making your layouts more visually appealing and well-structured. Syntax selector { grid-row-gap: value; } Possible Values ValueDescription lengthDefines the gap size in px, em, rem, etc. %Defines the gap as a percentage of the container normalDefault value, typically 0 Example The following example demonstrates a CSS Grid layout with a 50px gap between rows − ...
Read MoreCSS Grid Columns
The CSS Grid Layout provides a powerful way to create web layouts using rows and columns. In CSS Grid, grid columns are the vertical tracks that divide the grid container into sections where grid items can be positioned. Item 1 Item 2 Item 3 ...
Read MoreUse CSS width property for a responsive video player
The CSS width property can be used to create responsive video players that automatically adjust their size based on the container or viewport width. By setting width: 100% and height: auto, the video maintains its aspect ratio while scaling fluidly. Syntax video { width: 100%; height: auto; } Example: Basic Responsive Video Player The following example creates a responsive video player that scales with the browser window − ...
Read MoreCSS shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
The CSS flex property is a shorthand that combines flex-grow, flex-shrink, and flex-basis properties in a single declaration. It controls how flex items grow, shrink, and their initial size within a flex container. Syntax selector { flex: flex-grow flex-shrink flex-basis; } Possible Values PropertyDescriptionDefault Value flex-growHow much the item should grow (number)0 flex-shrinkHow much the item should shrink (number)1 flex-basisInitial size before growing/shrinkingauto Example The following example demonstrates how the flex property affects item sizing within a flex container − ...
Read MoreVariables in CSS
Variables in CSS are used to store values that can be reused throughout your stylesheet. They allow you to define custom properties with meaningful names and reference them anywhere in your CSS, making your code more maintainable and easier to update. Syntax /* Define variables */ :root { --variable-name: value; } /* Use variables */ selector { property: var(--variable-name); } Key Points CSS variables are defined with -- prefix The :root selector makes variables globally accessible Use var() function to access variable values Variable ...
Read MoreCreate a Vertical Button Group with CSS
The vertical button group in CSS allows you to stack buttons one below the other, creating a clean and organized navigation or action menu. This layout is useful for sidebars, navigation panels, or any interface where you need buttons arranged vertically. Syntax .button-group .button { display: block; width: 100%; } Example The following example creates a vertical button group with styled buttons ? .mybtn .button { background-color: orange; ...
Read MoreHow to specify the number of columns an element should be divided into with CSS
The CSS column-count property is used to specify the number of columns an element should be divided into. This property enables you to create newspaper-style multi-column layouts for text content. Syntax selector { column-count: value; } Possible Values ValueDescription autoDefault value. Number of columns determined by other properties numberPositive integer specifying the number of columns Example: Creating 4 Columns The following example demonstrates how to divide text content into 4 columns − .demo { ...
Read MoreUsage of CSS grid-column-gap property
The CSS grid-column-gap property is used to set the gap between columns in a CSS Grid layout. This property allows you to create space between grid columns without affecting the padding or margins of individual grid items. Syntax selector { grid-column-gap: value; } Possible Values ValueDescription lengthDefines the gap in px, em, rem, etc. %Defines the gap as a percentage of the container width normalDefault value, typically 0 Example The following example demonstrates how to create a 20px gap between grid columns − ...
Read MoreCreate a responsive pagination with CSS
Responsive pagination is a navigation component that adapts to different screen sizes while maintaining usability. This technique uses CSS to create pagination links that automatically adjust their layout and appearance across devices. Syntax .pagination { display: flex; justify-content: center; flex-wrap: wrap; } .pagination a { padding: value; margin: value; text-decoration: none; border: value; } @media (max-width: breakpoint) { /* Responsive styles */ } ...
Read More