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
Front End Technology Articles
Page 504 of 652
Using 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 MoreThe :first-child Pseudo-class in CSS
The CSS :first-child pseudo-class selects an element that is the first child element of its parent. This selector is commonly used to apply special styling to the first item in a list, the first paragraph in a section, or the first cell in a table row. Syntax :first-child { /* CSS declarations */ } Example 1: Styling First Table Cell Let's see an example where we remove the left border from the first cell in each table row − ...
Read MoreAbsolute Positioning Using CSS
The CSS position: absolute property removes an element from the normal document flow and positions it relative to its nearest positioned ancestor (any element with position other than static). If no positioned ancestor exists, the element is positioned relative to the document body. Syntax selector { position: absolute; top: value; left: value; right: value; bottom: value; } The position property has the following values − static − Default positioning, follows normal document flow ...
Read MoreCSS Central, Horizontal and Vertical Alignment
CSS provides various methods to align elements and their content horizontally, vertically, or centrally. Understanding these alignment techniques is essential for creating well-structured layouts. Syntax /* Horizontal alignment */ text-align: left | center | right; margin: 0 auto; float: left | right; /* Vertical alignment */ vertical-align: top | middle | bottom; display: flex; align-items: center; Horizontal Alignment Method 1: Text Alignment for Inline Elements Inline elements such as text, spans, and links can be aligned using the text-align property ? .container ...
Read MoreTurning off Float using Clear Property of CSS
The CSS clear property is used to control how elements behave next to floated elements. It specifies which sides of an element should not be adjacent to floating elements, effectively forcing the element to move below any floated content. Syntax clear: value; Possible Values ValueDescription noneThe element is not moved below left or right floated elements. Default value. leftThe element is moved below left floated elements rightThe element is moved below right floated elements bothThe element is moved below both left and right floated elements Example 1: Clearing Left Floated Elements ...
Read MoreThe min-height Property in CSS
The CSS min-height property sets the minimum height for an element's content box. It ensures that the element will never be smaller than the specified minimum height, even if the content would naturally require less space. Syntax selector { min-height: value; } Possible Values ValueDescription lengthSets minimum height in px, em, rem, cm, etc. %Sets minimum height as percentage of parent element autoBrowser calculates minimum height automatically initialSets to default value inheritInherits from parent element Example: Basic Min-Height This example demonstrates how min-height ensures elements maintain ...
Read More