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 109 of 130
Create 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 MoreSet the width of the left border using CSS
The CSS border-left-width property is used to set the width of the left border of an element. This property only works when the border-left-style or border-style is defined. Syntax selector { border-left-width: value; } Possible Values ValueDescription thinDefines a thin left border mediumDefines a medium left border (default) thickDefines a thick left border lengthDefines the width in px, em, rem, etc. Example The following example demonstrates how to set different widths for the left border − ...
Read More