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 13 of 130
How to display a list in n columns format?
In this article, we will learn how to display a list in "n" column format in HTML and CSS with the help of CSS Multi-Column Layout, Flexbox, and CSS Grid properties. Displaying a list in columns can be a useful way to save space and make the information more visually appealing. We can achieve this by using different approaches that rely on column-count, flexbox, and grid properties respectively. Syntax /* Multi-Column Layout */ selector { column-count: number; } /* Flexbox Approach */ selector { display: flex; ...
Read MoreHow to disable arrows from Number input?
In this article, we will learn how to disable and hide arrows from number-type input fields using CSS. Number-type inputs display spinner arrows by default that allow users to increment or decrement values, but sometimes you may want to remove these for a cleaner interface. Number-type inputs are useful when we only want numeric input from users, like input for age, height, weight, etc. By default, browsers show spinner arrows in number inputs that help change the values. Syntax /* WebKit browsers (Chrome, Safari) */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; ...
Read Moreif/else condition in CSS
CSS doesn't support traditional if/else conditions like programming languages. However, there are several techniques to achieve conditional styling through CSS pseudo-classes, media queries, and combinators that simulate conditional logic. Syntax /* Using pseudo-classes for conditional styling */ selector:pseudo-class { property: value; } /* Using media queries for responsive conditions */ @media (condition) { selector { property: value; } } Approaches for Using Conditional Styling in CSS Here are three main approaches to implement ...
Read MoreHow to put the text inside of a created icon?
Sometimes, developers require to put text inside icons. For example, adding the total number of likes inside the 'like' icon makes UI better, adding a comment count inside the comment icon, showing a particular number in any icon, etc. In HTML, we can add the text and icon both separately. After that, we can set the position of the text to place them in the middle of the icon. In this tutorial, we will learn different examples of putting text inside a created icon. Syntax .text { position: absolute; text-align: ...
Read MoreHow to prevent text in a table cell from wrapping using CSS?
To prevent text in a table cell from wrapping using CSS, you can use the white-space property. This technique helps maintain better table layout and improves readability by ensuring text remains on a single line within cells. Syntax selector { white-space: nowrap; } Possible Values ValueDescription nowrapPrevents text from wrapping to new lines normalDefault behavior - allows text wrapping prePreserves whitespace and prevents wrapping Example: Preventing Text Wrapping in Table Headers The following example demonstrates how to prevent text wrapping in table headers using the white-space: ...
Read MoreHow to prevent long words from breaking my div?
Sometimes, developers require to show long words on the web page. For example, show URLs, long file names, etc. Sometimes, the word length is greater than the parent container's width, and the word breaks the container, causing layout issues and poor visual appearance. For example, when creating a card to show file details, if the file name is very long, it can break the card layout. This article demonstrates how to prevent long words from breaking div elements by using CSS word-wrapping techniques. Understanding the Problem Let's first understand the problem with a visual example − ...
Read MoreHow to prevent inline-block divs from wrapping?
The CSS white-space property can be used to prevent inline-block elements from wrapping to the next line. When you set display: inline-block on elements, they normally wrap when there's insufficient horizontal space. Using white-space: nowrap on the parent container forces all inline-block children to stay on the same line. Syntax .parent-container { white-space: nowrap; } .child-element { display: inline-block; } Example 1: Basic Inline-Block Divs In this example, we create three inline-block divs that won't wrap even when the browser window is resized − ...
Read MoreInherit a class to another file in Sass
The SASS is a pre-processor built on top of the CSS to manipulate the CSS code better. It contains multiple directives and rules, making it easy to write CSS code. It also contains some very useful features such as inheritance, if/else statements, functions, etc. In SASS, we can import one file into another file and use one file's content for another. It also allows us to create inheritance between multiple classes. We can use the @extend directive to inherit one class to another class. By using inheritance in CSS, we can increase the reusability of the code. In ...
Read MoreHow to place background image using ::before pseudo selectors in CSS?
To place background image using ::before pseudo selectors, we will be using background-image and ::before pseudo element. CSS ::before pseudo-element is used to add content before the selected element with the content property allowing to insert text, images, or decorative elements, without modifying the HTML structure. This technique is particularly useful when you want to add a background image that can be styled independently from the main element, providing better control over layering and positioning. Syntax selector::before { content: ""; background-image: url("path/to/image.jpg"); position: absolute; ...
Read MoreAdvanced JavaScript Animation Techniques using CSS and JavaScript Libraries
As web development continues to evolve, creating engaging and interactive user experiences has become an essential part of modern web applications. From subtle micro-interactions to complex visual effects, animations play a crucial role in capturing the attention of users and conveying information in a dynamic and visually appealing manner. JavaScript, in combination with CSS and various JavaScript libraries, offers powerful techniques for creating advanced animations on the web. In this article, we will delve into the world of advanced JavaScript animation techniques, exploring how CSS transitions and JavaScript libraries can be harnessed to bring your web animations to life. ...
Read More