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 Tarun Singh
Page 4 of 9
How to style scrollbar thumb for the webkit browsers and what are components of scrollbar?
Scrollbars are essential UI components that allow users to navigate through content that extends beyond the visible area. Webkit-based browsers (Chrome, Safari, Edge) provide special CSS pseudo-elements to style scrollbar components, including the draggable thumb handle. Syntax ::-webkit-scrollbar { width: value; } ::-webkit-scrollbar-thumb { background: color; border-radius: value; } ::-webkit-scrollbar-track { background: color; } Scrollbar Components Up Arrow ...
Read MoreHow to style label associated with selected radio input and checked checkboxes using CSS?
To style label associated with selected radio input and checked checkboxes using CSS, is important task in forms as it makes it easy to identify the option selected by user. In this article, we will understand how to style label associated with selected radio input and checked checkboxes using CSS using :checked pseudo class selector and CSS combinators. Syntax /* Style label next to checked radio button */ input[type="radio"]:checked + label { /* CSS styles */ } /* Style label next to checked checkbox */ input[type="checkbox"]:checked + label { ...
Read MoreHow to style icon color, size, and shadow by using CSS
Icons are an essential part of any website or application, as they provide users a quick and easy way to understand and interact with content. Using CSS, we can style icon color, size, and shadow to create a unique and visually appealing user experience instead of relying on default styling. In this article, we will learn different methods to style icons using CSS properties to customize their appearance. Syntax /* For Font Icons */ .icon { color: value; font-size: value; text-shadow: horizontal vertical blur ...
Read MoreHow to specify that an input element should be disabled?
When building forms on webpages, you sometimes need to disable input fields to prevent user interaction. This is useful for preventing users from accessing certain fields until previous steps are completed, or to avoid invalid data submission. CSS provides the :disabled pseudo-class and attribute selector to style disabled input elements, making it clear to users that these fields are not interactive. Syntax input:disabled { /* styles for disabled inputs */ } input[disabled] { /* alternative selector */ } Method 1: Using HTML disabled Attribute with ...
Read MoreHow to select “last child” with a specific class using CSS?
To select the last child with a specific class using CSS is a simple process using CSS pseudo-class selectors. In this article, we will explore three different approaches to target the last element with a specific class. Syntax /* Using :last-child */ .class-name:last-child { property: value; } /* Using :nth-last-child() */ .class-name:nth-last-child(1) { property: value; } /* Using :last-of-type */ .class-name:last-of-type { property: value; } Method 1: Using :last-child Selector The CSS :last-child pseudo-class selector targets the last element inside ...
Read MoreHow to secure cascading style sheets?
Web development heavily relies on Cascading Style Sheets (CSS) for styling and layout. However, CSS can be vulnerable to security threats that attackers exploit to inject malicious code, steal sensitive information, or perform other harmful activities. This article covers essential techniques to secure your CSS and protect your web applications from potential attacks. Syntax Secure CSS implementation involves multiple layers of protection − /* Secure CSS practices */ selector { property: secure-value; } /* Avoid external URLs in CSS */ /* Validate all user-generated content */ /* Use Content Security Policy ...
Read MoreHow to style a href links in React using Tailwind CSS?
React is a popular JavaScript library for building user interfaces. When creating React applications, styling components is crucial for creating visually appealing interfaces. Tailwind CSS is a utility-first CSS framework that provides pre-built classes for rapid UI development. In this article, we will learn how to style anchor tags (href links) in React using Tailwind CSS with different approaches and utility classes. Installation Requirements: To follow along with the examples, you need to include Tailwind CSS in your HTML file. We'll be using the CDN approach for simplicity in our demonstrations. Syntax Link ...
Read MoreHow to select all children of an element except the last child using CSS?
To select all children of an element except the last child using CSS we will be understanding two different approaches. Each approach will be using CSS pseudo-class selectors to perform the required task. In this article, we'll see how to select all children of an element except the last child in CSS with different approaches. We will be discussing each approach in detail with examples that will help you understand how they work. Syntax /* Method 1: Using :not() pseudo-class */ parent > *:not(:last-child) { /* styles */ } /* Method ...
Read MoreHow to select all child elements recursively using CSS?
To select all child elements recursively using CSS, we use the universal selector (*) with a parent selector. This technique allows you to target all descendant elements, regardless of their nesting level. Syntax /* Select direct children only */ .parent > * { property: value; } /* Select all descendants recursively */ .parent * { property: value; } Example 1: Direct Child Elements Only This example selects only the direct children of the parent container using the child combinator (>) − ...
Read MoreHow to Upload Image into Database and Display it using PHP
In modern web applications, it is common to store images in databases for various reasons, such as security, easy management, and scalability. PHP provides an easy way to upload images to databases and display them on web pages. In this article, we will learn how to upload images into database and display them using PHP. We will implement the following functionality − HTML form to upload an image Upload an image to the server using PHP Store file data in the database using PHP and MySQL Retrieve images from the database and display on the web page ...
Read More