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 23 of 75
How to work with Flexbox elements in CSS?
CSS Flexbox is a layout method that allows you to arrange elements in a flexible container. To work with Flexbox, you need to define a flex container (parent element) using display: flex and place flex items (child elements) inside it. Syntax .container { display: flex; } Basic Flexbox Setup The following example creates a flex container with multiple flex items arranged horizontally − .mycontainer { display: flex; ...
Read MoreCSS Grid Elements
CSS Grid Elements consist of a grid container (parent element) and grid items (child elements). The grid container is defined using display: grid, while all direct children automatically become grid items arranged within the grid layout. Syntax .grid-container { display: grid; /* Grid properties */ } .grid-item { /* Item styling */ } Grid Structure A CSS Grid consists of − Grid Container: The parent element with display: grid Grid Items: Direct children of the grid container ...
Read MoreCSS Grid Gaps
The CSS Grid layout allows you to create gaps between rows and columns in a grid container. These gaps provide spacing between grid items, making your layout more visually appealing and easier to read. Column Gap Row Gap ...
Read MoreFade in on Button hover with CSS
CSS fade-in effects on button hover create smooth visual transitions that enhance user interaction. This effect gradually increases a button's opacity from a lower value to full opacity when the user hovers over it. Syntax selector { opacity: initial-value; transition: duration; } selector:hover { opacity: final-value; } Example: Basic Fade-in on Hover The following example creates a button that fades in from 50% to full opacity on hover − ...
Read MoreHow to add a colored border to a button with CSS?
The CSS border property is used to add a colored border to HTML elements, including buttons. You can customize the border's width, style, and color to create various visual effects. Syntax selector { border: width style color; } Possible Values PropertyValuesDescription widthpx, em, rem, thin, medium, thickSets the border thickness stylesolid, dashed, dotted, double, grooveDefines the border style colorcolor names, hex, rgb, hslSets the border color Example: Dashed Blue Border The following example creates a button with a 3px dashed blue border − ...
Read MoreCSS object-fit Property Values
The CSS object-fit property is used to specify how an image or video should be resized to fit its container. This property is particularly useful when you need to maintain aspect ratios or control how content fills its allocated space. Syntax selector { object-fit: value; } Possible Values ValueDescription fillContent is stretched to completely fill the container (default value) containContent is scaled to maintain aspect ratio while fitting entirely within container coverContent is scaled to maintain aspect ratio while covering entire container (may be clipped) noneContent retains its original ...
Read MoreCenter an image with CSS
Centering an image in CSS can be accomplished using the display: block property combined with margin: 0 auto. This technique works by making the image a block-level element and then applying automatic left and right margins. Syntax img { display: block; margin: 0 auto; } Method 1: Using Block Display and Auto Margins The most common method to center an image horizontally is to set display: block and use margin: 0 auto − .centered-image { ...
Read MoreSelects every element that are preceded by a element with CSS
The CSS general sibling selector (~) selects elements that are siblings and come after a specified element. The syntax element1 ~ element2 targets all element2 elements that are preceded by element1 at the same level in the HTML structure. Syntax element1 ~ element2 { /* CSS properties */ } Example: Selecting Lists After Paragraphs The following example selects all elements that are preceded by a element − p ~ ul ...
Read MoreSet a CSS style for the element when the animation is not playing
The CSS animation-fill-mode property controls how an element's styles are applied before and after an animation runs. This property determines which styles are applied when the animation is not playing. Syntax selector { animation-fill-mode: value; } Possible Values ValueDescription noneNo styles are applied before or after animation (default) forwardsKeeps the final keyframe styles after animation ends backwardsApplies the first keyframe styles before animation starts bothApplies both forwards and backwards fill modes Example: Using Backwards Fill Mode The following example demonstrates how animation-fill-mode: backwards applies the starting ...
Read MoreSelects all elements that are placed immediately after elements with CSS
The CSS adjacent sibling selector (element+element) selects elements that are placed immediately after a specified element. This selector only targets the first element that directly follows the specified element at the same level in the DOM hierarchy. Syntax element1 + element2 { /* CSS properties */ } Where element1 is the preceding element and element2 is the element that immediately follows it. Example The following example demonstrates how to style paragraphs that immediately follow div elements − div + ...
Read More