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 on Trending Technologies
Technical articles with clear explanations and examples
How to set background-image for the body element using CSS?
The CSS background-image property is used to set a background image for any HTML element, including the body element. Setting a background image for the body creates a full-page background that enhances the visual appeal of your website. Syntax body { background-image: url('path/to/image.jpg'); } Basic Example Here's a simple example of setting a background image for the body element − body { background-image: url('https://www.tutorialspoint.com/dip/images/einstein.jpg'); ...
Read MoreHow to set alternate table row color using CSS?
Setting alternate table row colors using CSS, also known as zebra striping, improves table readability by making it easier to distinguish between rows. This technique is essential for creating professional−looking data tables. Syntax /* Using nth-child selector */ tr:nth-child(even) { background-color: color; } tr:nth-child(odd) { background-color: color; } Method 1: Using nth-child Selector The nth-child() selector is the most popular method for creating zebra striping. It selects elements based on their position among all sibling elements − ...
Read MoreHow to set all the font properties in one declaration using CSS?
CSS provides a shorthand property called font that allows you to set multiple font properties in a single declaration. This property combines font-style, font-variant, font-weight, font-size, line-height, and font-family into one convenient statement. Syntax selector { font: font-style font-variant font-weight font-size/line-height font-family; } Property Values PropertyValuesRequired font-stylenormal | italic | obliqueOptional font-variantnormal | small-capsOptional font-weightnormal | bold | 100-900Optional font-sizepx | em | rem | %Required line-heightnormal | number | lengthOptional font-familyfont names or generic familiesRequired Example 1: Basic Font Shorthand The following example demonstrates setting ...
Read MoreHow to set align-self property to its default value in CSS?
CSS or Cascading Style Sheets provides the align-self property to control the alignment of individual flex items within a flex container. By default, align-self is set to auto, which means the element inherits the alignment from its parent container's align-items property. Syntax selector { align-self: auto; } Possible Values ValueDescription autoDefault. Inherits the align-items value of the parent container flex-startAligns the item to the start of the cross axis flex-endAligns the item to the end of the cross axis centerCenters the item along the cross axis baselineAligns the item ...
Read MoreHow to create progress bar using the HTML and CSS
The progress bar is a visual element used to show the completion status of a task, file upload, or process. You can create an animated progress bar using HTML for structure and CSS for styling and animation effects. Syntax .progress-container { /* Container styling */ } .progress-bar { /* Progress bar styling */ animation: progress-animation duration timing-function; } @keyframes progress-animation { from { width: 0%; } to { width: target-percentage%; } } Example: ...
Read MoreHow to create Portfolio Gallery using the HTML and CSS
A portfolio gallery is a collection of images and videos that showcase past work or achievements. Using HTML and CSS, we can create an attractive, responsive portfolio gallery that displays multiple project cards in a grid layout. Syntax The basic structure for a portfolio gallery uses flexbox for responsive layout − .gallery { display: flex; flex-wrap: wrap; gap: spacing; justify-content: center; } .card { width: fixed-width; height: fixed-height; ...
Read MoreWhich property specifies the right padding of an element in CSS?
In CSS, the padding property allows us to add extra space between the HTML element's border and its content. The right padding means only adding the space between the element's content and the right border. Here, we will learn two different properties to specify the right padding of an element. Syntax selector { padding-right: value; } Use the padding-right CSS Property The padding-right property specifies the right padding of an element in CSS. Whenever we specify the right padding for an element, the width of the element becomes equal ...
Read MoreWhich property is used to make a font oblique?
In CSS, we can use the font-style property to set the style of the font. We can use different styles as values of the font-style property, and oblique is one of them. The oblique font is a slanted version of the text that creates a sloped appearance. Unlike italic fonts which use specifically designed slanted characters, oblique fonts are created by mathematically slanting the normal font characters. Syntax selector { font-style: oblique; } Example 1: Basic Oblique Font In the example below, we have created two paragraphs to compare ...
Read MoreWhich one should we use ‘border: none’ or ‘border: 0 ‘?
In CSS, when you need to remove borders from HTML elements, you have two main options: border: none and border: 0. While both visually remove the border, they work differently under the hood and have different performance implications. Syntax /* Remove border using none */ border: none; /* Remove border using 0 */ border: 0; Border: none VS border: 0 Understanding the difference between these two approaches is crucial for writing efficient CSS − border: none border: 0 Sets border-style: none Sets border-width: 0 Hides the ...
Read MoreWhat is maximum & minimum value for z-index property in CSS?
In CSS, the z-index property controls the stacking order of overlapping elements. Elements with higher z-index values appear in front of elements with lower values, creating a layered effect. The z-index property has specific limits: the maximum value is 2147483647 and the minimum value is -2147483647. These numbers represent the maximum and minimum values of a 32-bit signed integer. Note − The z-index property only works with positioned elements (relative, absolute, fixed, or sticky). It has no effect on elements with static positioning. Syntax selector { z-index: value; } ...
Read More