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 129 of 130
Cursor property of CSS
The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user when they hover over an element. Syntax selector { cursor: value; } Possible Values ValueDescription autoBrowser determines the cursor to display based on context defaultDefault cursor (usually an arrow) pointerHand cursor (typically for clickable elements) crosshairCrosshair cursor textText selection cursor (I-beam) waitLoading/wait cursor not-allowedCursor indicating something is not allowed Example: Basic Cursor Types The following example demonstrates different cursor types when hovering over elements − ...
Read MoreSet outline style as a dotted line with CSS
The CSS outline-style property is used to define the style of an element's outline. When set to dotted, it creates a dotted line around the element's border edge. Syntax selector { outline-style: dotted; } Example The following example demonstrates how to create a dotted outline around a paragraph element − .dotted-outline { outline-width: 7px; outline-style: dotted; ...
Read MoreCSS max-width property
The CSS max-width property is used to set the maximum width that an element can have. When the content would normally be wider than this value, the element will not exceed the specified maximum width. Syntax selector { max-width: value; } Possible Values ValueDescription lengthDefines the maximum width in px, em, rem, etc. %Defines the maximum width as a percentage of the parent element noneNo maximum width limit (default value) Example The following example demonstrates how max-width constrains an element's width − ...
Read MoreCSS padding-left property
The CSS padding-left property sets the amount of space between an element's content and its left border. This property affects the inner spacing on the left side of an element. Syntax selector { padding-left: value; } Possible Values ValueDescription lengthSpecifies padding in px, em, rem, etc. %Specifies padding as a percentage of the containing element's width initialSets the property to its default value (0) inheritInherits the value from the parent element Example: Left Padding with Different Units The following example demonstrates padding-left using both pixel and ...
Read MoreUsage 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 More