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 108 of 130
CSS Child Selector
The CSS child selector (>) is used to select all elements that are direct children of a specified element. It only targets immediate children and does not select nested elements deeper in the hierarchy. Syntax parent > child { property: value; } Example The following example demonstrates how the child selector works − div > p { background-color: orange; padding: 10px; ...
Read MoreAlign elements using the CSS float property
The CSS float property is used to align elements to the left or right side of their container, allowing other content to wrap around them. This property was traditionally used for creating layouts before modern techniques like flexbox and grid. Syntax selector { float: value; } Possible Values ValueDescription leftElement floats to the left side rightElement floats to the right side noneElement does not float (default) Example: Right Float Alignment The following example demonstrates how to align an element to the right using the float property ...
Read MoreCSS 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 overflow: scroll
The CSS overflow: scroll property forces the display of scrollbars when content exceeds the dimensions of its container. Unlike other overflow values, scroll always shows scrollbars regardless of whether the content actually overflows. Syntax selector { overflow: scroll; } How It Works When you set overflow: scroll, the browser will − Clip any content that exceeds the container's dimensions Always display both horizontal and vertical scrollbars Allow users to scroll through the hidden content Example The following example demonstrates overflow: scroll with content that exceeds ...
Read MoreCenter links in a Navigation Bar with CSS
One of the most crucial components of a website or application is the navigation bar. It usually sits at the top of your application and makes it simple for users to navigate to the most important sections or pages of your website. The major sections of your website are essentially linked from a navbar. These links are commonly known as navigation items, and you can align them to the left, center, or right based on your design requirements. Syntax /* Method 1: Using Flexbox */ nav { display: flex; ...
Read MoreOverlap Elements with CSS
To overlap elements in CSS, you need to control their stacking order using positioning and the z-index property. Elements with higher z-index values appear in front of elements with lower values. Syntax selector { position: relative | absolute | fixed; z-index: integer; } Key Properties for Overlapping PropertyDescription positionMust be relative, absolute, or fixed for z-index to work z-indexControls stacking order (higher values appear on top) top, left, right, bottomControls precise positioning of overlapping elements Example: Image Behind Text The following example ...
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 MoreCSS position: static;
The CSS position: static property sets an element to its normal position in the document flow. This is the default positioning behavior for all HTML elements. Syntax selector { position: static; } Key Characteristics Elements with position: static have these characteristics − They follow the normal document flow The top, bottom, left, and right properties have no effect They cannot be moved using positioning properties This is the default value for all elements Example The following example demonstrates static positioning behavior − ...
Read MoreRole of CSS :nth-last-child(n) Selector
The CSS :nth-last-child(n) selector targets elements based on their position among siblings, counting backwards from the last child. This pseudo-class is useful for styling specific elements when you know their position from the end of a container. Syntax selector:nth-last-child(n) { property: value; } Where n can be a number, keyword, or formula (odd, even, 2n+1, etc.). Possible Values ValueDescription numberSelects the nth element from the end (1-indexed) oddSelects odd-positioned elements from the end evenSelects even-positioned elements from the end formulaUses mathematical expression like 2n+1, 3n, etc. ...
Read MoreDifferences 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 More