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 15 of 130
How to remove indentation from an unordered list item using CSS?
To remove indentation from an unordered list item using CSS, we can use various approaches to eliminate the default spacing that browsers apply to lists. Indentation provides visual hierarchy, but sometimes we need flat, unindented lists for specific designs. Syntax ul { padding-left: 0; list-style-type: none; } Method 1: Using padding Property The most common approach uses the CSS padding property to remove the default left padding that browsers apply to unordered lists − .no-indent { ...
Read MoreHow to display paragraph elements as inline using CSS?
The CSS display property can be used to change how paragraph elements are displayed. By default, paragraphs are block-level elements that take up the full width and create line breaks. Setting display: inline makes them flow within the same line as surrounding text. Syntax p { display: inline; } Default vs Inline Display Block-level elements like paragraphs normally: Take up the full width of their container Create line breaks before and after Stack vertically Inline elements: Flow within a line of text Only take up as ...
Read MoreHow to disable resizable property of textarea using CSS?
The CSS resize property controls whether an element can be resized by the user. By default, textareas are resizable, allowing users to drag their corners to change dimensions. Setting resize: none disables this functionality completely. Syntax textarea { resize: none; } Possible Values ValueDescription noneDisables resizing completely bothAllows resizing in both directions (default) horizontalAllows resizing only horizontally verticalAllows resizing only vertically Example: Disabling Textarea Resize The following example creates two textareas − one resizable (default) and one non−resizable − ...
Read MoreHow to disable text selection highlighting using CSS?
To disable text selection highlighting using CSS, you can prevent users from selecting and copying content. The CSS user-select property controls whether the user can select text within an element. Syntax selector { user-select: value; } Possible Values ValueDescription noneText cannot be selected by the user autoDefault behavior, text can be selected textText can be selected by the user allAll content of the element will be selected atomically Example: Disabling Text Selection The following example shows how to disable text selection on specific content using the ...
Read MoreSorting Function in SASS
In this article, we will learn about the sorting function in Sass, but before moving forward, let's have a basic idea about Sass; so sass is a powerful and popular preprocessor language for CSS that allows developers to write more efficient and maintainable stylesheets. One of the best advantages of Sass is the ability to use functions to streamline the development process. However, one function that Sass does not provide out of the box is a sorting function. Sorting is a common task in all programming languages and can be useful in many different contexts when working with stylesheets. ...
Read MoreNeumorphismUI Form
NeumorphismUI is a design trend that combines skeuomorphism with modern aesthetics, creating elements that appear to extrude from the background. When applied to forms, it creates a tactile, interactive feeling that enhances user experience and makes interfaces more engaging. Syntax The key to neumorphism is using dual box-shadows to create the illusion of depth − .neumorphic-element { box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7; /* OR for inset effect */ box-shadow: inset -5px -5px 10px #ffffff, inset 5px 5px 10px #b7b7b7; } ...
Read MoreLast-child and last-of-type selector in SASS
SASS provides advanced selectors that extend CSS functionality, including :last-child and :last-of-type pseudo-selectors. These selectors help target specific elements based on their position within parent containers. Last-child Selector in SASS The :last-child selector targets the last child element within a parent container, regardless of the element type. It applies styles to the final element and all its nested children. Syntax .parent-element :last-child { /* CSS properties */ } Example 1: Basic Last-child Selection This example demonstrates selecting the last child element within a container − ...
Read MoreHow to rotate shape loader animation using CSS?
In this article, we'll see how to rotate shape loader animation using CSS. Loading animations of different shapes is an essential part of a web app as it helps users stay engaged while they wait for a website to load. One popular type is the rotating shape loader, where a shape spins continuously until the web page is fully loaded. Moving ahead, we are going to use different approaches to rotate shape loader animations with various examples. Syntax .loader { animation: rotation duration timing-function iteration-count; } @keyframes rotation { ...
Read MoreHow to design initial letter of text paragraph using CSS?
The CSS ::first-letter pseudo-element is used to style the first letter of a text paragraph. This allows you to apply specific styles to the initial letter of the first line of a block-level element, making it stand out with different font size, color, or style. Syntax selector::first-letter { property: value; } Common Properties The following properties are commonly used with ::first-letter − PropertyDescription font-sizeSets the size of the first letter colorChanges the color of the first letter floatCreates drop cap effect line-heightControls vertical spacing marginAdds space around the ...
Read MoreHow to display a link using only CSS?
To display a link using CSS, we can style anchor elements with various properties to control their appearance and behavior. CSS allows us to customize how links look, whether they appear active or disabled, and how users interact with them. Syntax a { color: value; text-decoration: value; pointer-events: value; cursor: value; } Properties Used The following CSS properties are commonly used to style links − PropertyDescription colorDefines the color of the link text text-decorationControls underline, overline, ...
Read More