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
CSS Articles
Page 8 of 130
How 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 MoreCreate a 3D Text Effect using HTML and CSS
In web design, 3D text effects add depth and visual appeal to content. The text-shadow property is the primary CSS tool for creating these effects by applying multiple shadows with different offsets and colors to simulate depth. Syntax text-shadow: h-offset v-offset blur-radius color; To create a 3D effect, we apply multiple text-shadow values separated by commas, each with different offset positions to build up layers of depth. Example 1: Simple 3D Text with Hover Effect The following example creates a basic 3D text effect that appears on hover − ...
Read MoreDesign a Vertical and Horizontal menu using Pure CSS
The menu is a crucial component of any website. It helps visitors find content and directs them to key sections. CSS is excellent for creating stunning navigation menus that can be displayed either horizontally or vertically. In this article, we'll design vertical and horizontal menus using Pure CSS framework with HTML and tags. Syntax Pure CSS menu uses the following basic structure − .pure-menu { /* Base menu container */ } .pure-menu-horizontal { /* Horizontal layout modifier */ } .pure-menu-list { ...
Read More