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 95 of 130
Selects all elements inside elements with CSS
The descendant selector (space-separated) in CSS allows you to select all elements of a specific type that are nested inside another element, regardless of how deeply nested they are. Syntax ancestor descendant { property: value; } Where ancestor is the parent element and descendant is the child element you want to style. Example The following example demonstrates how to style all elements that are inside elements − div p { ...
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 MoreArrow to the left of the tooltip with CSS
Creating an arrow pointing to the left of a tooltip helps users understand that the tooltip relates to the element they're hovering over. This arrow is created using CSS pseudo-elements and border properties to form a triangular shape. Syntax .tooltip .tooltip-text::after { content: ""; position: absolute; border-width: size; border-style: solid; border-color: transparent color transparent transparent; } Example The following example creates a tooltip with an arrow pointing to the left − ...
Read MoreCreate rounded image with CSS
Creating rounded images in CSS is achieved using the border-radius property. This property allows you to round the corners of any element, including images, making them appear circular or with softly rounded edges. This technique is commonly used for profile pictures, thumbnails, and decorative elements. Syntax img { border-radius: value; } Possible Values ValueDescription 50%Creates a perfect circle (most common for rounded images) lengthSpecific radius in px, em, rem, etc. %Percentage of the element's dimensions Example 1: Circular Image The following example creates a perfectly circular ...
Read MoreHow to select elements with an attribute value containing a specified word with CSS?
The CSS [attribute~="value"] selector allows you to select elements where a specific attribute contains a particular word as part of a space-separated list of values. This is particularly useful when dealing with attributes like class, alt, or custom data attributes that may contain multiple words. Syntax [attribute~="word"] { property: value; } How It Works The ~= operator matches elements where the specified attribute contains the exact word as a complete, space-separated token. For example, if an element has alt="Online Tutorials Library", it will match [alt~="Tutorials"] but not [alt~="Tutorial"]. Example ...
Read MoreCSS animation-direction property
The CSS animation-direction property is used to set whether an animation should be played forwards, backwards, or in alternate cycles. This property allows you to control the playback direction of keyframe animations. Syntax selector { animation-direction: value; } Possible Values ValueDescription normalAnimation plays forward (default) reverseAnimation plays backward alternateAnimation plays forward, then backward alternate-reverseAnimation plays backward, then forward Example: Reverse Animation The following example demonstrates the reverse value, which plays the animation backward − div { ...
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 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 MoreSet right tooltip with CSS
To create a right tooltip in CSS, you position the tooltip to appear on the right side of an element. The key is using the left property with a value of 100% to push the tooltip completely to the right of its parent element. Syntax .tooltip .tooltiptext { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); } Example The following example creates a tooltip that appears on the right side when you hover over the text − ...
Read MoreHow to position tooltips correctly with CSS
CSS tooltip positioning allows you to control exactly where tooltips appear relative to their trigger elements. By using positioning properties like top, right, bottom, and left, you can create tooltips that display in any direction. Syntax .tooltip { position: relative; } .tooltip .tooltip-text { position: absolute; top: value; left: value; right: value; bottom: value; } Method 1: Right-Positioned Tooltip The following example positions the tooltip to the right of ...
Read More