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 643 of 801
Usage of CSS [attribute] Selector
The CSS [attribute] selector is used to select elements that contain a specific attribute, regardless of the attribute's value. This is useful for styling elements based on the presence of attributes like alt, target, title, or any custom attributes. Syntax [attribute] { /* CSS properties */ } Example: Selecting Images with Alt Attributes The following example applies a border to all images that have an alt attribute − img[alt] { border: 3px ...
Read MoreSet left tooltip with CSS
To set left tooltip, use the right CSS property. A left tooltip appears to the left of the trigger element when hovering, creating an interactive user interface element. Syntax .tooltip .tooltip-text { position: absolute; right: 100%; } Key Properties PropertyPurpose position: absolutePositions tooltip relative to parent right: 100%Places tooltip to the left of parent element visibility: hidden/visibleControls tooltip display on hover Example The following example creates a left tooltip that appears when hovering over the text − ...
Read MoreHow to create a responsive image gallery with CSS
A responsive image gallery adapts to different screen sizes using CSS media queries and flexible layouts. This allows images to display properly on desktop, tablet, and mobile devices by adjusting the number of columns and image sizes automatically. Syntax .gallery-container { width: percentage; float: left; } @media only screen and (max-width: breakpoint) { .gallery-container { width: new-percentage; } } Example The following example creates a responsive image gallery that ...
Read MoreAdd arrow in tooltip with CSS
With CSS, you can add a small arrow to a tooltip using the ::after pseudo-element. The arrow is created by combining the content property with CSS borders to form a triangular pointer that connects the tooltip to its trigger element. Syntax .tooltip::after { content: ""; position: absolute; border-style: solid; border-color: tooltip-color transparent transparent transparent; } Example: Tooltip with Top Arrow The following example creates a tooltip that appears above the trigger element with a downward-pointing arrow − ...
Read MoreSet the navigation bar to stay at the bottom of the web pagenwith CSS
To set the navigation bar at the bottom of the web page, use the position: fixed property combined with bottom: 0. This creates a sticky navigation bar that remains visible at the bottom of the viewport even when the user scrolls through the page content. Syntax nav { position: fixed; bottom: 0; width: 100%; } Example The following example demonstrates how to create a fixed bottom navigation bar − ul { ...
Read MoreSet the navigation bar to stay at the top of the web page with CSS
To set the navigation bar at the top of the web page, use the position: fixed property combined with top: 0. This creates a fixed navigation bar that remains visible at the top even when users scroll down the page. Syntax .navbar { position: fixed; top: 0; width: 100%; } Example The following example creates a horizontal navigation menu that stays fixed at the top of the page − body { ...
Read MoreRole of CSS position: sticky;
The CSS position: sticky property creates elements that behave as relatively positioned until they reach a specified scroll position, then become fixed. This is particularly useful for creating navigation bars that stick to the viewport when scrolling. Syntax selector { position: sticky; top: value; } Key Properties PropertyDescription position: stickyMakes the element sticky when scrolling topDistance from top of viewport where element becomes fixed z-indexStacking order (optional) Example: Sticky Navigation Bar The following example creates a navigation bar that sticks to the ...
Read MoreArrow to the bottom of the tooltip with CSS
In CSS, you can create a tooltip with an arrow pointing to the bottom by using the ::after pseudo-element to generate a triangular shape. This is achieved by manipulating border properties to create the arrow effect. Syntax .tooltip .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -border-width; border-width: size; border-style: solid; border-color: tooltip-color transparent transparent transparent; } Example The ...
Read MoreHow to add link dividers in a Navigation Bar with CSS
Link dividers in navigation bars help separate menu items visually, making the navigation cleaner and more readable. You can add dividers using CSS border properties. Syntax li { border-right: width style color; } Example: Vertical Dividers with Border-Right The following example uses the border-right property to add vertical dividers between navigation items − ul { list-style-type: none; margin: 0; ...
Read MoreFloat List Items to the right with CSS
The CSS float: right property allows you to align list items to the right side of their container. This is commonly used for creating navigation menus where some items appear on the left and others on the right. Syntax li { float: right; } Example: Floating List Items to the Right The following example demonstrates how to float specific list items to the right while keeping others on the left − ul ...
Read More