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 AmitDiwan
Page 493 of 840
Using CSS :placeholder-shown to Customize Styles for Empty Text Input
The CSS :placeholder-shown pseudo-class is used to style input elements when they are displaying placeholder text. This pseudo-class allows you to customize the appearance of empty text fields that show placeholder hints to users. Syntax input:placeholder-shown { /* CSS properties */ } Method 1: Setting Border Color You can change the border color of input fields when they display placeholder text using the border-color property − input { padding: 10px; ...
Read MoreHow to Create a Checkmark / Tick with CSS
Creating a checkmark (tick) symbol with pure CSS is useful for custom form controls, success indicators, and interactive elements. CSS allows us to create checkmarks using borders, pseudo-elements, or transforms without requiring icon fonts or images. Syntax .checkmark { /* Create using borders and rotation */ border-right: 2px solid color; border-bottom: 2px solid color; transform: rotate(45deg); } Method 1: Using Borders and Transform This method creates a checkmark by styling a div with bottom and right borders, then ...
Read MoreDifference Between Pseudo-Class and Pseudo-Element in CSS
CSS pseudo-classes and pseudo-elements are powerful selectors that allow you to style elements based on their state or create virtual elements. Understanding the difference between them is crucial for effective CSS styling. Syntax Pseudo-classes use a single colon (:) while pseudo-elements use a double colon (::) − /* Pseudo-class syntax */ selector:pseudo-class { property: value; } /* Pseudo-element syntax */ selector::pseudo-element { property: value; } Pseudo-Class A pseudo-class targets elements in a specific state or position, such as :hover, :active, :first-child, or :last-child. They ...
Read MoreHTML Tables with Fixed Header on Scroll in CSS
We can create HTML tables with fixed header on scroll using CSS. It helps to increase readability as user doesn't have to scroll everytime to check the table header. In this article, we will learn and understand two different approaches for HTML tables with fixed header on scroll in CSS. We have a table inside a div element with class name as container. Our task is to fix HTML table header on scroll using CSS. Syntax /* Method 1: Using position sticky */ th { position: sticky; top: ...
Read MoreCSS Selector to Select Elements Not Having Certain Class / Attribute / Type
Using the CSS :not() pseudo-class, we can refine our styling by selecting those elements which do not have a specific value or does not match a selector. Syntax selector:not(selector) { property: value; } Select Elements Not Having a Child Selector To select elements not having a child selector, use the :not pseudo-class in CSS. Here, we have a child selector. The CSS child selector is used to select all the child elements with a particular parent element. It selects all the elements that are children of i.e. ...
Read MoreLatest CSS Properties and APIs for Web Design in 2020
CSS continues to evolve with new properties and APIs that enhance web design capabilities. Here are some of the latest CSS features that provide developers with powerful tools for creating modern, responsive, and accessible websites. Key CSS Properties focus-within Pseudo-class The :focus-within pseudo-class selects elements that contain a focused element, improving focus accessibility for complex components. .form-group { padding: 20px; border: 2px solid #ccc; ...
Read MoreDisabling Pull-to-Refresh Feature on Mobile Browsers using CSS
The CSS overscroll-behavior property controls what happens when a user scrolls beyond the boundary of a scrollable area. On mobile browsers, this feature is particularly useful for disabling the pull-to-refresh gesture that occurs when users scroll past the top of a webpage. Syntax selector { overscroll-behavior: value; } Possible Values ValueDescription autoDefault browser behavior (allows pull-to-refresh) containPrevents scrolling from affecting parent elements noneCompletely disables overscroll effects including pull-to-refresh Example 1: Disabling Pull-to-Refresh on Body To disable pull-to-refresh on the entire page, apply overscroll-behavior: none to the ...
Read MoreCSS Updates - New Properties for Styling Text Decorations & Underlines
With the introduction of new text-decoration properties, we can now style text decorations with greater control and precision. The text-decoration property serves as shorthand for multiple decoration properties, while specific properties like text-underline-offset and text-decoration-skip-ink provide fine-grained control over underlines and text decoration behavior. Syntax selector { text-decoration: line style color thickness; } The text-decoration Shorthand Property The text-decoration property is shorthand for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness. Additional properties like text-decoration-skip-ink and text-underline-offset must be specified separately. Example Let us see an example to use the shorthand ...
Read MoreHow to Change Link Underline Color using text-decoration-color CSS?
The CSS text-decoration-color property is used to change the color of text decorations like underlines, overlines, and line-through effects. For links, this property allows you to customize the underline color independently from the text color. Syntax selector { text-decoration-color: value; } Possible Values ValueDescription color-nameSets the color using predefined names like red, blue, orange hex-valueSets the color using hexadecimal values like #FF5733 rgb()Sets the color using RGB values like rgb(255, 87, 51) inheritInherits the color from the parent element currentColorUses the current text color as decoration color ...
Read MoreCSS Latest Updates - Inner & Outer Values of display Property
The CSS display property now supports a two-value syntax that allows you to explicitly control both the outer and inner display types of an element. The outer display type determines how the element participates in flow layout, while the inner display type sets how the element's children are laid out. Syntax display: outer-value inner-value; Where outer-value can be block, inline, or run-in, and inner-value can be flow, flow-root, table, flex, grid, or ruby. Display Inline with Flow-Root The following example shows how to use inline flow-root to create an inline element that establishes ...
Read More