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 150 of 151
Maintaining Aspect Ratios for HTML Videos with CSS
Maintaining aspect ratios for HTML videos is crucial for responsive design. CSS provides two main approaches: using the padding-top property with percentage values or the modern aspect-ratio property to ensure videos display correctly across different screen sizes. Syntax /* Method 1: Using padding-top */ .container { padding-top: percentage; height: 0; position: relative; } /* Method 2: Using aspect-ratio property */ .container { aspect-ratio: width / height; } Method 1: Using Padding-Top Property The padding-top method works by ...
Read MoreHTML Tables with Fixed Header on Scroll in CSS
We can create HTML tables with fixed header on scroll using CSS. It helps to increase readability as user doesn't have to scroll everytime to check the table header. In this article, we will learn and understand two different approaches for HTML tables with fixed header on scroll in CSS. We have a table inside a div element with class name as container. Our task is to fix HTML table header on scroll using CSS. Syntax /* Method 1: Using position sticky */ th { position: sticky; top: ...
Read MoreHow to create a signup form with HTML and CSS?
In this article, we will be understanding How to create a signup form with HTML and CSS. A sign-up form allows any new user visiting the website to register. It includes adding an email-id, password, repeat password, and clicking on the Sign-Up button to register. To allow the browser to save the password, click the Remember Me. You can also provide a Terms & Policies link so the users can first read the registration terms. Let us see how to create a signup form with HTML and CSS. Steps to Create Sign Up Form We are following ...
Read MoreHow to create a responsive Image Grid with HTML and CSS?
A responsive image grid displays images in a grid layout that adapts to different screen sizes. Using CSS flexbox, we can create a flexible grid system that automatically adjusts the number of columns based on the viewport width. Syntax /* Outer grid container */ .outer-grid { display: flex; flex-wrap: wrap; } /* Inner grid columns */ .inner-grid { flex: percentage; max-width: percentage; } /* Responsive breakpoints */ @media screen and (max-width: breakpoint) { /* Responsive ...
Read MoreHow to create a mega menu (full-width dropdown menu in a navigation bar) with HTML and CSS?
A mega menu is a full-width dropdown menu that provides an expanded navigation structure with multiple columns, rows, and content sections. It's commonly used on websites to organize large amounts of navigation options in an accessible and visually appealing way. Home About Contact Projects ▼ Projects Menu Commercial Project 1 Project 2 ...
Read MoreHow to create a dropdown navigation bar with CSS?
A dropdown navigation bar is a nav bar that contains dropdown options. You will see many websites where certain navigation items have dropdown features to organize multiple related links. When there are multiple options to render under the same category, you need to develop a dropdown navigation bar. For example, if you provide multiple types of services, instead of displaying all of them openly on the nav bar, you can organize them in a dropdown menu. This is similar to a hoverable dropdown menu. Syntax .dropdown-menu { position: relative; ...
Read MoreIncluding CSS in HTML Documents
Adding CSS to an HTML document enhances the appearance of the web page. Various styles for images, borders, margins, and colors can be easily added. To include CSS in HTML documents, we can either include them internally, inline, or link an external file. Syntax /* Inline CSS */ /* Internal CSS */ selector { property: value; } /* External CSS */ Method 1: Inline CSS With inline CSS, use the style attribute ...
Read MoreUsage of CSS grid-auto-flow property
The CSS grid-auto-flow property controls how auto-placed items are inserted in the grid container. It determines whether new items are placed in rows or columns and the direction of placement. Syntax selector { grid-auto-flow: value; } Possible Values ValueDescription rowAuto-placed items fill rows first (default) columnAuto-placed items fill columns first row denseFill rows and pack items densely column denseFill columns and pack items densely Example 1: Column Flow The following example uses grid-auto-flow: column to place items in columns − ...
Read MoreLinear gradient with rainbow color
The CSS linear-gradient function can be used to create beautiful rainbow effects by combining all seven colors of the rainbow spectrum. A rainbow gradient provides a smooth transition from red through violet, creating an eye-catching visual effect. Syntax selector { background: linear-gradient(direction, red, orange, yellow, green, blue, indigo, violet); } Example: Rainbow Linear Gradient The following example creates a horizontal rainbow gradient using all seven spectrum colors − #demo { height: 100px; ...
Read MoreHow to set text alignment in HTML?
To align text in HTML, use the style attribute to define the CSS text-align property. Just keep in mind, that the usage of style attribute overrides any style set globally. It will override any style set in the HTML tag or external style sheet. HTML style attribute specifies an inline style for an element. The attribute is used with the HTML tag, with the CSS text-align property for the center, left, and right alignment. HTML5 does not support the align attribute of the tag, so the CSS style is used to set text alignment. Syntax ...
Read More