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 George John
Page 23 of 79
How 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 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 MoreStyle elements with a "readonly" attribute with CSS
The CSS :read-only pseudo-class selector is used to style form elements that have the readonly attribute. This selector targets input fields and textareas that users cannot modify. Syntax input:read-only { /* CSS properties */ } textarea:read-only { /* CSS properties */ } /* Target all read-only elements */ :read-only { /* CSS properties */ } Example: Styling Read-Only Input Fields The following example demonstrates how to apply different styles to read-only and editable input fields − ...
Read MoreRole of CSS :nth-child(n) Selector
The CSS :nth-child(n) selector allows you to select and style elements based on their position among siblings within a parent element. This powerful pseudo-class selector enables precise targeting of specific child elements without adding extra classes or IDs. Syntax selector:nth-child(n) { property: value; } Possible Values ValueDescription oddSelects every odd-numbered child evenSelects every even-numbered child nSpecific position number (1, 2, 3, etc.) an+bFormula for complex patterns Example 1: Selecting Specific Position The following example styles the fourth paragraph element with an orange background − ...
Read MoreRole of CSS :last-child Selector
The CSS :last-child selector is a pseudo-class that targets an element that is the last child of its parent container. This selector is commonly used to apply specific styles to the final element in a group, such as removing bottom margins or adding special formatting. Syntax selector:last-child { property: value; } Example: Styling Last Paragraph The following example demonstrates how to style the last paragraph element with an orange background − p:last-child { ...
Read MoreRole of CSS :first-of-type Selector
The CSS :first-of-type pseudo-class selector targets the first element of its type among siblings within the same parent container. It's particularly useful for styling the first occurrence of specific HTML elements without adding extra classes. Syntax element:first-of-type { property: value; } Example: First Paragraph Styling The following example demonstrates how to style the first paragraph element within its parent − p:first-of-type { background-color: orange; ...
Read MoreTransform the element by using 16 values of matrix with CSS3
The CSS matrix3d() function is used to transform HTML elements in 3D space using a 4x4 transformation matrix with 16 values. This powerful function allows you to perform complex 3D transformations including rotation, scaling, skewing, and translation all in one declaration. Syntax transform: matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4); Parameters ValuesDescription a1, b1, c1, d1First row of the 4x4 matrix − controls X-axis scaling and rotation a2, b2, c2, d2Second row of the 4x4 matrix − controls Y-axis scaling and rotation a3, b3, ...
Read MoreCSS position: fixed;
The CSS position: fixed; property positions an element relative to the viewport, which means it stays in the same place even when the page is scrolled. Fixed elements are removed from the normal document flow and positioned using the top, right, bottom, and left properties. Syntax selector { position: fixed; top: value; right: value; bottom: value; left: value; } Possible Values PropertyValueDescription positionfixedSets the positioning method to fixed toplength | %Distance from the ...
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 MoreSet the style of the bottom border using CSS
The CSS border-bottom-style property is used to set the style of the bottom border of an element. You can create various visual effects like dotted, dashed, solid, and other border styles. Syntax selector { border-bottom-style: value; } Possible Values ValueDescription noneNo border (default) solidA solid line border dottedA series of dots dashedA series of dashes doubleTwo solid lines insetBorder appears embedded outsetBorder appears raised Example The following example demonstrates different bottom border styles − p { ...
Read More