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
Articles by Chandu yadav
Page 21 of 81
Set Bordered Form Inputs with CSS
The CSS border property is used to add borders to form input elements. You can customize the border width, style, and color to create visually appealing forms. Syntax input { border: width style color; } Possible Values PropertyValuesDescription border-widthpx, em, thin, medium, thickSets the border thickness border-stylesolid, dashed, dotted, inset, outsetDefines the border appearance border-colorcolor names, hex, rgbSpecifies the border color Example: Inset Border for Text Inputs The following example creates bordered text inputs with an inset style − ...
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 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 MoreRole of CSS: valid Selector
The CSS :valid selector is used to style form input elements that contain valid values according to their specified type or validation constraints. This pseudo-class selector automatically applies styles when the input meets the validation criteria. Syntax input:valid { /* styles for valid inputs */ } Example: Email Validation Styling The following example demonstrates how to style email inputs with valid email addresses − input[type="email"] { padding: 10px; ...
Read MoreRole of CSS :nth-of-type(n) Selector
The CSS :nth-of-type(n) selector is used to select and style elements that are the nth child of their specific type within their parent element. This pseudo-class is particularly useful when you want to target specific elements based on their position among siblings of the same tag type. Syntax element:nth-of-type(n) { property: value; } Possible Values ValueDescription numberSelects the element at the specified position (1, 2, 3, etc.) oddSelects all odd-positioned elements of the same type evenSelects all even-positioned elements of the same type an+bSelects elements using a formula (e.g., ...
Read MoreRole of CSS :not (selector) Selector
The CSS :not() selector is used to select and style every element that does not match the specified selector. This pseudo-class selector allows you to apply styles to all elements except those that match a particular criterion, making it useful for creating exclusion-based styling rules. Syntax :not(selector) { property: value; } Example: Basic :not() Selector The following example demonstrates how to style all elements except paragraphs − p { color: red; ...
Read MoreRole of CSS:lang Selector
The CSS :lang selector allows you to apply specific styles to elements based on their language attribute. This pseudo-class selector targets elements that have a specific lang attribute value, making it useful for multilingual websites where different languages may need different styling. Syntax :lang(language-code) { /* CSS properties */ } Example: Styling French Text The following example applies a green background to all paragraph elements with French language attribute − p:lang(fr) { ...
Read MoreRole of CSS: first-child Selector
The CSS :first-child selector targets the first child element of its parent, regardless of element type. It's commonly used to apply special styling to the first item in a list or the first paragraph in a container. Syntax selector:first-child { property: value; } Example: Basic Usage The following example styles every element that is the first child of its parent − p:first-child { background-color: orange; ...
Read MoreRole of CSS: disabled Selector
The CSS :disabled selector is used to style form elements that have the disabled attribute. This pseudo-class selector targets input fields, buttons, and other form controls that are disabled and cannot be interacted with by users. Syntax :disabled { /* CSS properties */ } element:disabled { /* CSS properties */ } Example The following example demonstrates how to style enabled and disabled input fields with different background colors − ...
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 More