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
Articles by Chandu yadav
Page 22 of 81
CSS overflow-x
The CSS overflow-x property controls how content is handled when it overflows the horizontal boundaries of an element. It determines whether to show scrollbars, hide overflow content, or make it visible beyond the container's edges. Syntax selector { overflow-x: value; } Possible Values ValueDescription visibleContent overflows the container and remains visible (default) hiddenOverflow content is clipped and hidden scrollA scrollbar is always shown, even if content doesn't overflow autoScrollbar appears only when content overflows Example: Hidden Horizontal Overflow The following example demonstrates hiding horizontal overflow content ...
Read MoreCSS position: relative;
The CSS position: relative property allows you to position an element relative to its normal position in the document flow. The element maintains its original space in the layout, but you can offset it using the top, right, bottom, and left properties. Syntax selector { position: relative; top: value; right: value; bottom: value; left: value; } Key Characteristics When an element has position: relative − It remains in the normal document flow Other ...
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 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 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 MoreTransform the element along with x-axis and y-axis with CSS
The CSS translate() function is used to move an element from its current position along the x-axis and y-axis. This transformation does not affect the document flow, meaning other elements remain in their original positions. Syntax transform: translate(x, y); Where: x − a length value representing the horizontal displacement y − a length value representing the vertical displacement (optional, defaults to 0) Example: Moving Element Along Both Axes The following example demonstrates how to translate an element 30px to the right and 20px down − ...
Read MoreBreak the line and wrap onto next line with CSS
The CSS word-wrap property allows you to break long words and wrap them onto the next line when they exceed their container's width. This is particularly useful for preventing text overflow in fixed-width containers. Syntax selector { word-wrap: value; } Possible Values ValueDescription normalDefault. Break words only at normal word break points break-wordAllows unbreakable words to be broken at arbitrary points Example: Breaking Long Words The following example demonstrates how to break long words that exceed the container width − ...
Read MoreCSS3 Left to right Gradient
CSS3 left to right gradient creates a smooth color transition that flows horizontally from the left edge to the right edge of an element. This is achieved using the linear-gradient() function with the to right direction. Syntax selector { background: linear-gradient(to right, color1, color2, ...); } Example: Basic Left to Right Gradient The following example creates a red to blue gradient flowing from left to right − .gradient-box { height: 100px; ...
Read MoreRotate In Down Right Animation Effect with CSS
The CSS rotate in down right animation effect creates an element that rotates from a 90-degree angle to its normal position while fading in, with the rotation origin set to the bottom right corner of the element. Syntax @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { ...
Read MoreHow to define the location of a font for download in CSS
The @font-face rule is used to define custom fonts for web pages by specifying the location of font files for download. This allows you to use fonts that are not installed on the user's system. Syntax @font-face { font-family: "font-name"; src: url("path/to/font.woff2") format("woff2"), url("path/to/font.woff") format("woff"); } Key Properties PropertyDescription font-familyDefines the name you'll use to reference this font srcSpecifies the location and format of the font file font-weightDefines which font weight this declaration applies to font-styleDefines ...
Read More