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
Web Development Articles
Page 554 of 801
Displaying XML Using CSS
XML is a markup language which stands for Extensible Markup Language, designed especially for web documents. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable, allowing developers to create custom tags. In this article, we are displaying XML content using CSS to style and format XML elements for better presentation in web browsers. Syntax To link CSS to an XML file, use the following declaration at the top of your XML document − Steps for Displaying XML using CSS Follow these steps ...
Read MoreDoes overflow: hidden create a new block formatting context in CSS?
The block formatting context (BFC) is a part of the web page layout in CSS where elements are positioned and interact with each other. In simple words, it is like a container that defines a set of rules for how elements should behave inside the container. In this article, we are going to see "Does overflow: hidden create a new block formatting context (BFC) in CSS?" The answer is yes because in CSS, the overflow: hidden property can create a new block formatting context (BFC). When an HTML element has an overflow value other than visible (the default ...
Read MoreDesign a Portfolio Webpage using HTML and CSS
To design a portfolio webpage using HTML and CSS can be useful to showcase your best works and attract attention of professionals in collaborating or hiring you. Portfolio website serves as a platform to display your work and demonstrate your skills. It has the same purpose as a CV (Curriculum vitae). The portfolio website will showcase them with engaging visual images and often more detailed than a hand-written CV. In this article, we will learn and understand how we can design a portfolio webpage using HTML and CSS through stepwise explanation and example code. Why Create a Portfolio ...
Read MoreDesign a transparent login/Sign Up webpage using HTML and CSS
In HTML, the login forms are used to collect information about the user and have a button to send the details for server-side operations. The login form contains basic information such as Name, Date of birth, Email, Mobile number, Gender, Address, etc. Nowadays, HTML forms are used in almost every website on the Internet to gather user information. In this article, we are going to design a transparent login form on a webpage using HTML and CSS. Syntax .transparent-element { background: none; background-color: transparent; ...
Read MoreHow 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 More