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 Dishebh Bhayana
40 articles
How to disable browser print options (headers, footers, margins) from the page with CSS?
We can control the print preview page's header, footer, and margin with CSS using the @page directive. This allows us to customize the layout and remove browser-generated print options like headers, footers, and default margins. When previewing a print page in the browser, you typically see extra information like the page title, date and time, and page numbers in the header and footer. There are also default margins applied to the page. We can disable these using CSS print styles. Syntax @media print { @page { margin: ...
Read MoreHow to create a printable webpage using CSS media queries?
We can create a printable webpage and control the styling in the print preview using the CSS @media print media query. This powerful CSS feature allows us to define specific styles that only apply when a user prints the webpage or views the print preview. We can control element visibility, adjust layouts, modify colors, and optimize content specifically for print format. Syntax @media print { /* CSS styles for print version */ selector { property: value; } ...
Read MoreHow to create numbering using counter-increment property in CSS?
The CSS counter-increment property is used to increase or decrease the counter values that we can display on a webpage using CSS. CSS counters are useful when we want to count the occurrences of an HTML element in a webpage. We will also use the counter-reset CSS property here, which helps us to reset or initialize the CSS counter value to a desired number. Syntax /* counter-increment */ selector { counter-increment: counter-name increment-value; } /* counter-reset */ selector { counter-reset: counter-name reset-value; } Here, the ...
Read MoreHow to automatically close all collapsible elements inside of the accordion when closing the accordion?
We will use the bootstrap accordion component in our article to demonstrate how to collapse all the children's accordions inside the parent accordion. An accordion is a collapsible component that helps to display an expand/collapse type of content on the webpage. In this article, we will use the Bootstrap 5 Accordion component to display a list of expandable/collapsible elements in a nested fashion. Now, first, we will listen to the "hide" collapse event by attaching an event listener to the parent accordion. After that, when the "hide" collapse event gets fired, we will find all the collapsible elements inside ...
Read MoreHow to Automatic Refresh a web page in a fixed time?
We can auto-refresh a web page by either using a "meta" tag with the "http-equiv" property, or by using the setInterval() browser API. Automatic refreshing websites have certain use cases − for example, while creating a weather-finding web application, we may want to refresh our website after a set interval of time to show the user the near-exact weather data for a location. Let's look at the 2 approaches below to understand how to set up an auto-refreshing website. Method 1: Using Meta Tag In this approach, we will use the "http-equiv" property of a "meta" tag ...
Read MoreHow to auto-suggest rich content while searching in Google AMP?
To implement auto-suggestion of rich content while typing in an input field, we use the amp-autocomplete component from Google AMP. This component provides dynamic suggestions as users type, enhancing the search experience. Required Scripts To create auto-suggest functionality in Google AMP, you need to include these scripts − Installation: Add these script tags to your HTML section to enable AMP autocomplete functionality. Basic Syntax {"items": ...
Read MoreHow to author fast-loading HTML pages?
Optimizing HTML pages for fast loading improves user experience, reduces server load, and enhances SEO rankings. This involves minimizing file sizes, reducing HTTP requests, and implementing modern loading techniques. Approach 1: Minimize File Size Remove unnecessary whitespace, comments, and inline styles to reduce file size. Use external CSS and JavaScript files instead of inline code. Bad Practice How to author fast-loading HTML pages? body { margin: 0; } h3 { color: blue; } ...
Read MoreHow to arrange text in multi-columns using CSS3?
The CSS column-count property is used to divide an HTML element's content into the specified number of columns, creating a multi-column layout similar to newspapers or magazines. This property is part of the CSS3 multi-column layout module. Syntax selector { column-count: number; } Here, number is a positive integer value that represents the number of columns you want to arrange the text into. Possible Values ValueDescription numberA positive integer specifying the number of columns autoDefault value. Number of columns determined by other properties Example 1: Three ...
Read MoreHow to apply styles to multiple classes at once?
In CSS, you can apply the same styles to multiple classes simultaneously using the class selector (.) and comma separator (, ). This technique allows you to write efficient CSS by grouping classes that share common styling properties. A "class" is an HTML attribute that accepts a list of classes separated by spaces. These classes can then be used in CSS to style particular elements or in JavaScript to manipulate HTML elements. Syntax .class1, .class2, .class3 { property: value; } Example 1: Applying Color to Multiple Classes In this ...
Read MoreHow to apply inline CSS?
Inline CSS is writing the styles for a particular HTML element inside its "style" attribute. The styles here are unique to the element itself, and generally override the CSS provided internally or externally. Syntax Content Here, "tag_name" refers to any HTML tag name, and the "style" attribute allows us to add CSS properties directly to the element. Multiple properties are separated by semicolons. Example 1: Styling Text In this example, we will style the "p" tag to give it a different color and font style using inline CSS − ...
Read More