Found 1564 Articles for CSS

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

In HTML, the table is useful to show the data in the formatted way on the web page. For example, we can show student, product, order, subscription, etc., data. Sometimes, we get lengthy data that we need to show in the table format. For example, product descriptions can be longer than other product information. So, In such cases, we must avoid wrapping text to the next line to maintain the table layout. We have a straightforward solution to avoid text wrapping in table cells, which is using the ‘white-space’ property of CSS. Syntax Users can follow the syntax below to ... 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

The CSS contains multiple pseudo selectors and the ‘::before’ pseudo selector is one of them. Every pseudo selector of the CSS allows us to style the HTML elements with different styles. Also, the ‘::before’ pseudo selector allows us to set up the background image for the particular HTML, which we are going to learn in this tutorial. Before we start with the tutorial, let’s clarify that ‘:before’ and ‘::before’ are equal. CSS2 uses the ‘:before, ’ and CSS3 uses the ‘::before’. Syntax Users can follow the syntax below to use the ‘::before’ pseudo selector to set the background image for ... Read More

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

Systematically Awesome Style Sheets, or Sass, is an extension to the core CSS language that performs the role of a pre-processor. Its main goal is to enhance CSS with more advanced features and a more sophisticated look. Sass gives developers the ability to use a completely CSS-compatible syntax by permitting the use of variables, nested rules, mixins, inline imports, inheritance, and other capabilities. Sass positions itself as a very strong and effective extension language for CSS, expertly defining the style of documents in a thorough and organised way. Its fundamental value comes from its capacity to manage large style sheets ... Read More

In HTML, we have division element that can be used to create a column partition section on the webpage. To fill the text inside the div box it has used the paragraph element. Then styling the properties of HTML elements by using internal CSS. This type of example is used to display the differentiation question and when it has been designed through code for a better look. Syntax The following syntax is used in the example − The div element specifies a division or section in the HTML page. …..write some text…. The p element defines the ... Read More

In CSS, the @keyframes rule specifies a sequence of styles that an element should go through during the animation. Here in this article, we will learn how to create dynamic animations using these sequences in ‘@-keyframe’ rule. The ability to animate components on a web page in response to user interaction or changes is referred to as dynamic animation in CSS. Text, graphics, and buttons are examples of components that may be utilised to create visually attractive and engaging user experiences. These styles are then applied to the element via the animation property, which sets the animation's duration, timing function, ... Read More