Found 8895 Articles for Front End Technology

What is maximum & minimum value for z-index property in CSS?

Shubham Vora
Updated on 11-Apr-2023 16:20:13

2K+ Views

In CSS, the z-index property is used to put one element on another. For example, we can create a stack of multiple HTML elements using CSS. If you have ever used the z-index property, you must have seen its value like 9, 99, 999, 0, -9, -99999, etc. Have you ever asked yourself what could be the maximum value of the z-index, and have you researched about that on the internet? If not, go through this guide. The maximum value of the z-index property is equal to 2147483647, and the minimum value is -2147483647. The number 2147483647 equals 232, the ... Read More

How to create nofollow link using HTML5

Aman Gupta
Updated on 11-Apr-2023 15:48:39

292 Views

Overview In simple language, a “nofollow” link is a link which tells the google search engine to not to follow the particular link. As when it comes to the search engine optimization of the page, time the links play a vital role in the ranking of the page. In the HTML5 we can make any link a nofollow link by assigning the nofollow attribute to the anchor tag. Syntax The basic syntax used to create any link a nofollow link is −

Set the opacity only to background color not on the text in CSS

Shubham Vora
Updated on 11-Apr-2023 16:17:06

7K+ Views

In CSS, we can set the background for the particular HTML element using the ‘background’ property of CSS. Sometimes, we may require to decrease the background colour's opacity without affecting the HTML element's content. We can decrease the background color's opacity by decreasing the alpha variable's value while assigning the color value to the ‘background color’ property. Syntax Users can follow the syntax below to set the opacity only to background color not on the text in CSS. background: rgba(255, 0, 0, opacity); or background-color: hsla(0, 100%, 30%, opacity); Users can set the background color using ... Read More

Set the limit of text length to N lines using CSS

Shubham Vora
Updated on 11-Apr-2023 16:15:57

9K+ Views

Sometimes, developers require to truncate the texts according to the dimensions of the HTML element. For example, the width of the div element is 100px, and it can contain only some characters. So, we need to truncate the texts using CSS. However, we can truncate the text using JavaScript, but it can cause a problem. For example, we can show 18 characters in 100px, but sometimes due to the capitalization of characters, it can show fewer characters. In such a case, if we show 18 characters, it can overflow. So, it is a better idea to truncate the text using ... Read More

How to create a navbar in Bootstrap

Aman Gupta
Updated on 11-Apr-2023 15:47:22

922 Views

Overview A navbar is a common component in any web application. A navbar can also act like a header which contains a logo of an organization or the brand which represents the website. It also contains the navigation part of the website through which we can navigate through a part of the website directly. To make a navigation bar using bootstrap can be achieved by integrating some of the predefined navbar classes to a nav element which will slightly help us to build a navbar. There are some predefined bootstrap classes that must and will provide a shape to ... Read More

Make a div horizontally scrollable using CSS

Shubham Vora
Updated on 26-Jun-2024 17:18:47

4K+ Views

To make a div horizontally scrollable we will need to use the CSS overflow property. In this article we will show all the possible ways to make div horizontally scrollable. First, let’s understand why we need to make a div horizontally scrollable. For example, the width of the parent div element is 500px, or the screen size is 500px. Now, the content of the div element is 1500px. So, if we don’t make the parent div horizontally scrollable, it breaks the UI of the application. So, we can make it scrollable, and users can scroll to see the invisible ... Read More

How to create a multiline input control text area in HTML5

Aman Gupta
Updated on 11-Apr-2023 15:45:30

414 Views

Overview The text area is an HTML tag which is used to write a multiline text in it. So to control the multiline text inside the text area can be achieved with the help of some predefined HTML attribute. These HTML attributes are maxlength, minlength, rows, column and readonly. By using these attributes we can control the text inside the text area. Syntax The syntax to create a text area in the HTML is − Algorithm Step 1 − Create a HTML boilerplate in your text editor. Step 2 − Add the text area tag to the body ... Read More

How to create nest tables within tables in HTML?

Aayush Mohan Sinha
Updated on 11-Apr-2023 16:13:05

2K+ Views

Tables are a fundamental and critical aspect of web development and are used to present information in an ordered and legible format. However, some situations may necessitate presenting more intricate data that necessitates the use of nested tables. Nested tables are tables that are located within other table cells. In this article, we will direct you through the process of building nested tables in HTML, with a meticulous and detailed explanation accompanied by illustrations to help you comprehend the concept more effectively. Whether you're a neophyte or an experienced web designer, this article will furnish you with the knowledge and ... Read More

How to create Nested Accordion using Google AMP amp-accordion?

Aayush Mohan Sinha
Updated on 11-Apr-2023 16:12:26

344 Views

Nested accordion menus are an effective way to organize and present large amounts of information in a compact and intuitive manner. With the growing importance of mobile devices in accessing the internet, it has become increasingly important to optimize web pages for faster loading and improved user experience. This is where the Google Accelerated Mobile Pages (AMP) project comes into play, offering a streamlined and fast-loading way of creating web pages for mobile devices. In this article, we will explore how to create nested accordion menus using Google AMP’s amp-accordion component, providing a clear and organized way to present complex ... Read More

How to create mixin for placeholder in SASS

Aman Gupta
Updated on 11-Apr-2023 15:40:15

127 Views

Overview A placeholder is an attribute of a HTML input tag, which tells the user about the input tag what information is to be filled in it. To style the placeholder of an input tag we will use the Syntactically Awesome Style Sheets (SASS) preprocessor scripting language in which it provides us with a feature of mixin. A mixin is like a simple function which we create in other programming languages. It helps us to not repeat the styling in the style sheet. To use the SASS mixin with our program firstly we should have to install the SASS to ... Read More

Advertisements