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
Web Development Articles
Page 550 of 801
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 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 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 MoreDifferent ways to hide elements using CSS
There are instances when you simply don't want every element of your website to be exposed. In other words, you don't want every template element of a page, post, header, or footer displayed every time it appears. And while it might appear that you need to update the template or theme code each time you want this omission to happen, that's not actually true. In fact, with only CSS, you may rapidly hide parts of your website. And it's really not that difficult. Let's dive into the article for getting better understanding of the different ways to hide elements ...
Read MoreHow to Create Image Accordion using HTML and CSS?
An image accordion is a popular web interface element that allows users to expand and collapse image sections for an interactive browsing experience. This technique creates a smooth, space-efficient way to display multiple images where only one section is fully visible at a time. Syntax .accordion-container { display: flex; } .accordion-item { flex: 1; transition: all 0.3s ease; cursor: pointer; } .accordion-item:hover { flex: expanded-ratio; } What is an Accordion? An accordion ...
Read More