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
CSS Articles
Page 46 of 130
Maintaining 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 MoreDisabling Scroll Anchoring with CSS
To disable the default scroll anchoring provided by web browsers, we can use the overflow-anchor property. Scroll anchoring automatically adjusts the scroll position when content is added above the current viewport to maintain the user's reading position. Syntax selector { overflow-anchor: value; } Possible Values ValueDescription autoDefault value. Scroll anchoring is enabled noneDisables scroll anchoring behavior Example 1: Disable Scroll Anchoring on Body The following example disables scroll anchoring for the entire page − body { ...
Read MoreUsing Data-Attributes (data-*) in CSS
CSS data attributes allow you to store custom information on HTML elements and access it through CSS selectors and the attr() function. These attributes must start with data- followed by a custom name. Syntax /* Selecting elements with specific data attributes */ [data-attribute] { /* styles */ } [data-attribute="value"] { /* styles */ } /* Using data attribute values in CSS */ element::before { content: attr(data-attribute); } Example 1: Interactive Food Menu with Data Attributes This example demonstrates how data attributes can store additional information and interact with JavaScript ...
Read MoreGet and Set CSS Variables with JavaScript
To get and set CSS variables with JavaScript, we can use various methods. The getComputedStyle() method gives an object which includes all the styles applied to the target element. The getPropertyValue() method is used to obtain the desired property from the computed styles. The setProperty() method is used to change the value of CSS variable. Syntax /* Getting CSS Variable */ getComputedStyle(element).getPropertyValue('--variable-name'); /* Setting CSS Variable */ element.style.setProperty('--variable-name', 'value'); Methods Used MethodPurpose getComputedStyle()Returns computed styles of an element getPropertyValue()Gets the value of a specific CSS property setProperty()Sets the value of a CSS ...
Read MoreUsing CSS :placeholder-shown to Customize Styles for Empty Text Input
The CSS :placeholder-shown pseudo-class is used to style input elements when they are displaying placeholder text. This pseudo-class allows you to customize the appearance of empty text fields that show placeholder hints to users. Syntax input:placeholder-shown { /* CSS properties */ } Method 1: Setting Border Color You can change the border color of input fields when they display placeholder text using the border-color property − input { padding: 10px; ...
Read MoreHow to Create a Checkmark / Tick with CSS
Creating a checkmark (tick) symbol with pure CSS is useful for custom form controls, success indicators, and interactive elements. CSS allows us to create checkmarks using borders, pseudo-elements, or transforms without requiring icon fonts or images. Syntax .checkmark { /* Create using borders and rotation */ border-right: 2px solid color; border-bottom: 2px solid color; transform: rotate(45deg); } Method 1: Using Borders and Transform This method creates a checkmark by styling a div with bottom and right borders, then ...
Read More