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 39 of 130
What is web safe font and fallback fonts in CSS?
Websites require clear and beautiful typography to create a consistent aesthetic look and establish brand identity. Good typography keeps readers engaged and influences how they process content. When choosing fonts for websites, developers need to consider web safe fonts and fallback mechanisms to ensure proper display across all devices and browsers. What are Web Safe Fonts? Web safe fonts are fonts that are universally supported by all browsers and devices. These fonts ensure proper display even if they are not installed on the user's device, providing a consistent viewing experience across different platforms. Before web safe fonts, ...
Read MoreHow CSS work under the hood?
CSS (Cascading Style Sheets) is a style sheet language used to add visual effects to web pages. It describes the layout and display of HTML elements, allowing developers to manage multiple web pages simultaneously and implement custom properties that enhance appearance. Syntax selector { property: value; } Types of CSS CSS is classified into three main types − External CSS − Uses the element in the head section to connect external style sheets. Best for managing multiple pages simultaneously. Internal CSS − Defined within elements in ...
Read MoreHow block elements can be centered using CSS?
Centering block elements is a fundamental skill in CSS that helps create balanced and professional-looking layouts. Block elements naturally take up the full width of their container and start on a new line, making centering techniques essential for proper alignment. Syntax selector { margin: 0 auto; width: value; } What are Block Elements? Block elements are HTML elements that start on a new line and take up the full width of their container. Common block elements include , , −, , and . ...
Read MoreHow to create Directionally Lit 3D buttons using CSS?
Every part of your website is significant. Your website buttons are more than just decoration; they are crucial design elements that help tell a story about your business and direct people to your products or services. Although basic buttons are functional, you can go a step further and add fascinating effects, such as buttons that change colour when you hover over them, buttons with shadows, disabled buttons, or groups of buttons. CSS allows you to create visually appealing 3D buttons with directional lighting effects using properties like transform, box-shadow, and pseudo-elements. These buttons appear to have depth and respond ...
Read MoreExplain Dialogs in Materialize CSS
Materialize CSS dialogs (commonly known as toasts) are temporary notification messages that appear to provide feedback to users. They are lightweight, non-intrusive notifications that display important information and automatically dismiss after a specified duration. Syntax Materialize.toast(content, duration, classes, callback); Parameters ParameterDescription contentThe message text or HTML content to display durationDisplay time in milliseconds (e.g., 4000 for 4 seconds) classesOptional CSS classes for styling (e.g., 'rounded', 'red') callbackFunction to execute after toast is dismissed Setup Requirements Include the following CDN links in your HTML section to use Materialize CSS ...
Read More7 CSS Hacks Every Developer Should Know
CSS is an abbreviation for Cascading Style Sheets. It is used to make visually appealing websites. Using it would make the process of producing effective web pages easier. The design of a website is critical. It improves the aesthetics and overall quality of the website by promoting user interaction. While it is possible to create websites without CSS, styling is required since no user wants to interact with a boring, unattractive website. In this article, we have discussed 7 CSS hacks which every developer will need at some point of time during web designing. 1. Creating Responsive Images ...
Read MoreWhy does CSS work with fake elements?
CSS works with fake elements because modern browsers parse any unrecognized HTML tags directly into the DOM tree as generic elements. While these custom elements render without built-in functionality, CSS can still style them like any other HTML element. What are Fake Elements? Fake elements are custom HTML tags that aren't defined in the official HTML specification. Developers can create these elements with any name, though it's not recommended for production use. Modern browsers treat them as generic inline elements without semantic meaning. Example: Basic Fake Elements Here's how fake elements work in an HTML document ...
Read MoreHow to create a carousel with the help of CSS?
A carousel is a slideshow component that displays multiple images or content pieces in a rotating manner. Carousels are commonly used on websites to showcase featured content, products, or images while saving valuable screen space. In this article, we will learn how to create a responsive carousel using HTML and CSS with smooth transitions and interactive controls. Syntax .carousel-container { position: relative; overflow: hidden; } .carousel-wrapper { display: flex; animation: slide-animation duration infinite; } @keyframes slide-animation { ...
Read MoreHow to create Candle Animation effect using CSS?
The CSS candle animation effect creates a realistic flickering candle using pure CSS animations, transforms, and gradients. This effect combines multiple animated elements to simulate the flame's natural movement, glow, and color variations. Syntax @keyframes animationName { 0% { property: value; } 50% { property: value; } 100% { property: value; } } .element { animation: animationName duration timing-function iteration-count; filter: blur(value); box-shadow: inset values, outer values; } Key CSS ...
Read MoreHow can I vertically align an image in a section that extends across the entire web page?
Vertically aligning images in a full-width section is a common web development challenge. Whether you're centering a hero image or creating a vertical gallery, CSS provides several effective methods including flexbox, grid, and the vertical-align property. Syntax /* Method 1: Flexbox */ .container { display: flex; align-items: center; justify-content: center; } /* Method 2: CSS Grid */ .container { display: grid; place-items: center; } /* Method 3: vertical-align (for inline elements) */ img { ...
Read More