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 51 of 130
How to change bullet colors for lists with CSS?
To change bullet colors for lists, use the ::before pseudo-element selector. You need to set the list-style to none first, then create custom colored bullets using CSS content. Syntax ul { list-style: none; } ul li::before { content: "\2022"; color: desired-color; } Method 1: Using Unicode Bullet The most common approach is to use the unicode bullet character (\2022) with the ::before pseudo-element − ul { ...
Read MoreChanging Column Width Based on Screen Size using CSS
To change the column width based on screen size, use CSS media queries. Media queries allow you to apply different styles for different devices and screen sizes such as tablets, mobiles, and desktops. Syntax @media only screen and (max-width: value) { selector { width: value; } } Setting Initial Column Width First, create a column element and set its initial width using the width property − .column { ...
Read MoreSetting the Location Color Stops using CSS
CSS linear gradients allow you to create smooth color transitions between multiple colors. The linear-gradient() function lets you control the exact position where each color starts and stops using color stops. Syntax background-image: linear-gradient(direction, color-stop1, color-stop2, ...); Color stops can be specified with percentages (0% to 100%) or absolute lengths (px, em, rem) to control where each color begins and ends in the gradient. Example 1: Evenly Spaced Color Stops When no percentages are specified, colors are distributed evenly across the gradient − ...
Read MoreCSS Opacity that Works in All Browsers
The CSS opacity property controls the transparency level of an element, where 1 means fully opaque and 0 means fully transparent. While modern browsers support the standard opacity property, older browsers require vendor-specific prefixes and filters for cross-browser compatibility. Syntax selector { opacity: value; } Where value is a number between 0 (fully transparent) and 1 (fully opaque). Cross-Browser Compatibility To ensure opacity works across all browsers, including legacy versions, use the following fallback approach − .transparent { filter: alpha(opacity=30); /* IE ...
Read MorePseudo-classes and all CSS Classes
CSS pseudo-classes are keywords added to selectors that specify a special state of the selected elements. They allow you to style elements when they're in a particular state like hover, focus, active, or being the first child of their parent. Syntax selector:pseudo-class { property: value; } Common Pseudo-classes The following are the most commonly used pseudo-classes − Pseudo-classDescription :hoverSelects elements when mouse is over them :activeSelects the active link while being clicked :focusSelects the element that currently has focus :visitedSelects all visited links :linkSelects all unvisited links :first-childSelects ...
Read MoreSpecify Word Breaking Rules using CSS3
To specify word breaking rules in CSS3, use the word-break property. This property controls how words should break when they reach the end of a line, particularly useful when dealing with long words that might overflow their container. Syntax word-break: value; Possible Values ValueDescription normalUses default line break rules (breaks only at whitespace and hyphens) break-allBreaks words at any character to prevent overflow break-wordBreaks long words at arbitrary points to prevent overflow keep-allPrevents breaking in Chinese, Japanese, and ...
Read MoreAdvanced Selectors in CSS
Advanced CSS selectors provide powerful ways to target specific HTML elements based on their relationships, attributes, and positions. These selectors go beyond basic element, class, and ID selectors to offer more precise control over styling. Syntax /* Adjacent Sibling Selector */ element1 + element2 { } /* General Sibling Selector */ element1 ~ element2 { } /* Direct Child Selector */ parent > child { } /* Attribute Selector */ element[attribute="value"] { } /* Nth-of-type Selector */ element:nth-of-type(n) { } Types of Advanced Selectors SelectorSyntaxDescription Adjacent SiblingA + BSelects ...
Read MoreSetting the size of the radial gradients using CSS
The CSS radial-gradient() function creates a radial gradient as a background image. You can control the size of the gradient using specific keywords or exact measurements to achieve different visual effects. Syntax background-image: radial-gradient(shape size at position, color1, color2, ...); Size Values ValueDescription closest-sideGradient ends at the side of the box closest to the center farthest-sideGradient ends at the side of the box farthest from the center closest-cornerGradient ends at the corner closest to the center farthest-cornerGradient ends at the corner farthest from the center (default) lengthSpecific size in pixels, ems, or percentages ...
Read MoreHow to create CSS3 Transition Effects?
CSS3 transitions allow you to create smooth animations between different property values over a specified duration. The transition property enables gradual changes when elements change state, such as on hover, focus, or through JavaScript. Syntax selector { transition: property duration timing-function delay; } Transition Properties PropertyDescriptionExample Values transition-propertySpecifies which CSS property to animatewidth, height, all transition-durationDefines how long the transition takes2s, 500ms, 0.3s transition-timing-functionControls the speed curveease, linear, ease-in-out transition-delayDelays the start of transition0.5s, 200ms Example: Width Transition on Hover This example demonstrates a smooth width ...
Read MoreWorking with CSS3 3D Transform Functions
CSS3 3D transform functions allow you to move, rotate, and scale elements along the x-axis, y-axis, and z-axis in three-dimensional space. These functions provide powerful capabilities for creating depth and perspective effects on web pages. Syntax selector { transform: transform-function(values); } 3D Transform Functions Function Description matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) Transforms the element using 16 values of 4x4 matrix translate3d(x, y, z) Moves the element along x-axis, y-axis and z-axis ...
Read More