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 670 of 801
Usage of CSS list-style property
The CSS list-style property serves as a shorthand for setting all list-related properties in a single declaration. It allows you to specify the list marker type, position, and image simultaneously. Syntax selector { list-style: list-style-type list-style-position list-style-image; } Possible Values PropertyDescriptionValues list-style-typeSpecifies the marker typedisc, circle, square, decimal, none, etc. list-style-positionSpecifies marker positioninside, outside list-style-imageUses custom image as markerurl() or none Example: Basic List Style The following example demonstrates using the list-style shorthand property − .custom-list ...
Read MoreDifference between CSS border-collapse:collapse; and border-collapse:separate;
The CSS border-collapse property controls how table borders are displayed. The key difference between collapse and separate is how adjacent cell borders are handled − collapse merges adjacent borders into a single border, while separate keeps each cell's borders distinct with gaps between them. Syntax table { border-collapse: collapse | separate; } Possible Values ValueDescription collapseAdjacent borders are merged into a single border separateEach cell maintains its own border with spacing between cells (default) Example: Comparing Border Collapse Values The following example demonstrates both values side ...
Read MoreApply style to the parent if it has a child with CSS and HTML
Currently, CSS does not have a true parent selector that allows you to style a parent element based on its children. However, there are several modern approaches to achieve similar functionality using CSS and JavaScript. Syntax /* Future CSS4 proposal (not yet supported) */ parent $child { /* styles for parent */ } /* CSS :has() pseudo-class (modern browsers) */ parent:has(child) { /* styles for parent */ } Method 1: Using CSS :has() Pseudo-class Modern browsers now support the :has() pseudo-class which allows styling a ...
Read MoreHow to make the main content div fill height of screen with CSS and HTML
Making the main content div fill the height of the screen is a common layout requirement in web development. This can be achieved using CSS positioning properties or modern layout techniques like flexbox and CSS Grid. Syntax .main-content { height: 100vh; /* or */ position: absolute; top: header-height; bottom: footer-height; /* or */ flex: 1; } Method 1: Using Viewport Height (vh) The simplest approach is ...
Read MoreHow to debug CSS/JavaScript hover issues?
CSS and JavaScript hover issues can be tricky to debug because the hover state disappears when you move your cursor away from the element. Developer tools provide special features to help you inspect and debug these interactive states effectively. Method 1: Using Browser Developer Tools Step 1: Open Developer Tools Press F12 or right-click on the page and select Inspect Element to open the developer tools in any modern browser. Step 2: Access Pseudo-class States In the DOM/Elements panel, right-click on the element you want to debug and look for options like :hover, :active, or ...
Read MoreHow to set the favicon size in CSS rather than HTML attributes?
A favicon is a small icon visible on the web browser tab, just before the page title. It is generally a logo with a smaller size representing your website's brand. Setting Favicon Size You cannot set the favicon size using CSS properties. The web standards do not support controlling favicon dimensions through CSS. Instead, you must specify the size using HTML attributes in the element. Syntax Example: Adding Favicon with Size Attribute The following example shows how to properly add a favicon with specified dimensions using HTML attributes − ...
Read MoreHow to limit input text length using CSS3?
With HTML, you can easily limit input length using the maxlength attribute. However, with CSS3, it is not possible to limit the number of input characters, since CSS deals with presentation (how your web page looks) rather than functionality or behavior. CSS cannot impose functional restrictions like character limits. The maxlength attribute is an HTML attribute that controls behavior, not presentation. Syntax /* CSS cannot limit input text length */ /* Use HTML maxlength attribute instead */ HTML Solution To limit input text length, you must use the HTML maxlength attribute − ...
Read MoreHow to create a modal popup using JavaScript and CSS?
Creating a modal popup means adding a dialog box, which generates on click of a button and closes when the user clicks anywhere outside of the popup or on the close button. × Modal Header This is the modal content. Click outside or on × ...
Read MoreHow do I hide an element when printing a web page?
In this article, we will learn to hide an element when printing a web page using CSS and JavaScript. When printing a web page, you can suppress elements such as navigation menus, advertisements, and interactive elements that you do not require on paper and print only the required information. Syntax @media print { selector { display: none; } } Different Approaches The following are the two different approaches to hiding an element when printing a web page − ...
Read MoreIn dynamic fashion setting a custom class to a cell in a row
If you need to set CSS properties for a row, you can combine the predefined CSS class of the table along with your custom class. This allows you to apply specific styling to table cells dynamically. Syntax .table-class .custom-class { property: value; } Example: Custom Cell Styling The following example demonstrates how to apply custom styling to table cells using a combination of table class and custom class − .data-table { border-collapse: ...
Read More