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 18 of 130
How to define word-break property to allow words to be continued to the next line in CSS?
The CSS word-break property controls how words should break when they reach the edge of their container. This property is essential for maintaining readable text layouts, especially when dealing with long words or narrow containers that might cause text overflow. Syntax selector { word-break: value; } Possible Values ValueDescription normalDefault behavior - words break at natural break points break-allWords can break at any character to prevent overflow keep-allPrevents word breaks for CJK (Chinese, Japanese, Korean) text Example: Using break-all Value The following example demonstrates how word-break: ...
Read MoreHow to define two column layout using flexbox?
To create a two column layout using flexbox can be so easy if you have the knowledge of CSS display property. Flexbox is a layout model in CSS that provides an efficient and flexible way to arrange and distribute space between items within a container. It arranges elements in a single dimension, either horizontally or vertically, within a container. To know more about the CSS Flexbox Layout visit the attached link. Imagine we have parent div and inside that div we have two child div all we have to do is place those child div side by horizontally. ...
Read MoreHow to define the shape of the corners is animatable using CSS?
The CSS border-radius property can be animated to create smooth transitions between different corner shapes. This technique allows you to transform elements from sharp corners to rounded or circular shapes when users interact with them. Syntax selector { border-radius: initial-value; transition: border-radius duration; } selector:hover { border-radius: final-value; } Approach To create animatable corner shapes, follow these steps − Create an HTML element and assign it a class name Set the initial border-radius value (usually 0% for sharp corners) ...
Read MoreHow to define all the list properties in one declaration using CSS?
The CSS list-style property is a shorthand property that allows you to define all list-related styling in one declaration. This property combines list-style-type, list-style-position, and list-style-image into a single, convenient statement. Syntax selector { list-style: [type] [position] [image]; } Property Values ValueDescription list-style-typeSpecifies the type of list marker (disc, decimal, square, etc.) list-style-positionSpecifies marker position (inside or outside) list-style-imageSpecifies an image as the list marker Example 1: Basic List Styling The following example demonstrates how to style an unordered list with decimal markers positioned inside − ...
Read MoreHow to use a not:first-child selector in CSS?
The CSS :not(:first-child) selector combines the :not and :first-child pseudo-classes to select all elements except the first child of their parent. This is useful when you want to style all child elements except the first one. Syntax element:not(:first-child) { /* CSS styles */ } Method 1: Selecting Specific Child Elements You can target specific elements within a parent container, excluding the first one − div p:not(:first-child) { color: green; ...
Read MoreHow to translate an image or icon by hovering over it?
In web development, interactivity is key to providing a memorable user experience. One common technique used to add interactivity is hovering over images or icons to reveal more information or change the appearance. Translating an image or icon by hovering over it is a great way to add some movement and interest to your website. In this article, we will learn how to translate an image or icon on hover. To perform this task, we will learn different approaches using only HTML and CSS. Syntax selector { transform: translateX(value) | translateY(value) | ...
Read MoreHow to transform child elements preserve the 3D transformations?
When working with 3D transformations in CSS, preserving the 3D context for child elements requires specific techniques. The transform-style property controls whether child elements are rendered in 3D space or flattened to a 2D plane. Syntax selector { transform-style: preserve-3d | flat; } Method 1: Using Transform-style Property The transform-style: preserve-3d property allows child elements to maintain their 3D positioning when the parent has 3D transforms applied − .container { perspective: 800px; ...
Read MoreHow to test CSS property of an element using Protractor?
Testing CSS properties is crucial in ensuring the quality of a web application. CSS properties determine how elements are displayed on a webpage, such as font size, color, and layout. Protractor is a popular end-to-end testing framework that uses WebDriver to automate interactions between a web application and a browser, widely used to test Angular applications. In this article, we will learn how to test the CSS properties of an element with the help of Protractor using different methods. Prerequisites Installation Requirements: Install Protractor: npm install -g protractor Update binaries: webdriver-manager update Start server: webdriver-manager ...
Read MoreHow to style scrollbar thumb for the webkit browsers and what are components of scrollbar?
Scrollbars are essential UI components that allow users to navigate through content that extends beyond the visible area. Webkit-based browsers (Chrome, Safari, Edge) provide special CSS pseudo-elements to style scrollbar components, including the draggable thumb handle. Syntax ::-webkit-scrollbar { width: value; } ::-webkit-scrollbar-thumb { background: color; border-radius: value; } ::-webkit-scrollbar-track { background: color; } Scrollbar Components Up Arrow ...
Read MoreHow to style label associated with selected radio input and checked checkboxes using CSS?
To style label associated with selected radio input and checked checkboxes using CSS, is important task in forms as it makes it easy to identify the option selected by user. In this article, we will understand how to style label associated with selected radio input and checked checkboxes using CSS using :checked pseudo class selector and CSS combinators. Syntax /* Style label next to checked radio button */ input[type="radio"]:checked + label { /* CSS styles */ } /* Style label next to checked checkbox */ input[type="checkbox"]:checked + label { ...
Read More