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 650 of 801
Set 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 MoreSet the style of the bottom border using CSS
The CSS border-bottom-style property is used to set the style of the bottom border of an element. You can create various visual effects like dotted, dashed, solid, and other border styles. Syntax selector { border-bottom-style: value; } Possible Values ValueDescription noneNo border (default) solidA solid line border dottedA series of dots dashedA series of dashes doubleTwo solid lines insetBorder appears embedded outsetBorder appears raised Example The following example demonstrates different bottom border styles − p { ...
Read MoreShow the background image only once with CSS
Use the background-repeat property to display the background image only once. By default, background images repeat to fill the entire element, but you can control this behavior with the background-repeat property. Syntax selector { background-repeat: value; } Possible Values ValueDescription no-repeatBackground image displays only once repeatBackground image repeats both horizontally and vertically (default) repeat-xBackground image repeats only horizontally repeat-yBackground image repeats only vertically Example The following code shows how to display a background image only once using background-repeat: no-repeat − ...
Read MoreRole of CSS :nth-last-of-type(n) Selector
The CSS :nth-last-of-type(n) selector targets elements based on their position among siblings of the same type, counting from the last element backwards. It's particularly useful for styling specific elements without adding classes or IDs. Syntax :nth-last-of-type(n) { /* CSS properties */ } Possible Values ValueDescription numberSelects the nth element from the end (1, 2, 3, etc.) evenSelects even-positioned elements from the end oddSelects odd-positioned elements from the end formulaUses expressions like 2n+1, 3n, etc. Example: Selecting Second Last Element The following example selects the second last ...
Read MoreSet Responsive Font Size using CSS
Setting responsive font size in CSS ensures text adapts to different screen sizes automatically. The vw (viewport width) unit is the most common approach, making text scale proportionally with the browser width. Syntax selector { font-size: value vw; } Viewport Units for Responsive Font Size UnitDescription vw1% of viewport width vh1% of viewport height vmin1% of smaller viewport dimension vmax1% of larger viewport dimension Example: Basic Viewport Width Font Size The following example demonstrates responsive font sizing using the vw unit − ...
Read More