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 12 of 130
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 MoreHow to Create Dark Theme using Slider in CSS?
Dark themes have grown in popularity recently since they can lessen eye fatigue and make it easier to watch display screens for extended periods of time. This article will discuss how to use CSS and JavaScript to create an interactive slider that toggles between light and dark themes. A CSS slider, commonly referred to as a range slider, is a user interface component that enables users to choose a value within a range by sliding a handle along a track. They are frequently employed in settings panels and web forms for theme switching. Syntax input[type="range"] { ...
Read MoreHow to hide the bullets on list for the sidebar?
When designing a sidebar for a website, bullet points can detract from the clean, professional appearance you want to achieve. Fortunately, CSS provides several effective methods to hide these bullets while maintaining the semantic structure of your lists. Syntax selector { list-style-type: none; } Method 1: Using list-style-type Property The most straightforward approach is to use the list-style-type property and set it to none. This removes bullet points from list items ? .sidebar-list { ...
Read MoreHow to hide number input spin box using CSS?
To hide number input spin box using CSS, we will be discussing two different approaches in this article. The number input spin box is a commonly used component in web forms allowing users to increase or decrease numeric values with up and down arrows. In this article, we are having a number type input spin box, our task is to hide number input spin box using CSS. Syntax /* Method 1: Using display property */ ::-webkit-inner-spin-button { display: none; } /* Method 2: Using appearance property */ ::-webkit-inner-spin-button { ...
Read MoreHow to give a div tag 100_ height of the browser window using CSS?
When working on web development projects, there are often scenarios where you need to give a div tag the full height of the browser window. This can be particularly useful when creating full-page layouts, hero sections, or elements that need to span the entire vertical space. However, achieving this desired effect using CSS can be a bit tricky due to the nature of the CSS Box Model and the default behavior of height properties. Syntax /* Method 1: Using percentage height */ selector { height: 100%; } /* Method 2: Using ...
Read MoreDisplaying 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 More