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 649 of 801
Center 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 MoreCreate a bordered list without bullets using CSS
To create a bordered list without bullets, you can use the list-style-type property set to none to remove bullets and add a border property to create the border around the list. Syntax ul { list-style-type: none; border: width style color; padding: value; } Example The following example creates a bordered list without bullets − ul { background-color: orange; ...
Read MoreList with a blue left border using CSS
To add a blue left border to a list in CSS, you can use the border-left property. This creates a visual accent that helps distinguish the list from other content on the page. Syntax selector { border-left: width style color; } Example The following example demonstrates how to add a blue left border to an unordered list − ul { border-left: 3px solid blue; ...
Read MoreCreate a link button with borders using CSS
To create a link button with borders using CSS, you style anchor tags to look like buttons by adding borders, padding, and background colors. This technique transforms regular links into visually appealing button elements. Syntax a { border: width style color; padding: value; background-color: color; display: inline-block; text-decoration: none; } Example The following example creates a link button with a blue border that changes to red on hover − ...
Read MoreAdd different styles to hyperlinks using CSS
CSS allows you to apply different styles to hyperlinks using pseudo-classes. You can change colors, fonts, backgrounds, and other properties based on the link's state (unvisited, visited, or hovered). Syntax a:link { /* unvisited link */ } a:visited { /* visited link */ } a:hover { /* mouse over link */ } a:active { /* selected link */ } Pseudo-Class States Pseudo-ClassDescription :linkUnvisited link (default state) :visitedLink that has been clicked/visited :hoverLink when mouse hovers over it :activeLink at the moment it is clicked Example: Different Link Styles The following ...
Read More