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 mkotla
Page 4 of 8
Selects every element whose href attribute value ends with ".htm" with CSS
The CSS [attribute$="value"] selector targets elements whose specified attribute value ends with a particular string. In this case, we're selecting elements whose href attribute ends with ".htm". Syntax [attribute$="value"] { /* CSS properties */ } Example The following example selects all anchor elements whose href attribute ends with ".htm" and applies orange border styling − [href$=".htm"] { border: 5px solid ...
Read MoreSet a delay for the CSS transition effect
The CSS transition-delay property is used to specify a delay before a transition effect begins. This allows you to control when the transition starts after the trigger event occurs. Syntax selector { transition-delay: time; } Possible Values ValueDescription timeSpecifies the delay in seconds (s) or milliseconds (ms) 0No delay (default) Example The following example demonstrates a 2-second delay before the width transition begins − div { width: 150px; ...
Read MoreUsage of CSS [attribute] Selector
The CSS [attribute] selector is used to select elements that contain a specific attribute, regardless of the attribute's value. This is useful for styling elements based on the presence of attributes like alt, target, title, or any custom attributes. Syntax [attribute] { /* CSS properties */ } Example: Selecting Images with Alt Attributes The following example applies a border to all images that have an alt attribute − img[alt] { border: 3px ...
Read MoreMethods of 3D transforms with CSS3
CSS 3D transforms allow you to manipulate elements in three-dimensional space using the transform property. These methods enable translation, rotation, and scaling along the x, y, and z axes to create depth and perspective effects. Syntax selector { transform: transform-function(values); transform-style: preserve-3d; /* Optional: preserves 3D space for child elements */ } 3D Transform Methods MethodDescription matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)Transforms element using 16 values of a 4x4 matrix translate3d(x, y, z)Moves element along ...
Read MoreWhat is a CSS Selector?
CSS selectors are patterns used to select and style HTML elements. They act as a bridge between your HTML structure and CSS styles, allowing you to target specific elements or groups of elements on your webpage. Syntax selector { property: value; } Types of CSS Selectors Selector Type Syntax Description Element Selector p Selects all elements of a specific type Class Selector .demo Selects all elements with class="demo" ID Selector #myid Selects the element with id="myid" Universal Selector * Selects ...
Read MoreAdd different styles to hyperlinks using CSS
CSS allows you to apply different styles to hyperlinks using pseudo-classes. You can change colors, fonts, backgrounds, and other properties based on the link's state (unvisited, visited, or hovered). Syntax a:link { /* unvisited link */ } a:visited { /* visited link */ } a:hover { /* mouse over link */ } a:active { /* selected link */ } Pseudo-Class States Pseudo-ClassDescription :linkUnvisited link (default state) :visitedLink that has been clicked/visited :hoverLink when mouse hovers over it :activeLink at the moment it is clicked Example: Different Link Styles The following ...
Read MoreRole of CSS :nth-last-of-type(n) Selector
The CSS :nth-last-of-type(n) selector targets elements based on their position among siblings of the same type, counting from the last element backwards. It's particularly useful for styling specific elements without adding classes or IDs. Syntax :nth-last-of-type(n) { /* CSS properties */ } Possible Values ValueDescription numberSelects the nth element from the end (1, 2, 3, etc.) evenSelects even-positioned elements from the end oddSelects odd-positioned elements from the end formulaUses expressions like 2n+1, 3n, etc. Example: Selecting Second Last Element The following example selects the second last ...
Read MoreExample of key frames with left animation using CSS3
The CSS @keyframes rule allows you to create smooth animations by defining the intermediate steps between the start and end of an animation. This example demonstrates a left-sliding animation where an element moves from right to left across the screen. Syntax @keyframes animation-name { from { /* starting CSS properties */ } to { /* ending CSS properties */ } } selector { ...
Read MoreCSS Text Shadow
The CSS text-shadow property adds shadow effects to text. You can create simple shadows, colored shadows, blurred shadows, and even multiple shadows for creative text effects. Syntax selector { text-shadow: h-offset v-offset blur-radius color; } Possible Values ValueDescription h-offsetHorizontal offset of the shadow (required) v-offsetVertical offset of the shadow (required) blur-radiusBlur radius of the shadow (optional) colorColor of the shadow (optional, defaults to current text color) Example: Various Text Shadow Effects The following example demonstrates different text shadow variations − ...
Read MoreCSS Relative units
CSS relative units are units whose values are relative to another measurement. Unlike absolute units, relative units scale based on their context, making them ideal for responsive design. The size of elements using relative units will adapt based on their parent element or viewport size. Syntax selector { property: value unit; } Common Relative Units UnitAbbreviationDescription Percent%Relative to the parent element EmemRelative to the font-size of the element Root emremRelative to the font-size of the root element ExexRelative to the x-height of the font CharacterchRelative to the width of ...
Read More