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
HTML Articles
Page 144 of 151
How do HTML and CSS work together?
HTML (HyperText Markup Language) is a markup language that creates the structure and skeleton of a website, while CSS (Cascading Style Sheets) is a styling language that makes the skeleton attractive by applying visual properties. Think of HTML as the foundation and framework of a house, and CSS as the paint, decorations, and interior design that make it beautiful. How HTML and CSS Work Together When a user requests a webpage, the server sends HTML and CSS files to the browser. The browser first reads the HTML to understand the page structure, then applies CSS styles to make ...
Read MoreHow to create a Gradient Shadow using CSS ?
The CSS gradient shadow effect creates stunning visual shadows using color gradients instead of traditional solid shadows. This technique combines the ::after pseudo-element with CSS gradient functions and filter properties to create eye-catching shadows that enhance UI design. Syntax .element::after { content: ""; position: absolute; inset: -0.5rem; background: linear-gradient(direction, color1, color2, ...); /* or */ background: radial-gradient(color1, color2, ...); filter: blur(value); z-index: -1; } ...
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 divide text into two column layout using HTML and CSS?
Creating a two-column text layout is a common web design requirement for displaying content side-by-side. This can be achieved using HTML div elements combined with CSS positioning properties like float or modern layout methods like flexbox. Syntax .column { width: 50%; float: left; } Properties Used The following CSS properties are commonly used for two-column layouts − width − Defines the width of each column (typically 50% or specific pixel values) float − Positions elements side-by-side (left/right) margin − Creates spacing around columns padding ...
Read MoreHow to design Meet the Team Page using HTML and CSS
In this article, we will learn how to design a "Meet the Team" page using HTML and CSS. The team page plays a very important role while creating websites for any business or organization. People from different countries connect with the business through team members. The team page is a great way to introduce the team that shows the members of the organization or company. Key Properties Used The following CSS properties are used in this example − text-align − Aligns text content to center, left, or right. background-color − Sets the background color of elements. ...
Read MoreCreating Browsers Window using HTML and CSS
A browser window is the graphical user interface (GUI) element of a web browser that displays web pages and web applications. It usually consists of a title bar, menu bar, address bar, navigation buttons, and content area. Syntax .container { border: 1px solid #ccc; border-radius: 5px; overflow: hidden; } .buttons { display: flex; } .minimize, .maximize, .close { width: 12px; height: 12px; border-radius: 50%; } ...
Read MoreCreating Snackbar using HTML, CSS and Javascript
Snackbars are notification bars that appear at the bottom of a web page to display an important message, usually to confirm an action or provide feedback to the user. They are displayed on the screen for a few seconds and then disappear automatically. They are an essential element of user interface design and are widely used in web applications. Syntax A basic snackbar consists of HTML structure, CSS styling for positioning and animations, and JavaScript for show/hide functionality − .snackbar { visibility: hidden; position: fixed; ...
Read MoreCreating a skewed background using CSS
A skewed background is a design effect that creates a diagonal or angled appearance on the background of a web page or element. This effect can be achieved using CSS transforms to skew the container element, along with other CSS properties like background-color, gradients, and images to create the desired visual effect. Syntax /* Using transform */ .skewed-element { transform: skewY(angle); } /* Using clip-path */ .clipped-element { clip-path: polygon(coordinates); } Method 1: Using Transform Property The following example creates a skewed background using the ...
Read More