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 23 of 81
Selects every element whose href attribute value contains the substring "java" with CSS
The CSS [attribute*="value"] selector is used to select elements whose attribute value contains a specified substring. This attribute selector is particularly useful when you need to target elements based on partial attribute matches. Syntax [attribute*="value"] { /* CSS properties */ } Where attribute is the HTML attribute name and value is the substring to search for within that attribute's value. Example: Selecting Links Containing "java" The following example demonstrates how to select all anchor elements whose href attribute contains the substring "java" − ...
Read MoreSelect elements whose attribute value contains a specified value with CSS
The CSS [attribute*="value"] selector is used to select elements whose attribute value contains a specified substring. This selector matches any element where the attribute contains the specified value anywhere within it. Syntax [attribute*="value"] { /* CSS properties */ } How It Works The asterisk (*) in the selector means "contains". The selector will match any element where the specified attribute contains the given value as a substring, regardless of its position within the attribute value. Example: Selecting Images by Alt Text The following example selects all images whose ...
Read MoreHow to create a transition effect with CSS?
CSS transitions allow you to smoothly animate changes in CSS properties over a specified duration. They create smooth visual effects when elements change state, such as on hover or focus. Syntax selector { transition: property duration timing-function delay; } Possible Values PropertyDescription propertyCSS property to animate (width, height, color, etc.) durationTime the transition takes (in seconds or milliseconds) timing-functionSpeed curve (ease, linear, ease-in-out, etc.) delayDelay before transition starts (optional) Example: Width Transition on Hover The following example creates a smooth width transition when hovering over a ...
Read MoreAdd a blur effect to the shadow with CSS
The CSS box-shadow property allows you to add shadow effects around an element. When you specify a blur radius value, it creates a soft, blurred shadow instead of a sharp one. Syntax selector { box-shadow: offset-x offset-y blur-radius color; } Parameters ParameterDescription offset-xHorizontal shadow offset (required) offset-yVertical shadow offset (required) blur-radiusAmount of blur applied to shadow (optional) colorShadow color (optional) Example The following example demonstrates how to add a blur effect to a shadow − h2 ...
Read MoreSet 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 More