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
Front End Technology Articles
Page 545 of 652
Differences between CSS display: none; and visibility: hidden;
There are moments when you wish to visually hide elements in an application. There are several methods by which you can accomplish this. Using the visibility property with a hidden value (visibility:hidden;) or the display property with a none value (display:none;) are two common approaches. Both approaches make the element hide, but they have different effects on how it behaves. In this article we are going to learn about the differences between display:none; and visibility:hidden; CSS visibility:hidden The CSS visibility:hidden property hides an element while preserving its space in the layout. The element becomes invisible but still ...
Read MoreCreate a bordered list without bullets using CSS
To create a bordered list without bullets, you can use the list-style-type property set to none to remove bullets and add a border property to create the border around the list. Syntax ul { list-style-type: none; border: width style color; padding: value; } Example The following example creates a bordered list without bullets − ul { background-color: orange; ...
Read MoreList with a blue left border using CSS
To add a blue left border to a list in CSS, you can use the border-left property. This creates a visual accent that helps distinguish the list from other content on the page. Syntax selector { border-left: width style color; } Example The following example demonstrates how to add a blue left border to an unordered list − ul { border-left: 3px solid blue; ...
Read MoreCreate a link button with borders using CSS
To create a link button with borders using CSS, you style anchor tags to look like buttons by adding borders, padding, and background colors. This technique transforms regular links into visually appealing button elements. Syntax a { border: width style color; padding: value; background-color: color; display: inline-block; text-decoration: none; } Example The following example creates a link button with a blue border that changes to red on hover − ...
Read MoreAdd different styles to hyperlinks using CSS
CSS allows you to apply different styles to hyperlinks using pseudo-classes. You can change colors, fonts, backgrounds, and other properties based on the link's state (unvisited, visited, or hovered). Syntax a:link { /* unvisited link */ } a:visited { /* visited link */ } a:hover { /* mouse over link */ } a:active { /* selected link */ } Pseudo-Class States Pseudo-ClassDescription :linkUnvisited link (default state) :visitedLink that has been clicked/visited :hoverLink when mouse hovers over it :activeLink at the moment it is clicked Example: Different Link Styles The following ...
Read MoreSet min-width and max-width of an element using CSS
The CSS min-width and max-width properties are used to set the minimum and maximum width constraints for an element. These properties are particularly useful for creating responsive designs that adapt to different screen sizes. Syntax selector { min-width: value; max-width: value; } Possible Values ValueDescription lengthDefines width in px, em, rem, etc. %Defines width as a percentage of the parent container autoDefault value, no constraint applied noneNo maximum width limit (for max-width only) Example The following example demonstrates how min-width and max-width ...
Read MoreSet the height and width of an image using percent with CSS
To set the height and width of an image using percentage values, you can apply CSS properties that make the image responsive to its container's dimensions. This approach is useful for creating flexible layouts that adapt to different screen sizes. Syntax img { width: percentage; height: percentage; } Example The following example demonstrates how to set an image's dimensions using percentage values − .container { width: 400px; ...
Read MoreRole of margin property with value auto using CSS
The CSS margin property with value auto is used to horizontally center block-level elements within their container. When you set left and right margins to auto, the browser distributes the available space equally on both sides, creating a centered effect. Syntax selector { margin: auto; } /* Or specifically for horizontal centering */ selector { margin-left: auto; margin-right: auto; } How It Works For margin: auto to work effectively for centering, the element must have a defined width and be a ...
Read MoreRole of margin property with value inherit using CSS
The CSS margin property with value inherit is used to inherit the margin value from the parent element. This allows child elements to automatically adopt their parent's margin settings, creating consistent spacing throughout the document hierarchy. Syntax selector { margin: inherit; /* or for specific sides */ margin-left: inherit; margin-right: inherit; margin-top: inherit; margin-bottom: inherit; } Example The following example demonstrates how a paragraph inherits the left margin from its ...
Read MoreSet the color of the four borders using CSS
The CSS border-color property is used to set the color of the four borders of an element. You can specify different colors for each border or apply a single color to all borders. Syntax selector { border-color: value; } Possible Values ValueDescription color-nameSpecifies a color by name (e.g., red, blue) hex-valueSpecifies a color using hexadecimal notation (e.g., #FF0000) rgb-valueSpecifies a color using RGB values transparentSets the border color to transparent Example: Four Different Border Colors The following example sets different colors for each of the four ...
Read More