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 110 of 130
Set 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 MoreStyle elements with a value within a specified range with CSS
To style elements with a value within a specified range, use the CSS :in-range pseudo-class selector. This selector applies styles only when the input's value falls within the defined min and max attributes. Syntax input:in-range { property: value; } Example: Basic In-Range Styling The following example demonstrates styling a number input when its value is within the specified range − input:in-range { border: 3px dashed orange; ...
Read MoreDisable text wrapping inside an element using CSS
To disable text wrapping inside an element, use the CSS white-space property with the nowrap value. This forces all text content to remain on a single line, preventing it from wrapping to the next line even if it overflows the container. Syntax selector { white-space: nowrap; } Example: Preventing Text Wrapping The following example demonstrates how to disable text wrapping using the white-space: nowrap property − .normal-text { width: 200px; ...
Read MoreRole of CSS :hover Selector
The CSS :hover selector is a pseudo-class that applies styles to an element when a user hovers over it with their mouse cursor. It's commonly used to create interactive effects on links, buttons, and other elements to enhance user experience. Syntax selector:hover { property: value; } Example 1: Basic Link Hover Effect The following example demonstrates how to change the background color of a link when hovering over it − a:hover { ...
Read MoreRole of CSS :focus Selector
The CSS :focus pseudo-class selector is used to target and style an element when it receives focus through user interaction, such as clicking on an input field or navigating to it using the Tab key. Syntax selector:focus { property: value; } Example: Styling Input Fields on Focus The following example changes the background color of input fields when they receive focus − input:focus { background-color: lightblue; ...
Read MoreCSS3 Multi-Column column-span Property
The CSS column-span property is used to specify how many columns an element should span across in a multi-column layout. This property allows specific elements to break out of the column flow and span across multiple or all columns. Syntax selector { column-span: value; } Possible Values ValueDescription noneThe element does not span multiple columns (default) allThe element spans across all columns Example: Element Spanning All Columns The following example demonstrates how a heading element spans across all columns in a multi-column layout − ...
Read MoreCSS3 Multi-Column rule-color Property
The CSS3 column-rule-color property is used to specify the color of the vertical line (rule) that appears between columns in a multi-column layout. This property works in conjunction with column-rule-style and column-rule-width to create visible separators between columns. Syntax selector { column-rule-color: color-value; } Possible Values ValueDescription color-nameStandard color names like red, blue, green hex-valueHexadecimal color codes like #ff0000, #00ff00 rgb()RGB color values like rgb(255, 0, 0) rgba()RGB with alpha transparency like rgba(255, 0, 0, 0.5) initialSets the property to its default value inheritInherits the value from parent element ...
Read More