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 Nishtha Thakur
398 articles
Difference between PX, EM and Percent
In CSS, units of measurement define how sizes and distances are calculated. The three most commonly used units are px (pixels), em (relative to font size), and % (percentage). Each has different behaviors and use cases. Syntax selector { property: value px; /* Absolute pixel units */ property: value em; /* Relative to font size */ property: value%; /* Percentage of parent element */ } Unit Comparison UnitTypeRelative ToBest For ...
Read MoreCSS rest-after Speech Media property
The CSS rest-after property is used in speech media to specify a pause or rest period after an element is spoken. This property is particularly useful for screen readers and text-to-speech applications to create natural-sounding speech patterns. Syntax selector { rest-after: time | none | x-weak | weak | medium | strong | x-strong; } Possible Values ValueDescription Sets pause duration in seconds (s) or milliseconds (ms) noneNo pause after the element x-weakExtra weak pause (shortest) weakWeak pause mediumMedium pause (default) strongStrong pause x-strongExtra strong pause (longest) ...
Read MoreAnimate CSS text-decoration-color property
The CSS text-decoration-color property controls the color of text decorations like underlines, overlines, and line-throughs. You can animate this property to create smooth color transitions in text decorations. Syntax selector { text-decoration-color: color; animation: animation-name duration timing-function; } Example: Animating Text Decoration Color The following example demonstrates how to animate the text-decoration-color property from the default color to orange − .animated-text { font-size: 24px; ...
Read MoreUse CSS max-width property responsive for video player
The CSS max-width property can be used to make video players responsive by preventing them from exceeding their container's width while maintaining their aspect ratio. This ensures videos adapt smoothly to different screen sizes. Syntax video { max-width: value; height: auto; } Example The following example demonstrates how to create a responsive video player using the max-width property − .video-container { ...
Read MoreHow to position text to bottom right on an image with CSS
To position text at the bottom right of an image, use CSS positioning properties. The parent container needs position: relative while the text element uses position: absolute with bottom and right properties to achieve precise placement. Syntax .container { position: relative; } .text-overlay { position: absolute; bottom: value; right: value; } Example The following example demonstrates how to position text at the bottom right corner of an image − ...
Read MoreCSS grid-template-columns property
The CSS grid-template-columns property is used to define the number and size of columns in a CSS Grid layout. This property allows you to specify how much space each column should take up and how the grid items should be distributed across the columns. Syntax selector { grid-template-columns: value1 value2 ... valueN; } Possible Values ValueDescription autoColumn size adjusts based on content lengthFixed size using px, em, rem, etc. %Percentage of container width frFraction of available space repeat()Repeats a pattern of column sizes Example 1: Auto-Sized Columns ...
Read MoreRole of CSS flex-wrap property no-wrap value
The CSS flex-wrap property with nowrap value prevents flex items from wrapping to new lines, keeping all items on a single row even if they overflow the container. Syntax selector { flex-wrap: nowrap; } Example The following example demonstrates how nowrap forces all flex items to stay on one line − .mycontainer { display: flex; background-color: orange; ...
Read MoreHow to scale down an image with CSS to make it responsive
The CSS max-width and height properties can be used to make images responsive, allowing them to scale down automatically based on the container size while maintaining their aspect ratio. Syntax img { max-width: 100%; height: auto; } Key Properties PropertyValueDescription max-width100%Ensures image never exceeds container width heightautoMaintains aspect ratio automatically Example: Basic Responsive Image The following example demonstrates how to make an image scale down responsively − .container { ...
Read MoreSet top tooltip with CSS
To set a top tooltip with CSS, you position the tooltip above the element using the bottom property along with position: absolute. The tooltip appears above the trigger element when hovered. Syntax .tooltip .tooltip-text { position: absolute; bottom: 100%; visibility: hidden; } .tooltip:hover .tooltip-text { visibility: visible; } Example The following example creates a tooltip that appears at the top when you hover over the text − ...
Read MoreCSS animation-duration property
The CSS animation-duration property specifies how long an animation should take to complete one full cycle. This property controls the speed of your animations by setting the time duration. Syntax selector { animation-duration: time; } Possible Values ValueDescription timeSpecifies the duration in seconds (s) or milliseconds (ms) 0sDefault value. No animation occurs Example: 2-Second Animation Duration The following example creates a moving and color-changing animation that completes in 2 seconds − div { ...
Read More