In this article, we are going learn how CSS classes can be manipulated in HTML using jQuery. Using jQuery, it is easy to manipulate the style of HTML elements. We have several jQuery methods that are used to manipulate the CSS. Let us discuss them one by one with suitable examples. jQuery addClass() Method The jQuery addClass() method is used to add one or more classes to the selected elements. Syntax Following is the syntax of jQuery addClass() method − $(selector).addClass(classname); The "classname" is a required parameter. It specifies one or more class names to be added. Example ... Read More

In this article, we will learn how to display a list in “n” column format in HTML and CSS with the help of columns, column-count, and grid CSS 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 columns, column-count, and grid properties respectively. Let’s understand each approach in detail. Approach 1 In this approach, we will use the column-count CSS property to determine the number of columns we will divide our content into. Let’s understand ... Read More

In this article, we will learn how to disable and hide arrows from number-type input with the help of 2 different approaches, one using CSS, and the other using an “inputmode” attribute. Number-type inputs are useful when we only want inputs in terms of numbers from users, like input for age, height, weight, etc. By default, the browsers show arrows in the number-type inputs that help us change (increase or decrease) the values in the input. Let’s understand how to implement above with the help of some examples. Example 1 In this example, we will use HTML readonly attribute ... Read More

Users can not directly use if/else condition in CSS. For conditional styling in CSS, we have to use alternatives of if/else condition. We will be understanding three different alternate ways to use conditional styling in CSS. In this article, our task is to implement if/else condition in CSS. Since if/else condition is not supported in CSS, we will be understanding its alternate approaches. Approaches for Using Conditional Styling in CSS Here is a list of approaches for using conditional styling in CSS which we will be discussing in this article with stepwise explanation and complete example codes. ... Read More

Sometimes, developers require to put the text in the icons. For example, adding the total number of likes inside the ‘like’ icon makes UI better, adding a comment 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 the text inside a created icon. Syntax Users can follow the syntax below to set the position of the text ... Read More

To prevent text in a table cell from wrapping using CSS, it helps in improving readability. In this article we will understand how we can prevent text in a table cell from wrapping using CSS white-space property. We are having a 5*3 table with some data, our task is to prevent text in a table cell from wrapping using CSS. Steps to Prevent Text in a Table Cell from Wrapping We will be follwoing below mentioned steps to prevent text wrapping in table cell: We have created a table using table tag, used thead ... Read More

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, and the word breaks the container. For example, we created the card to show the file details, and the file name is very long, which can break the card, which always looks worse. So, developers require to prevent the long words from breaking the div element by wrapping the word. Before we start with the solution, let’s understand the problem via example. Example 1 (Long Word Breaking the div) In the ... Read More

In CSS, the ‘display’ property is used to set the display of the children elements. When we set the ‘inline-block’ value for the display property, it shows all children elements side by side. Also, it creates a responsive design automatically as if it doesn’t find enough space, it automatically wraps the children elements. Sometimes, we require to stop wrapping children elements to manage the space of the web pages. In such cases, we can manage the ‘white-space’ property of the CSS to avoid wrapping the children elements. Syntax Users can follow the syntax below to prevent inline-block divs from wrapping ... Read More

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

To Place background image using ::before pseudo selectors, we will be using background-image and ::before psuedo 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. In this article, we are going to place background image using ::before pseudo selector inside a div element. Placing background image using ::before pseudo selectors We have used a div element with class name as background where image will be used. We have used background ... Read More