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 648 of 801
CSS position: fixed;
The CSS position: fixed; property positions an element relative to the viewport, which means it stays in the same place even when the page is scrolled. Fixed elements are removed from the normal document flow and positioned using the top, right, bottom, and left properties. Syntax selector { position: fixed; top: value; right: value; bottom: value; left: value; } Possible Values PropertyValueDescription positionfixedSets the positioning method to fixed toplength | %Distance from the ...
Read MoreRole of CSS :checked Selector
The CSS :checked pseudo-class selector targets and styles input elements of type checkbox or radio button that are currently checked or selected. This selector allows you to apply specific styles to form controls based on their state. Syntax input:checked { /* CSS properties */ } Example 1: Styling Checked Checkboxes The following example demonstrates how to style checked checkboxes with enhanced size and background color − input[type="checkbox"]:checked { width: 25px; ...
Read MoreStyle the active link with CSS
To style the active links, use the CSS :active selector. The :active pseudo-class targets an element during the exact moment it is being clicked or activated by the user. Syntax selector:active { property: value; } Example: Basic Active Link Styling The following example changes the background color of a link when it's being clicked − a { color: blue; text-decoration: none; ...
Read MoreUsage of CSS :focus pseudo-class
The CSS :focus pseudo-class is used to apply styles to form elements when they receive focus (when a user clicks on them or navigates to them using the keyboard). This is particularly useful for improving user experience and accessibility. Syntax selector:focus { property: value; } Example The following example demonstrates how to use the :focus pseudo-class to highlight input fields with an orange background when they are focused − input:focus { ...
Read MoreWhat is a CSS Selector?
CSS selectors are patterns used to select and style HTML elements. They act as a bridge between your HTML structure and CSS styles, allowing you to target specific elements or groups of elements on your webpage. Syntax selector { property: value; } Types of CSS Selectors Selector Type Syntax Description Element Selector p Selects all elements of a specific type Class Selector .demo Selects all elements with class="demo" ID Selector #myid Selects the element with id="myid" Universal Selector * Selects ...
Read MoreCSS Descendant Selector
The descendant selector in CSS is used to match all elements that are descendants of a specified element. It allows you to apply styles to nested elements without affecting elements outside the parent container. Syntax ancestor descendant { property: value; } The descendant selector uses a space between the ancestor and descendant elements. It selects all descendant elements, regardless of how deeply nested they are within the ancestor. Example You can try to run the following code to implement CSS Descendant Selector − ...
Read MoreCSS 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 More