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 103 of 130
Role 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 MoreWhat are Floating List Items in CSS
Floating list items in CSS allow you to create horizontal navigation bars and multi-column layouts by making list items flow side by side instead of stacking vertically. The float property removes elements from the normal document flow and positions them to the left or right of their container. Syntax li { float: left | right | none; } Possible Values ValueDescription leftFloats the element to the left side rightFloats the element to the right side noneDefault value, no floating applied Example: Horizontal Navigation Bar The following ...
Read MoreCreate a Horizontal Navigation Bar with CSS
To create a horizontal navigation bar with CSS, you need to change the default vertical display of list items to horizontal. The key is using display: inline or display: inline-block on the elements to arrange them side by side. Syntax li { display: inline; } /* Or for more control */ li { display: inline-block; } Method 1: Using Display Inline The following example creates a basic horizontal navigation bar using display: inline − ...
Read MoreWhat are Inline List Items in CSS
Inline list items in CSS are created by setting the display property to inline for list elements (). This transforms vertically stacked list items into horizontally arranged elements, making them perfect for creating navigation bars and horizontal menus. Syntax li { display: inline; } Example: Creating a Horizontal Navigation Bar The following example demonstrates how to create a horizontal navigation bar using inline list items − ul { list-style-type: none; ...
Read MoreSet a border around navbar with CSS
To set a border around navbar with CSS, is an easy task and can be easily achieved using CSS properties. In this article, we will learn three different approaches for setting a border around navbar with CSS. Syntax /* Using border property */ .navbar { border: width style color; } /* Using outline property */ .navbar { outline: width style color; } /* Using box-shadow property */ .navbar { box-shadow: 0 0 0 width color; } Method 1: Using border Property ...
Read MoreSet all the top border properties in one declaration using CSS
The CSS border-top property is used to set all the top border properties in one declaration. This shorthand property combines border-top-width, border-top-style, and border-top-color into a single property. Syntax selector { border-top: width style color; } Possible Values ValueDescription widthSets the width of the top border (thin, medium, thick, or length units) styleSets the style of the top border (solid, dashed, dotted, etc.) colorSets the color of the top border (color name, hex, rgb, etc.) Example: Basic Border Top Declaration The following example demonstrates how to ...
Read MoreSet style to current link in a Navigation Bar with CSS
To set a style to the current link in a navigation bar, you need to add an active class to the current page link and define CSS styles for it. This helps users identify which page they are currently viewing. Syntax .active { background-color: color; color: text-color; /* other styling properties */ } Example The following example demonstrates how to style the current link in a navigation bar − ul { ...
Read More