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 126 of 130
CSS outline-width property
The CSS outline-width property is used to set the width of the outline around an element. The outline appears outside the element's border and does not affect the element's dimensions or layout. Syntax selector { outline-width: value; } Possible Values ValueDescription thinSets a thin outline (typically 1px) mediumSets a medium outline (typically 3px) thickSets a thick outline (typically 5px) lengthSets a specific width using px, em, rem, etc. Example The following example demonstrates different outline widths − ...
Read MoreUsage of :first-child pseudo-class in CSS
The CSS :first-child pseudo-class is used to select and style an element that is the first child of its parent element. This selector only targets the very first child element, regardless of its type. Syntax selector:first-child { property: value; } Example: Basic Usage The following example demonstrates how :first-child selects the first paragraph inside a div element − div > p:first-child { text-indent: 25px; ...
Read MoreCommonly used pseudo-classes in CSS
CSS pseudo-classes allow you to style elements based on their state or position without adding extra classes to your HTML. These powerful selectors help create interactive and dynamic styling effects. Syntax selector:pseudo-class { property: value; } Commonly Used Pseudo-Classes Pseudo-ClassDescription :linkStyles unvisited links :visitedStyles visited links :hoverStyles elements when mouse hovers over them :activeStyles elements when being clicked/activated :focusStyles elements that have keyboard focus :first-childStyles the first child element of its parent :langStyles elements based on their language attribute Example: Link States The following example demonstrates ...
Read MoreUsage of :hover pseudo-class in CSS
The :hover pseudo-class is used to add special styles to an element when a user hovers their mouse cursor over it. This creates interactive effects that enhance user experience and provide visual feedback. Syntax selector:hover { property: value; } Example: Link Hover Effect The following example changes the color of a link when you hover over it − a { color: #0066cc; text-decoration: none; ...
Read MoreUsage 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 More