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
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to use CSS to separate content and design?
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 MoreHow to change background-color on a specific wider viewport in CSS ?
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 MoreHow 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 More