The Materialize library allows developers to use pre-defined CSS classes and JavaScript methods to make a responsive web design. We can use the Materialize classes to customize the typography, add grids to the web page, and make responsive videos and images. It is always required to make images and videos responsive to avoid the overflow of them. In this tutorial, we will use different classes of Materialize to make images and videos responsive. Using the ‘Responsive-img’ class to Make an Image Responsive The ‘responsive-img’ class of Materialize allows developers to make images responsive. It sets the image's width equal to ... Read More

In this tutorial, we will learn to switch between multiple CSS stylesheets using JavaScript. Have you ever thought that when you toggle the theme of TutorialsPoint’s website, how it changes the CSS of the whole website? Here is a simple answer. When the user presses the button, it switches the CSS stylesheets for the website like it removes the stylesheet for the white theme and adds the stylesheet for the dark theme. Here, we will see examples of switching between multiple CSS files using JavaScript. Syntax Users can follow the syntax below to switch between multiple CSS files using JavaScript. ... Read More

Generally, we add content to the web page using HTML and style the content using CSS. The CSS contains some pseudo-selectors, such as ‘:before’, and we can use it to add content to the web page before any HTML element. Sometimes, developers don’t want to put the content before the HTML element using the ‘:before’ selector, but they require to position the content. For example, if we use the ‘:before’ selector to add an icon before the text, we require space between the text and the icon. So, we need to change the icon's position using the CSS position property. ... Read More

In this tutorial, we will see the top open-source libraries for tailwind CSS components. Tailwind CSS is a utility-first CSS framework providing many pre-designed components to help developers rapidly create cutting-edge web apps. Tailwind CSS has its own set of pre-designed components and several open-source libraries that can be integrated, further enhancing the development experience. Cascading Style Sheet is a language used to describe how Web pages are presented, including their colors, layout, and fonts. Moreover, CSS includes several tools for editing and modifying the website. The best open-source libraries for Tailwind CSS elements are listed below − Tailwind Starter ... Read More

In this tutorial, we are going to see the top 10 tailwind CSS plugins. Plugins are software components that enable customization. It adds specific features to customize the program. It enables to edit and modify the font, colors, and background of the program. With the help of CSS and html, one can make simple and user-friendly webpages. CSS has several functions to edit and customize the webpage. Tailwind CSS Typography Tailwind CSS Typography is a plugin used to style documents. It offers a number of font customization options and typography-related classes that are useful to design text on websites. Syntax ... Read More

While developing the web application, developers must make it look fine in every browser. Some CSS properties are not supported by the browsers like Firefox but are supported by other browsers such as Chrome, Opera, etc. In such cases, we need to write a CSS code that targets only Firefox browser. In this article, we will learn two different methods to write CSS, which targets only Firefox browsers. Different ways to target Firefox with CSS There are two ways to target firefox with CSS as mentioned below. Using the Mozilla-specific CSS Extension ... Read More

In CSS, logical properties allow developers to define the style based on the logical structure of the web page rather than the physical layout. It means we can apply the CSS according to the text direction or content flow. Mainly logical properties are used to set the HTML element's margin, padding, and border. It contains different variants of the margin, padding, and border property. Logical properties can be defined according to the block and inline dimensions. Block dimension − The block dimension represents the perpendicular direction of the content flow. For example, in English text direction is left ... Read More

Nowadays, the animation is the most powerful feature in the applications to attract more users, and it increases users' interest in exploring the application. In web applications, we can create animations using HTML and CSS. However, we can create animations using JavaScript, but it makes the website slower. In this tutorial, we will learn to load text animation using HTML and CSS. It is important to show loading text with animation while fetching data from API or loading web pages to make it more attractive. Example 1 In the example below, we created the ‘loader’ div and ‘loader-inner’ div element ... Read More

In JavaScript, every object has its own properties, and each object contains the prototype property. The string is also an object in JavaScript. So, it also contains the prototype property. The prototype property is nested in the object, meaning every prototype property contains another prototype property. The string object’s prototype property contains the default methods and properties. However, developers can customize the prototype property and add methods and properties to the string prototype. In this tutorial, we will learn to use the methods of string prototype property and customize them. Syntax Users can follow the syntax below to add any ... Read More

To select elements containing certain text in CSS, we can use CSS attribute selectors. We can either use pre-defined attribute or we can add custom attribute in the HTML document. In this article, we are having some div element with some attribute, our task is to select elements containing certain text in CSS Approaches to Select Elements Containing Certain Text Here is a list of approaches to select elements containing certain text in CSS which we will be discussing in this article with stepwise explaination and complete example codes. Using Attribute Value Selector ... Read More