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 Arjun Thakur
Page 24 of 75
CSS transition-duration property
The CSS transition-duration property is used to set the duration of CSS transitions. It specifies how long a transition takes to complete when an element changes from one state to another. Syntax selector { transition-duration: time; } Possible Values ValueDescription timeDuration in seconds (s) or milliseconds (ms) 0sNo transition (default) inheritInherits from parent element Example: Basic Transition Duration The following example demonstrates a 2-second transition duration on hover − .box { ...
Read MoreBuild a radial gradient with the shape of a circle
The CSS radial-gradient property allows you to create circular gradient effects by specifying the circle shape parameter. This creates a gradient that radiates outward from a central point in a perfect circular pattern. Syntax selector { background: radial-gradient(circle, color1, color2, color3, ...); } Example: Circle-Shaped Radial Gradient The following example creates a circular radial gradient with multiple colors − #demo { height: 300px; width: ...
Read MoreSelects all elements with a lang attribute value starting with "en" with CSS
The CSS [attribute|="value"] selector is used to select elements with a specified attribute value that starts with the given value. This selector is particularly useful for language codes, where you want to select elements with lang attributes starting with "en" (like "en", "en-US", "en-GB", etc.). Syntax [attribute|="value"] { /* CSS properties */ } Example The following example selects all elements with a lang attribute value starting with "en" and applies an orange border ? ...
Read MoreAdd a background color to the form input with CSS
The CSS background-color property is used to add background color to form input elements. This property allows you to customize the appearance of input fields by setting their background to any color value. Syntax input { background-color: value; } Possible Values ValueDescription color namePredefined color names like red, blue, gray hex codeHexadecimal values like #FF5733, #000000 RGBRGB values like rgb(255, 87, 51) transparentMakes the background transparent Example The following example applies a gray background color to text input fields − ...
Read MoreHow to create a responsive image gallery with CSS
A responsive image gallery adapts to different screen sizes using CSS media queries and flexible layouts. This allows images to display properly on desktop, tablet, and mobile devices by adjusting the number of columns and image sizes automatically. Syntax .gallery-container { width: percentage; float: left; } @media only screen and (max-width: breakpoint) { .gallery-container { width: new-percentage; } } Example The following example creates a responsive image gallery that ...
Read MoreRole of CSS :target Selector
The CSS :target selector is a powerful pseudo-class that targets an element whose id matches the fragment identifier in the current URL. This allows you to style elements when they are directly accessed through anchor links, creating smooth navigation highlighting and interactive content sections. Syntax :target { /* CSS properties */ } How :target Works When a user clicks on a link with a fragment identifier (like #section1), the browser navigates to the element with that id. The :target selector automatically applies styles to that specific element, making it visually ...
Read MoreCSS position: sticky;
The CSS position: sticky property creates a hybrid positioning behavior where an element toggles between relative and fixed positioning depending on the scroll position. The element is positioned relative until it reaches a specified threshold, then becomes fixed in place. Syntax selector { position: sticky; top: value; } How It Works A sticky element behaves like position: relative until the viewport reaches the defined offset position. Once the threshold is met, it becomes position: fixed and sticks to that position while scrolling. Example: Basic Sticky ...
Read MoreRole of CSS :only-child Selector
The CSS :only-child selector targets elements that are the only child of their parent element. It styles elements when they have no siblings, making it useful for applying special formatting to isolated elements. Syntax element:only-child { property: value; } Example: Styling Only Child Paragraphs The following example demonstrates how the :only-child selector applies styles only to paragraphs that are the sole child of their parent − p:only-child { background-color: orange; ...
Read MoreRole of CSS :invalid Selector
The CSS :invalid pseudo-class selector targets form elements that fail validation constraints. It automatically applies styles to input fields when their values don't meet the specified requirements, providing immediate visual feedback to users. Syntax selector:invalid { property: value; } Example: Email Validation Styling The following example applies a red background to an email input when the value is invalid − input:invalid { background-color: #ffcccc; ...
Read MoreUsage of CSS :focus pseudo-class
The CSS :focus pseudo-class is used to apply styles to form elements when they receive focus (when a user clicks on them or navigates to them using the keyboard). This is particularly useful for improving user experience and accessibility. Syntax selector:focus { property: value; } Example The following example demonstrates how to use the :focus pseudo-class to highlight input fields with an orange background when they are focused − input:focus { ...
Read More