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
CSS Articles
Page 49 of 130
CSS Styling of File Upload Button with ::file-selector-button Selector
We can style the file upload button using the CSS pseudo-element ::file-selector-button. However, the full support of this pseudo-element is limited to Firefox and Firefox Android. The ::-webkit-file-upload-button is used to support Safari, Chrome and Opera. Syntax selector::file-selector-button { property: value; } selector::-webkit-file-upload-button { property: value; } Style File Upload Button With ::file-selector-button The following example illustrates CSS ::file-selector-button selector. On hover, we have styled it with a grab cursor, purple background, and inset shadow − input[type="file"] ...
Read MoreHow to use Google Fonts on your web page?
Google Fonts is a free web font service launched by Google in 2010 that provides access to over 1, 500 font families. You can easily integrate these fonts into your web pages using the element or CSS @import rule to enhance your website's typography. Syntax /* Method 1: Using link element in HTML head */ /* Method 2: Using CSS @import */ @import url('https://fonts.googleapis.com/css2?family=Font+Name&display=swap'); /* Apply the font */ selector { font-family: "Font Name", fallback-font; } Method 1: Using Link Element The most common method is ...
Read MoreHow to add Google Charts to your web page?
Google Charts is a powerful JavaScript library that allows you to create interactive charts for web pages. You can add Google Charts to your web page using the google.charts.load() method and display various chart types like bar charts, pie charts, and line charts. Syntax google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { // Chart configuration and drawing code } Configure the Chart Data First, create a function to configure the chart data. The data is structured using Google's DataTable format − function drawChart() { var ...
Read MoreHow to create a responsive blog layout with CSS?
A responsive blog layout consists of a header with logo and navigation, main content area, and footer. The layout adapts to different screen sizes using CSS media queries and flexible design principles. Let's build a complete responsive blog layout step by step. Syntax /* Basic responsive blog structure */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } @media screen and (max-width: 768px) { /* Mobile styles */ } Example: Complete Responsive Blog Layout The ...
Read MoreHow to create a responsive zig zag (alternating) layout with CSS?
A responsive zig zag (alternating) layout creates a visually appealing pattern where content alternates between left and right sides. The layout typically features text and images that switch positions − image left with text right, then text left with image right, and so on. On smaller devices, the columns stack vertically for better mobile viewing. Syntax .container { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .row:nth-child(even) { flex-direction: row-reverse; } ...
Read MoreHow to create a mixed column layout grid with CSS?
A mixed column layout grid in CSS is a responsive design technique that allows columns to adjust their width and arrangement based on screen size. This creates a flexible layout that works well on desktop, tablet, and mobile devices. Syntax .column { float: left; width: percentage; box-sizing: border-box; } @media screen and (max-width: breakpoint) { .column { width: new-percentage; } } Example: Responsive 4-Column Grid ...
Read MoreHow to create a list grid view with CSS and JavaScript?
A list grid view allows users to switch between displaying content in a grid layout (multiple columns) or a list layout (single column). This is commonly used in dashboards, galleries, and data presentation interfaces where users need different viewing options. Syntax /* Grid Layout */ .column { float: left; width: 50%; } /* List Layout */ .column { width: 100%; } Example: Interactive List Grid View The following example creates a switchable list/grid view with JavaScript − ...
Read MoreHow to create an expanding grid with CSS and JavaScript?
An expanding grid is a dynamic layout that displays a compact grid of columns initially, then expands to show detailed content when a column is clicked. This creates an interactive user experience where users can explore content without navigating to different pages. Syntax /* Basic grid column structure */ .column { float: left; width: 33.33%; cursor: pointer; } /* Expanded content area */ .expanded-content { display: none; width: 100%; } HTML Structure Create ...
Read MoreHow to create a 2-column layout grid with CSS?
A 2-column layout grid divides the webpage into two equal sections, typically positioned side by side. This layout is commonly used for creating sidebars, comparison layouts, or split-screen designs using CSS positioning or modern layout techniques. Syntax .column { width: 50%; float: left; /* or use flexbox/grid */ } Method 1: Using Fixed Positioning This method uses fixed positioning to create two columns that stay in place when scrolling − body { ...
Read MoreHow to style a header with CSS?
To style a header with CSS, we can use various CSS properties to make it look attractive. Headers are important elements that define the structure and visual hierarchy of a webpage. Syntax header { background-color: value; color: value; font-family: value; text-align: value; padding: value; } Common CSS Properties for Header Styling PropertyDescription background-colorSets the background color of the header colorChanges the text color font-familySpecifies the font type text-alignAligns text horizontally paddingAdds space inside ...
Read More