CSS Articles

Found 1,299 articles

How to Change the Thickness of hr Tag using CSS?

CSS
Rekha Mishra
Rekha Mishra
Updated on 15-Mar-2026 10K+ Views

The tag is used to draw horizontal lines on a web page. This tag is one of the most useful HTML tags for separating content by drawing a horizontal line between different sections. In this guide, we will learn how to change the thickness of an tag using CSS with different methods. Syntax hr { height: value; border: value; } The hr Tag in HTML The tag stands for horizontal rule. It is a self-closing tag that creates a visual divider between sections ...

Read More

The impact of quick commerce on traditional grocery stores

Hornet dynamics
Hornet dynamics
Updated on 15-Mar-2026 326 Views

In today's digital era, Quick Commerce has become the fastest process of delivering groceries in just 10 to 30 minutes. The growing demand for convenience and speed has wholly transformed the retail industry. This article explores the impact of Q-commerce on traditional grocery retail and what it means for the future of shopping. What is Quick Commerce? Quick Commerce (Q-commerce) refers to instant commerce, where customers can receive products or services within 10-30 minutes of placing an order. This model relies on hyperlocal delivery networks and strategically located micro-warehouses to fulfill orders at lightning speed. The Impact ...

Read More

How to add gradient borders in css?

CSS
Thanasekar K
Thanasekar K
Updated on 15-Mar-2026 418 Views

Gradient borders add a modern and visually appealing touch to web elements, making them stand out. However, achieving this effect in CSS isn't straightforward because the border property doesn't natively support gradients. This article explores practical workarounds to implement gradient borders using three different methods. Syntax /* Method 1: Using border-image */ selector { border-width: 5px; border-style: solid; border-image: linear-gradient(direction, color1, color2) 1; } /* Method 2: Background and Padding */ .parent { background: linear-gradient(direction, color1, color2); ...

Read More

Tic Tac Toe Game with HTML, CSS, and JavaScript

Souvik Chakraborty
Souvik Chakraborty
Updated on 15-Mar-2026 2K+ Views

Tic Tac Toe is a well-known two-player board game where players take turns placing their marks (X or O) on a 3x3 grid. The first player to get three marks in a row horizontally, vertically, or diagonally wins. If all cells are filled without a winner, the game ends in a draw. In this article, we will build a complete Tic Tac Toe game using HTML, CSS, and JavaScript. The game includes features like reset, undo, sound effects, and a responsive design. Game Features HTML Structure − Creates a 3x3 grid using div elements where each ...

Read More

Learn how to generate a Resume with HTML and CSS

Souvik Chakraborty
Souvik Chakraborty
Updated on 15-Mar-2026 680 Views

Creating a professional resume with HTML and CSS allows you to build an attractive, customizable document that can be easily shared digitally. A well-structured resume showcases your skills and experience effectively while maintaining a professional appearance across different devices. Syntax /* Basic Resume Layout Structure */ .container { display: grid; grid-template-columns: 1fr 2fr; max-width: 1000px; margin: 0 auto; } .left-section { background-color: #333; color: white; padding: 20px; } ...

Read More

How to Show a Word Document in an HTML Page Using JavaScript?

Souvik Chakraborty
Souvik Chakraborty
Updated on 15-Mar-2026 2K+ Views

To show a Word document in an HTML page using JavaScript is important where you are required to read Word documents within your browser. This article will discuss three approaches to accomplishing this in JavaScript, allowing you to load .docx files and display them on your webpage to the user. In this article, our task is to show a word document in an HTML page using JavaScript. We will be either using a .docx file from our system or using URL. Approaches to Show Documents in HTML Using Mammoth.js Library Using iFrame with Microsoft Office Viewer ...

Read More

How to Set an HTML Date Picker Max Date to Today?

Souvik Chakraborty
Souvik Chakraborty
Updated on 15-Mar-2026 2K+ Views

In HTML, a date picker is a useful input control that enables users to select specific dates on websites or forms. By default, date pickers accept any date, but you can limit the selectable date range using the max attribute to restrict selection to today or earlier dates. Syntax What is a Date Picker? A date picker is a user interface component that allows users to select dates through a calendar interface. It's commonly used in forms for applications like reservation systems, scheduling software, or collecting birthdates. Setting Max Date to Today ...

Read More

How to repair broken pictures in HTML?

Souvik Chakraborty
Souvik Chakraborty
Updated on 15-Mar-2026 360 Views

Images play an important role in increasing user interest in content and enriching the appearance of websites. However, broken images can occur due to wrong links, missing files, or server problems, which negatively affects user experience. In this article, we will explore how to repair broken pictures in HTML using different approaches to ensure graceful handling of image loading failures. Approaches to Repair Broken Pictures Using alt Attribute Using onerror Event Using CSS Fallback Using alt Attribute The alt attribute provides alternative text that displays when an image cannot be loaded. This text ...

Read More

How to Hide Scrollbar Using CSS?

Souvik Chakraborty
Souvik Chakraborty
Updated on 15-Mar-2026 525 Views

To hide scrollbar using CSS, we will understand different approaches. Scrollbars are core components of web browsers that allow users to navigate content areas larger than the viewable window. We can hide scrollbars while maintaining scrolling functionality using the overflow property. Syntax selector { overflow-x: value; overflow-y: value; } /* Or shorthand */ selector { overflow: value; } Possible Values ValueDescription visibleContent is not clipped, may render outside the element hiddenContent is clipped and scrollbars are hidden scrollContent is clipped but ...

Read More

How to Separate Header from Body in HTML?

Souvik Chakraborty
Souvik Chakraborty
Updated on 15-Mar-2026 619 Views

To separate header from body in HTML, you can create visual and structural distinction between the header section and the main content. The header typically contains navigation, titles, and introductory elements, while the body holds the primary content of the webpage. In this article, we will explore different approaches to effectively separate the header from the body content using HTML structure and CSS styling. Approaches to Separate Header from Body Using Semantic HTML Tags Using CSS Styling Using Multiple Headers Method 1: Using Semantic HTML Tags HTML5 provides semantic tags that help create ...

Read More
Showing 1–10 of 1,299 articles
« Prev 1 2 3 4 5 130 Next »
Advertisements