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 on Trending Technologies
Technical articles with clear explanations and examples
Crop Images in CSS with object-fit and object-position
CSS object-fit and object-position properties help us crop images and specify how they are displayed within their container elements. The object-fit property controls how an image is resized to fit its container, while object-position determines the alignment of the image within the container. Syntax selector { object-fit: value; object-position: value; } Object-fit Values ValueDescription fillStretches the image to fill the container (default) containScales image to fit container while maintaining aspect ratio coverScales image to cover container while maintaining aspect ratio scale-downBehaves like contain or none, ...
Read MoreSelecting Child Elements with CSS
CSS provides several combinators to select child elements and descendants of a parent element. The most commonly used are the child combinator (>) and the descendant combinator (space), along with pseudo-selectors like :nth-child(). Syntax /* Child combinator - selects direct children only */ parent > child { property: value; } /* Descendant combinator - selects all descendants */ parent descendant { property: value; } /* nth-child selector - selects specific child position */ element:nth-child(n) { property: value; } Child Combinator The child combinator (>) selects only the direct child elements of a ...
Read MoreSelecting Sibling Elements with CSS
To select sibling elements with CSS, we can use the adjacent or the general sibling selectors. Let us understand them one by one with examples. Both of them allow selecting sibling elements that share the same parent element. Syntax /* Adjacent sibling selector */ selector1 + selector2 { property: value; } /* General sibling selector */ selector1 ~ selector2 { property: value; } Adjacent Sibling Selector (+) The adjacent sibling selector (+) matches an element that occurs immediately after the first selector. Both elements must ...
Read MoreCreating Attractive First Lines with CSS ::first-line
The CSS ::first-line pseudo-element allows you to apply styles specifically to the first line of text within an element. This is particularly useful for creating attractive typography effects like drop caps or highlighted opening lines. Syntax selector::first-line { property: value; } Example 1: Bold and Colored First Line The following example makes the first line of each paragraph bold and colored − body { text-align: center; ...
Read MoreStyling First-Letters with CSS ::first-letter
The CSS ::first-letter pseudo-element allows you to style the first letter of a block-level element. This is commonly used to create decorative drop caps in articles and enhance typography. Note that punctuation marks and special characters can affect which character is considered the "first letter". Syntax selector::first-letter { property: value; } Example 1: Styling All First Letters The following example applies styling to the first letter of all block elements − body { ...
Read MoreMaintaining Aspect Ratios for HTML Videos with CSS
Maintaining aspect ratios for HTML videos is crucial for responsive design. CSS provides two main approaches: using the padding-top property with percentage values or the modern aspect-ratio property to ensure videos display correctly across different screen sizes. Syntax /* Method 1: Using padding-top */ .container { padding-top: percentage; height: 0; position: relative; } /* Method 2: Using aspect-ratio property */ .container { aspect-ratio: width / height; } Method 1: Using Padding-Top Property The padding-top method works by ...
Read MoreAdding Hyphens to Text with the CSS hyphens Property
The CSS hyphens property controls how words are broken and hyphenated when they overflow their container. This property is essential for text layout, especially in narrow columns or responsive designs where text needs to wrap gracefully. Syntax selector { hyphens: value; } Possible Values ValueDescription noneWords are not hyphenated, even at manual break points manualWords are hyphenated only at manual break points ( or ‐). This is the default value. autoWords are automatically hyphenated based on the browser's hyphenation algorithm none: ...
Read MoreSetting Tab Sizes in HTML with CSS tab-size Property
The CSS tab-size property allows you to control the width of tab characters in your HTML content. This property is particularly useful when displaying preformatted text or code where tab spacing is important for readability and alignment. Syntax selector { tab-size: value; } Possible Values ValueDescription numberSets the tab size as a number of space characters (default is 8) lengthSets the tab size using length units (px, em, rem, etc.) Example 1: Large Tab Size The following example demonstrates setting a large tab size of 32 ...
Read MoreChange Cursor Color with CSS caret-color
The CSS caret-color property allows you to change the color of the text cursor (caret) in editable elements like input fields and textareas. This property enhances the visual design of forms by customizing the cursor to match your website's color scheme. Syntax selector { caret-color: value; } Possible Values ValueDescription colorAny valid CSS color value (name, hex, rgb, etc.) autoBrowser default color (usually black) transparentMakes the caret invisible Example 1: Changing Input Field Cursor Color The following example demonstrates how to change the cursor color in ...
Read MoreControlling Whether Mouse & Touch Allowed with CSS pointer-events Property
The CSS pointer-events property controls whether an element responds to mouse events, touch events, and other pointer interactions. When set to none, the element becomes "click-through" and ignores all pointer events. Syntax selector { pointer-events: auto | none; } Possible Values ValueDescription autoDefault value. Element responds to all pointer events normally noneElement ignores all pointer events and becomes "click-through" Example 1: Disabling Link Clicks The following example shows how to disable pointer events on links − ...
Read More