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 608 of 801
Standard Link Styles in CSS
We can style links as per our requirements. It is recommended that links have styles which distinguish them from normal text. The default link styles for different link states is as follows − Link State Color active #EE0000 focus #5E9ED6 or a similar shade of blue outline in case of Windows and Mac, #F07746 outline for Linux while text color remains the same hover #0000EE link #0000EE visited #551A8B Note − The above colors may change with newer versions of browsers. For proper functionality, ...
Read MoreText Transformation Working with CSS
The CSS text-transform property allows us to control the capitalization and casing of text content. It can transform text to uppercase, lowercase, capitalize words, or leave it unchanged. Syntax selector { text-transform: value; } Possible Values ValueDescription uppercaseTransforms all text to uppercase letters lowercaseTransforms all text to lowercase letters capitalizeCapitalizes the first letter of each word noneNo transformation (default value) Example 1: Basic Text Transformations The following example demonstrates uppercase, lowercase, and capitalize transformations − h2 ...
Read MoreSet Text Alignment Working with CSS
The CSS text-align property is used to horizontally align text content within an element. It controls the alignment of text and inline elements inside block-level containers. Syntax selector { text-align: value; } Possible Values ValueDescription leftAligns text to the left (default for most languages) rightAligns text to the right centerCenters the text justifyStretches text to align both left and right edges Example 1: Basic Text Alignment The following example demonstrates different text alignment options − .container ...
Read MoreStyling Links Working with CSS
CSS allows us to style links as desired. We can format text by adding colors, backgrounds, changing sizes, and even adding animations to create pleasant visual effects. Links can be styled using various pseudo-classes to define their appearance in different states. Syntax a { property: value; } a:link { /* unvisited link */ } a:visited { /* visited link */ } a:hover { /* mouse over link */ } a:active { /* selected link */ } Pseudo-Class Order For proper functionality, the order of pseudo selectors must be: :link, ...
Read MoreAdjacent Sibling Selectors in CSS
The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It selects only those elements which immediately follow the first selector. The + sign is used as a separator between the two selectors. div p span Element 1 Adjacent Sibling Element 3 + ...
Read MoreUsing the combination of Percentage and Em in CSS
We can use a combination of percentage and em to specify the font-size of elements for better compatibility of font. This allows us to have uniform text across different browsers. Both percentage and em are relative measurements that scale based on their parent elements, making them ideal for responsive design. Syntax selector { font-size: value; } Where value can be a percentage (e.g., 80%, 120%) or em unit (e.g., 1.2em, 2em). Percentages are relative to the parent element's font size, while em units are also relative to the parent's font size. ...
Read MoreIncluding CSS in HTML Documents
Adding CSS to an HTML document enhances the appearance of the web page. Various styles for images, borders, margins, and colors can be easily added. To include CSS in HTML documents, we can either include them internally, inline, or link an external file. Syntax /* Inline CSS */ /* Internal CSS */ selector { property: value; } /* External CSS */ Method 1: Inline CSS With inline CSS, use the style attribute ...
Read MoreThe :nth-child Pseudo-class in CSS
The CSS :nth-child() pseudo-class selects an element that is the nth child of its parent. It allows you to target specific child elements based on their position in the parent container. Syntax :nth-child(n) { /* declarations */ } Possible Values ValueDescription numberSelects the nth child element (1, 2, 3, etc.) oddSelects all odd-positioned child elements evenSelects all even-positioned child elements 2n+1Formula-based selection (every 2nd element starting from 1st) Example 1: Styling Multiple Child Elements The following example demonstrates how to style different child elements using :nth-child() ...
Read MoreCreating Media Dependent Style Sheets using CSS
Media dependent stylesheets are stylesheets that apply to an HTML document only when the media type matches the device type on which the document is displayed. This allows you to create different styles for different devices like screens, printers, or mobile devices. Syntax /* Method 1: Using @media at-rule */ @media media-type and (condition) { selector { property: value; } } /* Method 2: Using @import at-rule */ @import url("stylesheet.css") media-type; /* Method 3: Using HTML link element */ ...
Read MoreOverlapping Elements with Z-Index using CSS
The CSS z-index property allows you to control the stacking order of overlapping elements. Elements with higher z-index values appear in front of elements with lower values, creating layered effects on your webpage. Syntax selector { z-index: value; position: relative | absolute | fixed | sticky; } Note: The z-index property only works on positioned elements (elements with position other than static). Possible Values ValueDescription autoDefault stacking order (same as parent) integerPositive or negative number defining stack order inheritInherits z-index from parent element ...
Read More