Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
The CSS font-optical-sizing property controls whether the browser automatically adjusts the appearance of text glyphs to optimize readability at different font sizes. This property is particularly useful with variable fonts that support optical size variations. Syntax selector { font-optical-sizing: value; } Possible Values ValueDescription autoBrowser automatically optimizes glyph shapes based on font size (default) noneDisables optical sizing adjustments inheritInherits the value from the parent element How Optical Sizing Works When optical sizing is enabled, the browser adjusts glyph characteristics based on font size − ... Read More
CSS allows you to separate content (HTML structure) and design (visual styling) by keeping styling information in separate CSS files rather than mixing it with HTML. This separation makes websites easier to maintain, more organized, and allows for consistent styling across multiple pages. Syntax /* External CSS file */ selector { property: value; } Benefits of Separating Content and Design Maintainability − Easier to update styles across multiple pages Reusability − Same CSS file can be used for multiple HTML pages Cleaner Code − HTML focuses on structure, CSS ... Read More
The method through which we can determine the device being used for surfing is by using what we call, "viewport" widths. CSS media queries allow you to change background colors and other styles based on specific viewport widths, making your website responsive across different devices. Syntax @media screen and (min-width: value) { selector { background-color: color; } } Understanding Viewports In web development, a viewport is the visible area of a web page on a device. There are ... Read More
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 More
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 More
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 More
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 More
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 More
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 More
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 More