CSS Articles - Page 15 of 130

How to remove indentation from an unordered list item using CSS?

Tarun Singh
Updated on 13-Aug-2024 17:46:23

7K+ Views

To remove indentation from an unordered list item using CSS, we will be understanding various approaches. Indentation is a common feature used to give a visual hierarchy to the list items. In this article, we will be going through five different approaches to remove indentation from an unordered list item using CSS. We are having an unordered list of different programming languages, our task is to remove the indentation from unordered list using CSS. Approaches to Remove Indentation from an Unordered List Item Here is a list of approaches to remove indentation from an unordered list item using CSS which ... Read More

How to display paragraph elements as inline using CSS?

Tapas Kumar Ghosh
Updated on 16-May-2023 09:25:49

3K+ Views

CSS has internal and inline styles that can be used to display the paragraph element in an inline manner. CSS is a language used for styling the HTML and XML texts. Changing the display property of an HTML element is a typical CSS job. The display attribute of an element indicates how it should be presented, such as block, inline, or inline-block. When displaying a paragraph element inline, the display property must be modified from its default block value to inline. Here we are going to learn how to develop a css code that will display the paragraph elements as ... Read More

How to disable resizable property of textarea using CSS?

Tapas Kumar Ghosh
Updated on 16-May-2023 09:33:13

1K+ Views

In CSS we can use the ‘resize’ property to resize the textarea box of a webpage. We can resize the height and width of the textarea box. In case if we set the resize value to none, the textarea box will not resize. In some situations, disabling the resizable functionality of a textbox area in HTML might be accessible if we wish to limit user interactions and control the layout of the input. The size of the text entry is important to the design and the layout of webpage or application is also required. In this article, we will create ... Read More

How to disable text selection highlighting using CSS?

Tapas Kumar Ghosh
Updated on 19-Aug-2024 16:19:59

9K+ Views

To disable text selection highlighting using CSS, it can help in preventing the content copying. We can use CSS user-select property to disable the text selection highlighting. In this article, we will be understanding how we can use CSS user-select property to disable text selection highlighting. we are having a div element with some textual content written inside it. Our task is to disable text selection highlighting using CSS. Disabling Text Selection Highlighting Using CSS We have used a div tag to write the textual content in it. After writing the ... Read More

Mobile

Sorting Function in SASS

Rushi Javiya
Updated on 11-May-2023 13:58:32

380 Views

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. Unfortunately, ... Read More

NeumorphismUI Form

Rushi Javiya
Updated on 11-May-2023 13:53:14

238 Views

NeumorphismUI is a design trend that has gained popularity recently, combining skeuomorphism with a modern twist. When applied to forms, NeumorphismUI is a design style worth considering. It can make the user interface feel more tangible and interactive, ultimately improving the overall usability of the form. In this article, we'll explore the different types of NeumorphismUI forms and provide examples and best practices for each. Example In this example, we created a login form to enhance the enhanced experience. First, we started by designing the form with a neumorphic style, which gives it a modern and elegant look. We ... Read More

Last-child and last-of-type selector in SASS

Rushi Javiya
Updated on 11-May-2023 13:50:11

4K+ Views

The SASS provides various features over the normal CSS to write easy and maintainable code, and advanced selectors are one of them. A SASS contains the last-child, and last-of-type selectors, which we will discuss in this tutorial. Last-child Selector in SASS The ‘last-child’ selector allows developers to select the last element inside the parent element. Also, it allows you to select the last HTML element regardless of the type of the element. If the last element contains the nested child elements, it also applies style to the nested element as they are a part of the last child element. Syntax ... Read More

How to rotate shape loader animation using CSS?

Tarun Singh
Updated on 10-May-2023 12:52:12

3K+ Views

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 the users stay engaged while they wait for a website to load. There are multiple animations that one can add to a web page or application, one popular type of loading animation is the rotating shape loader. This animation has good features in which a shape is spinning continuously until the web page is fully loaded. Moving ahead, we are going to use a different approach to rotate the shape loader ... Read More

How to design initial letter of text paragraph using CSS?

Tapas Kumar Ghosh
Updated on 10-May-2023 15:19:38

3K+ Views

We have seen in various chapters of many books guiding on how to design the first letter of word using CSS. In CSS we can use the ::first-letter pseudo-element to design the first initial letter of a text paragraph. This allows us to apply particular styles to the initial letter of the first line of a block-level element. For example, we may make the initial letter larger, a different font, or a different color from the rest of the text. Syntax p::first-letter{ property_name : value_name; } first-letter − The first letter is defined as the pseudo-element ... Read More

How to display a link using only CSS?

Tapas Kumar Ghosh
Updated on 10-May-2023 15:14:32

444 Views

To disable the link of any website, we use the properties of CSS like pointer-event set to none, and then the cursor can be set to default which will disable the active link and the users cannot access the links. Sometimes the link has to be disabled to bring some updates or security to the website. The government or organization is the best suited for this example, whenever they need any updation required in the backend of the website they simply disable the link. In this article, we will display how to display a link using only CSS. Syntax ... Read More

Advertisements