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 667 of 801
Usage of margin property with CSS
The CSS margin property defines the space around an HTML element, creating transparent area outside the element's border. It is possible to use negative values to overlap content and it serves as a shorthand property for setting all margin properties in one declaration. Syntax selector { margin: value; } Possible Values ValueDescription lengthDefines margin in px, em, rem, etc. %Defines margin as percentage of container width autoBrowser calculates the margin automatically inheritInherits margin from parent element Example 1: Single Value Margin The following example applies 20px ...
Read MoreUsage of :visited pseudo-class in CSS
The :visited pseudo-class is used to add special styling to links that have already been visited by the user. This allows you to provide visual feedback indicating which links have been previously clicked. Syntax a:visited { property: value; } Possible Values PropertyDescription colorChanges the text color of visited links background-colorChanges the background color of visited links text-decorationAdds or removes underlines, strikethrough, etc. Example The following example changes the color of visited links to green − a:link ...
Read MoreCSS outline-color property
The CSS outline-color property is used to specify the color of an element's outline. It accepts color values in various formats including color names, hex codes, RGB values, and HSL values. Syntax selector { outline-color: color; } Possible Values ValueDescription color nameStandard color names like red, blue, green hexHexadecimal color values like #FF0000 rgb()RGB color values like rgb(255, 0, 0) hsl()HSL color values like hsl(0, 100%, 50%) invertPerforms a color inversion of the background Example: Blue Outline Color The following example demonstrates how to apply a ...
Read MoreCSS outline-style property
The CSS outline-style property specifies the style for the line that goes around an element's border. Unlike borders, outlines don't take up space and don't affect the element's layout. Syntax selector { outline-style: value; } Possible Values ValueDescription noneNo outline (default value) solidOutline is a single solid line dottedOutline is a series of dots dashedOutline is a series of short lines doubleOutline is two solid lines grooveOutline appears carved into the page ridgeOutline appears raised from the page insetOutline makes the element look embedded outsetOutline makes the element look ...
Read MoreUsage of :link pseudo-class in CSS
The :link pseudo-class is used to add special style to an unvisited link. This pseudo-class targets anchor elements that have an href attribute and have not been visited by the user yet. Syntax a:link { property: value; } Possible Values You can apply any CSS property to :link, but commonly used properties include: PropertyDescription colorSets the text color of the unvisited link text-decorationControls underlining, overlining, or strike-through background-colorSets the background color of the link font-weightControls the thickness of the link text Example: Basic Link Styling ...
Read MoreWhat are CSS pseudo-classes
CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. They allow you to style elements based on their state, position, or user interaction. Syntax selector:pseudo-class { property: value; } Common Pseudo-classes The most commonly used pseudo-classes are − ValueDescription :linkUse this class to add special style to an unvisited link. :visitedUse this class to add special style to a visited link. :hoverUse this class to add special style to an element ...
Read MoreUsing CSS z-index property
The CSS z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at the bottom. Syntax selector { z-index: value; } Possible Values ValueDescription autoDefault value. Stack order is inherited from parent integerSets the stack order (higher values appear on top) Example: Layering Elements The following example demonstrates how to use z-index to control which element appears on top − ...
Read MoreFixed Positioning with CSS
The CSS position: fixed property positions an element relative to the browser window (viewport). Unlike other positioning methods, fixed elements remain in the same position even when the page is scrolled, making them ideal for navigation bars, headers, or footers that should always be visible. Syntax selector { position: fixed; top: value; /* optional */ right: value; /* optional */ bottom: value; /* optional */ left: value; /* optional */ } ...
Read MoreCSS positioning related properties
The positioning related properties in CSS allow you to control where elements appear on a webpage. CSS offers several positioning methods to place elements precisely where you want them. Syntax selector { position: value; top: value; right: value; bottom: value; left: value; } Position Property Values ValueDescription relativeElement is positioned relative to its normal position absoluteElement is positioned relative to its nearest positioned ancestor fixedElement is positioned relative to the viewport (browser window) ...
Read MoreUsage of CSS visibility property
The CSS visibility property controls whether an element is visible or hidden. Unlike display: none, hidden elements with visibility: hidden still occupy space in the layout. Syntax selector { visibility: value; } Possible Values ValueDescription visibleThe element and its contents are shown to the user (default) hiddenThe element and its content are invisible, but still affect the page layout collapseUsed only with table rows and columns to remove them from display Example: Visible vs Hidden Elements The following example demonstrates how visibility: hidden hides elements while ...
Read More