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
Front End Technology Articles
Page 446 of 652
How to set the content as a counter?
CSS counters allow you to automatically number elements on a web page without JavaScript. They work by creating variables that can be incremented and displayed as content using pseudo-elements like ::before and ::after. Syntax /* Reset/create counter */ parent-element { counter-reset: counter-name; } /* Increment and display counter */ element::before { counter-increment: counter-name; content: counter(counter-name); } CSS Counter Properties counter-reset − Creates or resets a counter to zero (or specified value) counter-increment ...
Read MoreHow to set position of an image in CSS?
In general, the default position of an image is left aligned on the web page. But you can change the position of an image according to your needs and set the position of an image manually on the web page where you have to show that particular image. Let us now discuss about the ways of positioning an image on the webpage using CSS. There are two methods or approaches in general to position an image on the web page using CSS that are listed below − Using the float property of CSS ...
Read MoreHow to set padding inside an element using CSS?
Padding in CSS creates space between an element's content and its border. This inner spacing helps improve readability and visual appeal by preventing content from touching the element's edges directly. Syntax /* Shorthand property */ padding: value; padding: top-bottom left-right; padding: top left-right bottom; padding: top right bottom left; /* Individual properties */ padding-top: value; padding-right: value; padding-bottom: value; padding-left: value; Possible Values Value TypeDescriptionExample LengthFixed units like px, em, rem10px, 1.5em PercentageRelative to parent element's width5%, 10% autoBrowser calculates paddingauto Method 1: Using Shorthand Padding Property The shorthand ...
Read MoreHow to set padding around an element using CSS?
The CSS padding property is used to create space between an element's content and its border. This inner spacing appears inside the element, making the content appear further from the edges. Syntax /* Individual properties */ padding-top: value; padding-right: value; padding-bottom: value; padding-left: value; /* Shorthand property */ padding: value; /* all sides */ padding: vertical horizontal; /* top/bottom left/right */ padding: top horizontal bottom; /* top left/right bottom ...
Read MoreDisplay div element on hovering over tag using CSS
CSS can be used to make HTML hidden components visible when hovered over. Using the adjacent sibling selector (+), we can display any HTML element when the user hovers over an tag. This selector targets an element that immediately follows another element in the DOM. Syntax a:hover + element { display: block; } How It Works The technique uses these key components − Hidden element: Initially set to display: none Adjacent sibling selector (+): Targets the element immediately after the anchor :hover pseudo-class: Triggers when mouse hovers ...
Read MoreHow set the shadow color of div using CSS?
The CSS box-shadow property allows you to add shadow effects to any HTML element, including elements. This property creates a visual depth effect by adding shadows with customizable colors, positions, and blur effects. Syntax selector { box-shadow: h-offset v-offset blur spread color; } Property Values ValueDescription h-offsetHorizontal shadow position (positive = right, negative = left) v-offsetVertical shadow position (positive = down, negative = up) blurOptional. Blur radius − higher values create more blur spreadOptional. Spread radius − positive values expand, negative values shrink colorShadow color (hex, rgb, rgba, ...
Read MoreApply Glowing Effect to the Image using HTML and CSS
You have probably seen several special effects while browsing the majority of websites, which may be viewed when your cursor is over various images. We are going to process same in this article. Such images could serve as cards for our website. The task we are going to perform in this article is to apply a glowing effect to images using HTML and CSS. This effect can be accomplished by using the box-shadow property. Let's dive into the article to learn more about applying the glowing effect. Syntax selector { box-shadow: none ...
Read MoreHow to Reduce Space Between Elements on a Row in CSS Bootstrap?
Bootstrap's grid system creates automatic spacing (called "gutters") between columns using padding and margins. Sometimes you need to reduce or remove this space to create tighter layouts. Here are several methods to control spacing between elements in Bootstrap rows. Method 1: Using no-gutters Class The simplest method is to add the no-gutters class to your row. This removes all gutters between columns − Bootstrap No Gutters Example Regular Row (with gutters) ...
Read MoreHTML Docs Not Updating from CSS
When working with HTML and CSS, a common issue is when CSS styling doesn't reflect in your HTML document despite being properly linked. This problem is particularly frequent in Django web applications where static files need special handling. Common Causes and Solutions Issue 1: Incorrect MIME Type The most common mistake is using an incorrect type attribute in the link tag − ...
Read MoreHow to Create StopWatch using HTML CSS and JavaScript ?
To create a stopwatch using HTML, CSS, and JavaScript, we need a basic understanding of these three technologies. HTML creates the structure, CSS styles the interface, and JavaScript adds the functionality for timing operations. In this tutorial, we will create a stopwatch with Start, Stop, and Reset functionality − Creating Structure of Stopwatch using HTML We use a structured approach with div elements to organize our stopwatch components − The outer align div centers the stopwatch on the screen The container div holds all stopwatch elements ...
Read More