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 19 of 73
Set 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 MoreAnimate CSS border-top-left-radius property
The CSS border-top-left-radius property can be animated to create smooth transitions or dynamic effects. This property controls the rounding of the top-left corner of an element. Syntax @keyframes animationName { from { border-top-left-radius: initial-value; } to { border-top-left-radius: final-value; } } selector { animation: animationName duration timing-function iteration-count; } Example: Animating border-top-left-radius on a Box The following ...
Read MoreUsage of CSS grid-gap property
The CSS grid-gap property is used to set the spacing between grid rows and columns in a CSS Grid layout. This property provides a convenient shorthand for defining both row and column gaps simultaneously. Syntax selector { grid-gap: row-gap column-gap; } /* Or using single value for both */ selector { grid-gap: gap-value; } Possible Values ValueDescription lengthDefines the gap size in px, em, rem, etc. percentageDefines the gap as a percentage of the container row-gap column-gapTwo values: first for rows, second for columns ...
Read MoreUse CSS max-width property for responsive image
The CSS max-width property is essential for creating responsive images that scale down automatically based on their container size. When set to 100%, it ensures images never exceed their parent element's width while maintaining their aspect ratio. Syntax img { max-width: 100%; height: auto; } How It Works The max-width: 100% property prevents images from being larger than their container, while height: auto maintains the image's proportions by automatically adjusting the height based on the width. Example: Responsive Image The following example demonstrates how ...
Read MoreShorthand property for setting all the column-rule-* properties
The CSS column-rule property is a shorthand property for setting all the column rule properties in one declaration. It allows you to define the width, style, and color of the line that appears between columns in a multi-column layout. Syntax selector { column-rule: width style color; } Possible Values PropertyValuesDescription column-rule-widththin, medium, thick, lengthSets the width of the column rule column-rule-stylenone, solid, dashed, dotted, double, etc.Sets the style of the column rule column-rule-colorcolor name, hex, rgb, rgbaSets the color of the column rule Example The following ...
Read MoreSelects all elements and all elements with CSS
The CSS comma selector allows you to apply the same styles to multiple elements by separating them with commas. This is useful when you want different element types to share the same styling rules. Syntax selector1, selector2, selector3 { property: value; } Example: Styling Multiple Elements The following example applies the same color and background styling to both and elements − div, p { color: blue; ...
Read MoreUsage of CSS transition-timing-function property
The CSS transition-timing-function property controls the speed curve of a transition effect. It determines how the transition progresses over time, allowing you to create smooth, natural-looking animations or more dramatic effects. Syntax selector { transition-timing-function: value; } Possible Values ValueDescription linearConstant speed throughout the transition easeDefault. Slow start, fast middle, slow end ease-inSlow start, gradually speeds up ease-outFast start, gradually slows down ease-in-outSlow start and end, fast middle cubic-bezier()Custom timing function using cubic bezier curve Example: Comparing Timing Functions The following example demonstrates different timing functions ...
Read MoreSelect elements whose attribute value begins with a specified value with CSS
The CSS attribute selector [attribute^="value"] is used to select elements whose attribute value begins with a specified value. This selector is particularly useful when you want to target elements with attributes that start with a common prefix. Syntax [attribute^="value"] { /* CSS properties */ } Example: Selecting Images with Alt Text Starting with "Tutor" The following example selects all images whose alt attribute value begins with "Tutor" and applies a blue border − [alt^="Tutor"] { ...
Read MoreSet an animation with the same speed from start to end with CSS
The CSS animation-timing-function property with the linear value creates animations that maintain the same speed from start to end, without any acceleration or deceleration. Syntax selector { animation-timing-function: linear; } Example: Linear Animation The following example demonstrates a box moving horizontally with constant speed − .container { position: relative; height: 150px; background-color: #f0f0f0; ...
Read MoreCSS animation-iteration-count property
The CSS animation-iteration-count property specifies the number of times an animation should be played. By default, animations run once, but you can control how many times they repeat. Syntax selector { animation-iteration-count: value; } Possible Values ValueDescription numberSpecifies how many times the animation should be played (e.g., 1, 2, 3) infiniteThe animation will repeat forever Example: Finite Iteration Count The following example shows an animation that runs exactly 3 times − .box { ...
Read More