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 Ankith Reddy
Page 21 of 73
Style the active link with CSS
To style the active links, use the CSS :active selector. The :active pseudo-class targets an element during the exact moment it is being clicked or activated by the user. Syntax selector:active { property: value; } Example: Basic Active Link Styling The following example changes the background color of a link when it's being clicked − a { color: blue; text-decoration: none; ...
Read MoreSet min-width and max-width of an element using CSS
The CSS min-width and max-width properties are used to set the minimum and maximum width constraints for an element. These properties are particularly useful for creating responsive designs that adapt to different screen sizes. Syntax selector { min-width: value; max-width: value; } Possible Values ValueDescription lengthDefines width in px, em, rem, etc. %Defines width as a percentage of the parent container autoDefault value, no constraint applied noneNo maximum width limit (for max-width only) Example The following example demonstrates how min-width and max-width ...
Read MoreCSS speech-rate property
The CSS speech-rate property controls the speed at which content is spoken by screen readers and other speech synthesis applications. This property is part of the CSS Speech Module and helps create more accessible web content. Syntax selector { speech-rate: value; } Possible Values ValueDescription numberSpecifies the speaking rate in words per minute x-slowSame as 80 words per minute slowSame as 120 words per minute mediumSame as 180-200 words per minute (default) fastSame as 300 words per minute x-fastSame as 500 words per minute fasterAdds 40 words per minute ...
Read MoreUsage of CSS @charset rule
The CSS @charset rule specifies the character encoding used in an external CSS file. It must be placed at the very beginning of the CSS file to ensure proper interpretation of special characters and symbols. Syntax @charset "encoding"; Rules for Usage Must be the first thing in the CSS file (no spaces or comments before it) The encoding name must be enclosed in double quotes Only one @charset rule is allowed per CSS file Most commonly used with UTF-8 encoding Example: UTF-8 Character Set The following example shows how to ...
Read MoreCreate an attenuated shadow with CSS
CSS shadows can be created using the box-shadow and text-shadow properties to add depth and visual appeal to elements. These properties allow you to create attenuated (softened) shadows with customizable direction, color, and blur effects. Syntax /* Box shadow syntax */ box-shadow: h-offset v-offset blur spread color; /* Text shadow syntax */ text-shadow: h-offset v-offset blur color; Parameters ParameterDescription h-offsetHorizontal offset of the shadow (positive = right, negative = left) v-offsetVertical offset of the shadow (positive = down, negative = up) blurBlur radius - higher values create more attenuated shadows spreadShadow spread ...
Read MoreRole of size property in CSS to set the size and orientation of a page box
The CSS size property specifies the size and orientation of a page box when printing. This property is primarily used within @page rules to control how content appears on printed pages. Syntax @page { size: value; } Possible Values ValueDescription autoThe page box will be set to the size and orientation of the target sheet landscapeOverrides the target's orientation. The longer sides are horizontal portraitOverrides the target's orientation. The shorter sides are horizontal lengthCreates an absolute page box with specified dimensions. One value sets both width and height ...
Read MoreSet Mask Effect with CSS
The CSS mask effect is used to selectively hide parts of an element or apply visual effects by overlaying a mask layer. Modern CSS provides the mask property to create sophisticated masking effects using images, gradients, or shapes. Syntax selector { mask: mask-image mask-mode mask-repeat mask-position / mask-size; } Common Mask Properties PropertyDescription mask-imageSpecifies the image to use as a mask mask-modeSets how the mask layer image is interpreted (alpha, luminance, match-source) mask-repeatControls how the mask image is repeated mask-positionSets the position of the mask layer mask-sizeSpecifies the size ...
Read MoreMake any particular color transparent with CSS Filters
The CSS chroma filter is a legacy Internet Explorer filter that was used to make a specific color transparent in an element. This filter allows you to specify a color that should become transparent, effectively creating a "color key" effect similar to green screen technology. Syntax selector { filter: Chroma(Color = #colorvalue); } Parameters ParameterDescription ColorThe hexadecimal color value that you want to make transparent Example: Making White Background Transparent The following example demonstrates how to make white color (#FFFFFF) transparent in an image − ...
Read MoreHow to import styles from another style sheet in CSS
The CSS @import rule allows you to import styles from another stylesheet into your current CSS file. This rule must be placed at the very beginning of your stylesheet, before any other CSS rules. Syntax @import "stylesheet-url"; @import url("stylesheet-url"); @import url("stylesheet-url") media-query; Basic Import Example Here's how to import an external CSS file into your stylesheet − @import url("https://fonts.googleapis.com/css2?family=Arial:wght@300;700&display=swap"); body { font-family: Arial, sans-serif; ...
Read MoreUsage of :hover pseudo-class in CSS
The :hover pseudo-class is used to add special styles to an element when a user hovers their mouse cursor over it. This creates interactive effects that enhance user experience and provide visual feedback. Syntax selector:hover { property: value; } Example: Link Hover Effect The following example changes the color of a link when you hover over it − a { color: #0066cc; text-decoration: none; ...
Read More