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 35 of 130
How to set cursor style that indicates any direction scroll using CSS ?
The CSS cursor property allows you to change the mouse cursor style when hovering over elements. To indicate any−direction scrolling capability, you can use specific cursor values that show users they can scroll in multiple directions. Syntax selector { cursor: value; } Possible Values for Direction Scroll ValueDescription all-scrollIndicates content can be scrolled in any direction (panned) moveIndicates something can be moved (similar to all-scroll on Windows) Method 1: Using all-scroll The all-scroll value is specifically designed to indicate that content can be scrolled in any ...
Read MoreHow to set the table layout algorithm using CSS ?
The CSS table-layout property controls how the browser calculates the widths of table columns and cells. This property determines whether the table layout algorithm should be automatic (based on content) or fixed (based on predefined widths). Syntax table { table-layout: auto | fixed | initial | inherit; } Possible Values ValueDescription autoDefault. Column width is based on content inside cells fixedColumn width is based on first row or col elements initialSets property to its default value inheritInherits value from parent element Example 1: Automatic Table Layout ...
Read MoreHow hovering over a division element to gradually change the width in CSS ?
To gradually change the width of a division element on hover in CSS, we use the transition property combined with the :hover pseudo-class. This creates smooth animations that enhance user experience. Syntax selector { width: initial-width; transition: width duration timing-function delay; } selector:hover { width: new-width; } Transition Property The transition property is a shorthand that controls how CSS properties change over time. It consists of four main components − PropertyDescriptionDefault Value transition-propertySpecifies which CSS property to animateall transition-durationDuration ...
Read MoreDifference between -webkit-box-shadow & box-shadow in CSS
The CSS box-shadow property is used to add shadow effects around an element's frame. While most modern browsers support the standard box-shadow property, older webkit-based browsers required the -webkit-box-shadow vendor prefix. Syntax /* Standard syntax */ selector { box-shadow: h-offset v-offset blur spread color inset; } /* Webkit prefix syntax */ selector { -webkit-box-shadow: h-offset v-offset blur spread color inset; } Box-shadow Property The box-shadow property creates one or more shadow effects on elements. Each shadow is specified with X and Y offsets, blur radius, ...
Read MoreHow to specify double border using CSS?
The CSS border-style property allows us to create various border effects, including double borders. A double border creates two parallel lines around an element, providing a distinctive visual effect that can enhance your web design. Syntax selector { border-style: double; border-width: value; border-color: color; } Border Style Values ValueDescription noneNo border solidSingle solid line doubleTwo parallel solid lines dashedDashed line border dottedDotted line border groove3D grooved border ridge3D ridged border Example: Basic Double Border Here's how to create ...
Read MoreHow to set default value to align content in CSS ?
CSS align-content property is used to distribute space between or around items in a flexbox or grid container. The default (initial) value of this property is normal, which behaves differently depending on the layout context. Syntax selector { align-content: value; } Possible Values ValueDescription normalDefault value, behaves as stretch in flexbox startItems pack from the start of the container endItems pack from the end of the container centerItems pack in the center space-betweenEqual space between items space-aroundEqual space around items space-evenlyEqual space between and around items stretchItems stretch to ...
Read MoreWhy do we have External CSS and JS files
In this article we will learn about CSS and JS files, explore their functions, different ways of using them in HTML documents, and understand why external CSS and JS files are preferred over inline and internal approaches. CSS (Cascading Style Sheets) CSS stands for Cascading Style Sheets and is used to apply styles to websites and webpages. It makes webpages look more organized, presentable, and appealing to users. CSS handles visual aspects like background colors, font sizes, colors, layout dimensions, and much more. There are three ways of using CSS in HTML documents − Inline ...
Read MoreHow to make div elements display inline using CSS?
To make div elements display inline using CSS, you have several effective approaches. By default, div elements are block−level elements that take up the full width of their container and start on a new line. Converting them to inline elements allows multiple divs to appear on the same line. Syntax /* Method 1: Using display property */ div { display: inline; } /* Method 2: Using flexbox */ .container { display: flex; } /* Method 3: Using CSS Grid */ .container { display: ...
Read MoreWhat are the classes of breadcrumb in Materialize CSS?
Materialize CSS breadcrumbs are navigation components that help users understand their current location within a website's hierarchy. The framework provides specific CSS classes to create clean, responsive breadcrumb navigation with material design principles. Syntax First Level Second Level Current Page Classes of Breadcrumb in Materialize CSS The main CSS classes used to create breadcrumbs in Materialize CSS are − breadcrumb class − Applied to anchor ...
Read MoreHow to create sliding text reveal animation using HTML and CSS?
Sliding text reveal animations create engaging visual effects that bring text to life on web pages. These animations typically reveal text by sliding it into view from different directions, creating a smooth and professional appearance that enhances user experience. Syntax @keyframes animationName { 0% { /* initial state */ } 50% { /* intermediate state */ } 100% { /* final state */ } } selector { animation: animationName duration timing-function; } Method 1: Simple Sliding Text Reveal ...
Read More