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 do you get the footer to stay at the bottom of a Web page in HTML?
Creating a footer that stays at the bottom of a web page is a common web design requirement. There are different approaches depending on whether you want a sticky footer (always visible at bottom of viewport) or a footer that stays at the page bottom (appears after all content). Using Fixed Position for Sticky Footer The position: fixed property creates a footer that remains visible at the bottom of the browser window, even when scrolling. This approach keeps the footer constantly visible to users. Syntax #footer { position: fixed; ...
Read MoreHow to use SVG with :before or :after pseudo element?
The :before and :after pseudo-elements in CSS allow you to insert content before or after an element without adding extra HTML markup. These pseudo-elements are particularly useful for decorative content and can be used to display SVG images alongside your existing content. There are two primary methods to use SVG with :before and :after pseudo-elements − Using the content property − Directly embed SVG URLs or inline SVG code in the content property. Using the background-image property − Set SVG as a background image for the pseudo-element. Syntax Following is the basic syntax for ...
Read MoreHTML onmouseout Event Attribute
The HTML onmouseout event attribute is triggered when the mouse pointer moves out of an HTML element. This event is commonly used to reset styles, hide tooltips, or perform cleanup actions when users move their cursor away from an element. Syntax Following is the syntax for the onmouseout event attribute − Content Where script is the JavaScript code to execute when the mouse leaves the element. Parameters script − JavaScript code or function call that executes when the mouse pointer moves out of the element. Example − Circle Color ...
Read MoreCenter one and right/left align other flexbox element in HTML
In web development, we often need to center multiple elements while pushing one specific element to the right or left edge. For example, if we have elements P, Q, R, S, T aligned in the center − P Q R S T We want to keep P, Q, R, S centered while moving T to the right edge − ...
Read MoreHTML DOM Anchor hostname Property
The HTML DOM Anchor hostname property returns or sets the hostname portion of a URL. The hostname is the domain name part of the URL, excluding the protocol, port number, path, and hash fragments. Syntax Following is the syntax to return the hostname property − anchorObj.hostname Following is the syntax to set the hostname property − anchorObj.hostname = hostname Here, hostname is a string representing the domain name of the URL. Return Value The hostname property returns a string containing the hostname of the URL. For example, if ...
Read MoreHTML onmouseover Event Attribute
The HTML onmouseover event attribute is triggered when the mouse pointer moves over an HTML element. This event is commonly used to create interactive effects, show tooltips, highlight elements, or change visual appearance when users hover over content. Syntax Following is the syntax for the onmouseover event attribute − Content Where script is the JavaScript code to execute when the mouse enters the element area. Basic Example Following example demonstrates a simple onmouseover event that changes text color when hovering − HTML onmouseover Event ...
Read MoreMake container shrink-to-fit child elements as they wrap in HTML
Making a container shrink-to-fit its child elements as they wrap is a common CSS layout challenge. This technique ensures that the container only takes up as much width as needed by its content, rather than stretching to fill the available space. We achieve this using CSS Flexbox properties combined with proper container sizing. How It Works The key to making a container shrink-to-fit is using display: inline-flex or display: flex with width: fit-content. The inline-flex display value makes the flex container behave like an inline element, automatically sizing to its content width. When child elements wrap using ...
Read MoreHow to use text-overflow in a table cell?
The text-overflow property in CSS controls how overflowing text is displayed when it exceeds its container's boundaries. This property is particularly useful in table cells where space is limited and you need to present text in a clean, organized manner. The text-overflow property must be used alongside two essential properties: white-space: nowrap and overflow: hidden. Without these companion properties, text-overflow has no effect. Syntax Following is the syntax for using the text-overflow property in table cells − td { max-width: value; white-space: nowrap; overflow: hidden; ...
Read MoreHTML returnValue Event Property
The HTML returnValue event property is a legacy property that was used to control whether an event's default action should be prevented. While it has been deprecated in favor of the preventDefault() method, it is still supported in some browsers for backward compatibility. Syntax Following is the syntax for getting the returnValue property − event.returnValue Following is the syntax for setting the returnValue property − event.returnValue = boolean Parameters The returnValue property accepts a boolean value − true − Allows the event's default action to proceed (default ...
Read MoreHow wide is the default margin?
The default body margin in HTML is 8px on all sides. This margin is applied by the browser's user-agent stylesheet, creating a small space between the page content and the viewport edges. Understanding and controlling this default margin is essential for creating precise web layouts. Default Margin in HTML All modern browsers apply a default margin of 8px to the element. This prevents content from touching the browser window edges, providing better readability. The margin appears as white space around your content. Example − Default 8px Margin Following example shows how the default margin creates ...
Read More