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 Shabaz Alam
Page 2 of 6
How to set color opacity with RGBA in CSS?
The CSS RGBA color model allows developers to set color opacity directly within the color value. RGBA stands for Red, Green, Blue, and Alpha, where the alpha channel controls the transparency of the element. Syntax selector { color: rgba(red, green, blue, alpha); } Where: red, green, blue − Values from 0 to 255 representing color intensity alpha − Value from 0 to 1 representing opacity (0 = transparent, 1 = opaque) What is the RGBA Color Model? RGBA is an extension of the RGB color model with ...
Read MoreHow to set checkbox size in HTML/CSS?
To set checkbox size in HTML/CSS, we can use several CSS properties to control the dimensions and scaling of checkboxes. By default, checkboxes have a small size that may not be suitable for all designs. Syntax input[type="checkbox"] { width: value; height: value; /* OR */ transform: scale(value); /* OR */ zoom: value; } Method 1: Using Width and Height Properties The most straightforward approach is to use the width and ...
Read MoreHow to set blur distance in CSS?
CSS (Cascading Style Sheets) is a powerful tool for designing visual effects on websites. The blur effect is one of the many features in CSS, which is used to blur any element using the filter property with the blur() function. To create a soft, dreamy effect or to draw attention to a specific element on a page, we can use the blur effect. Syntax selector { filter: blur(distance); } The Concept of Blur Distance in CSS Before discussing the practical aspect of setting blur distance, it is important to understand ...
Read MoreHow 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 set a rotated element’s base placement in CSS ?
The CSS transform-origin property allows you to control the base placement (anchor point) of rotated elements. By default, elements rotate around their center, but you can change this to any point to achieve different visual effects. Syntax selector { transform: rotate(angle); transform-origin: x-position y-position; } Transform-Origin Values ValueDescription centerDefault - rotates around the center point top leftRotates around the top-left corner bottom rightRotates around the bottom-right corner 50% 0%Uses percentages for precise positioning 20px 10pxUses pixel values for exact positioning Example 1: Default ...
Read MoreHow to set a 3D element\'s base placement in CSS ?
CSS has developed from simple style sheets to a powerful language that can create complex and intricate layouts and designs. One of the most exciting features of CSS is to create 3D elements on web pages. With CSS 3D transforms, we can now create attractive 3D effects that were once only possible with JavaScript or Flash. In this article, we will explore how to set a 3D element's base placement in CSS using various properties. Syntax selector { transform-origin: x y z; perspective: value; transform-style: ...
Read MoreHow to select text input fields using CSS selector?
To select text input fields using CSS selector, is a powerful and crucial tool for styling and targeting specific elements on webpages. Text input fields are essential components of web forms that require user input. In this article, we will explore different methods to select and style text input fields while excluding other input types like password fields. Syntax /* Type selector */ input[type="text"] { /* styles */ } /* ID selector */ #elementId { /* styles */ } /* Class selector */ .className { /* styles */ } /* Attribute selector */ ...
Read More