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 102 of 130
Add space inside a form's text field with CSS
To add space inside a form's text field, use the CSS padding property. This creates internal spacing between the text and the field's border, making the input more visually appealing and easier to read. Syntax input[type="text"] { padding: value; } Example: Adding Space Inside Text Fields The following example demonstrates how to add internal spacing to text input fields − input[type="text"] { width: 100%; ...
Read MoreSelects all elements with rel="nofollow" with CSS
The CSS attribute selector [attribute="value"] allows you to select elements that have a specific attribute with an exact value. This is particularly useful for targeting links with rel="nofollow" attributes. Syntax selector[attribute="value"] { property: value; } Example The following example demonstrates how to select and style all anchor elements with rel="nofollow" − a[rel="nofollow"] { border: 3px solid blue; background-color: #f0f8ff; ...
Read MoreWith CSS set the element to retain the style values that is set by the first keyframe
The CSS animation-fill-mode property with the backwards value makes an element retain the style values defined in the first keyframe (the from or 0% state) before the animation begins. This is particularly useful when you want the element to appear in its starting animation state during any animation delay. Syntax selector { animation-fill-mode: backwards; } Example The following example demonstrates how animation-fill-mode: backwards applies the first keyframe styles before the animation starts − .box { ...
Read MoreSet bottom tooltip with CSS
To create a bottom tooltip with CSS, use the top property set to 100% along with position: absolute. This positions the tooltip below the trigger element when hovered. Syntax .tooltip .tooltip-text { position: absolute; top: 100%; visibility: hidden; } .tooltip:hover .tooltip-text { visibility: visible; } Example The following example creates a bottom tooltip that appears when you hover over the text − .mytooltip { ...
Read MoreUsage 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 More