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 84 of 130
Return the value of an attribute of the selected element using CSS
The attr() CSS function returns the value of an attribute of the selected element and is commonly used with the content property in pseudo-elements to display attribute values as text content. Syntax selector::before, selector::after { content: attr(attribute-name); } Example: Displaying Link URLs The following example uses the attr() function to display the URL of a link after the link text − a::after { content: " (" attr(href) ")"; ...
Read MoreUsage of var() CSS function
The var() function in CSS is used to insert the value of custom properties (CSS variables) into your stylesheet. It provides a way to reuse values throughout your CSS and create more maintainable code. Syntax var(--custom-property-name, fallback-value) Possible Values ParameterDescription --custom-property-nameThe name of the custom property (must start with two dashes) fallback-valueOptional value to use if the custom property is not defined Example: Basic Usage The following example demonstrates how to define custom properties and use them with the var() function − ...
Read MorePerform Animation on CSS font-size property
The CSS font-size property can be animated to create text that grows or shrinks smoothly over time. This creates engaging visual effects for headings, hover states, or attention-grabbing elements. Syntax @keyframes animation-name { keyframe-selector { font-size: value; } } selector { animation: animation-name duration timing-function iteration-count; } Example: Basic Font Size Animation The following example demonstrates animating the font-size property from its default size to 30px − ...
Read MoreUsage of attr() CSS function
The attr() CSS function returns the value of an attribute of the selected element. It's commonly used with the content property in ::before and ::after pseudo-elements to display attribute values dynamically. Syntax attr(attribute-name) Parameters ParameterDescription attribute-nameThe name of the HTML attribute whose value you want to retrieve Example 1: Displaying href Attribute The following example displays the URL next to each link using the attr() function − a::before { content: " (" ...
Read MoreHow to display columns and rows using named CSS grid items
To display columns and rows using named CSS grid items, use the grid-area property in combination with the grid-template-areas property. This approach allows you to create intuitive, readable layouts by assigning names to grid areas. Syntax .container { display: grid; grid-template-areas: "area1 area2 area3" "area4 area5 area6"; } .item { grid-area: area-name; } Example The following example demonstrates how to create a grid layout ...
Read MoreAnimate bottom CSS property
The CSS bottom property can be animated to create smooth transitions when changing an element's position from the bottom edge of its containing block. This is particularly useful for creating sliding effects and dynamic positioning animations. Syntax selector { animation: animation-name duration timing-function iteration-count; bottom: initial-value; position: absolute | relative | fixed; } @keyframes animation-name { percentage { bottom: target-value; } } Example: Animating Bottom Property ...
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 MoreSet how auto-placed items are inserted in the CSS grid
The CSS grid-auto-flow property controls how auto-placed grid items are inserted in the grid container. It determines whether items flow into rows or columns and how they fill available spaces. Syntax selector { grid-auto-flow: value; } Possible Values ValueDescription rowItems are placed by filling each row (default) columnItems are placed by filling each column denseItems fill holes earlier in the grid row denseCombines row flow with dense packing column denseCombines column flow with dense packing Example: Column Flow The following example demonstrates items flowing into columns ...
Read MoreCSS all Property
The CSS all property is a shorthand property that resets all CSS properties to their initial, inherited, or unset values. It provides a convenient way to clear all styling from an element and start with a clean slate. Syntax selector { all: value; } Possible Values ValueDescription initialResets all properties to their initial values inheritSets all properties to inherit from parent element unsetResets properties to inherit if inheritable, otherwise to initial revertResets properties to browser default values Example: Using all: inherit The following example demonstrates how ...
Read MoreBlending mode of each background layer with CSS
The CSS background-blend-mode property sets the blending mode of each background layer. It defines how background images should blend with each other and with the background color. Syntax selector { background-blend-mode: blend-mode-value; } Possible Values ValueDescription normalDefault blending mode, no blending effect multiplyMultiplies colors, resulting in darker images screenInverts, multiplies, and inverts again, resulting in lighter images overlayCombines multiply and screen modes darkenKeeps the darkest color from each layer lightenKeeps the lightest color from each layer differenceSubtracts colors to create high contrast effects Example: Darken Blend Mode ...
Read More