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 by Daniol Thomas
Page 4 of 13
Align the grid inside the container using CSS
CSS Grid provides powerful alignment properties to position the entire grid inside its container. The justify-content property aligns the grid horizontally, while align-content aligns it vertically within the container. Syntax .grid-container { justify-content: value; /* Horizontal alignment */ align-content: value; /* Vertical alignment */ } Possible Values ValueDescription startAligns grid to the start of the container centerCenters the grid in the container endAligns grid to the end of the container space-betweenDistributes space between grid tracks space-aroundDistributes space around grid tracks space-evenlyDistributes ...
Read MoreSet the speed of the hover effect with CSS
To set the speed of the hover effect with CSS, we can control how quickly style changes occur when users hover over elements. This is achieved using two main approaches: CSS transition properties and CSS animation properties. Syntax /* Using transition */ selector { transition-duration: time; } /* Using animation */ selector:hover { animation-duration: time; } Method 1: Using transition-duration Property The transition-duration property sets how long a transition takes to complete. This creates smooth changes between normal and hover states − ...
Read MoreHow to add rounded corners to a button with CSS?
To add rounded corners to a button, use the border-radius property. This property allows you to control the curvature of your button corners, creating a more modern and polished appearance. Syntax button { border-radius: value; } Possible Values ValueDescription lengthDefines the radius in px, em, rem, etc. %Defines the radius as a percentage of the button's dimensions 50%Creates a circular button (if width equals height) Example: Basic Rounded Button You can try to run the following code to add rounded corners − ...
Read MoreHow to select elements with an attribute value containing a specified word with CSS?
The CSS [attribute~="value"] selector allows you to select elements where a specific attribute contains a particular word as part of a space-separated list of values. This is particularly useful when dealing with attributes like class, alt, or custom data attributes that may contain multiple words. Syntax [attribute~="word"] { property: value; } How It Works The ~= operator matches elements where the specified attribute contains the exact word as a complete, space-separated token. For example, if an element has alt="Online Tutorials Library", it will match [alt~="Tutorials"] but not [alt~="Tutorial"]. Example ...
Read MoreFloat List Items to the right with CSS
The CSS float: right property allows you to align list items to the right side of their container. This is commonly used for creating navigation menus where some items appear on the left and others on the right. Syntax li { float: right; } Example: Floating List Items to the Right The following example demonstrates how to float specific list items to the right while keeping others on the left − ul ...
Read MoreWhy Aural rendering of documents is necessary
Aural rendering of documents is a technique that converts visual content into audio format, primarily designed to assist visually impaired users. CSS provides aural properties to control how documents are presented through speech synthesizers and audio devices. Why Aural Rendering is Necessary Aural rendering serves various important purposes beyond accessibility − Learning to read: Helps children and adults learn pronunciation and reading skills Training: Enables hands-free learning in educational and professional contexts Web access in vehicles: Allows safe browsing while driving ...
Read MoreValues to set page size in CSS
The CSS @page rule's size property controls the dimensions and orientation of printed pages. There are four values that can be used to set page size − auto − The page box will be set to the size and orientation of the target sheet. landscape − Overrides the target's orientation. The page box is the same size as the target, and the longer sides are horizontal. portrait − Overrides the target's orientation. The page box is the same size as the target, and the shorter sides are horizontal. length − Length values for the 'size' property create an ...
Read MoreWhich PHP function is used to disconnect from MySQL database connection?
PHP provides the mysql_close() function to disconnect from a MySQL database connection. This function takes a single parameter, which is a connection resource returned by the mysql_connect() function. Syntax bool mysql_close ( resource $link_identifier ); Here, if a resource is not specified, then the last opened database connection is closed. This function returns true if it closes the connection successfully, otherwise it returns false. Example The following example shows how to connect to and disconnect from a MySQL database − Important Note Deprecated Functions: The mysql_close() function ...
Read MoreHow to sort inner array in MongoDB?
To sort inner arrays in MongoDB, use the aggregation framework with $unwind, $sort, $group, and $project stages. This approach deconstructs the array, sorts the elements, and reconstructs the sorted array. Sample Data db.sortInnerArrayDemo.insertOne({ "EmployeeDetails": { "EmployeeAddress": { "EmployeeCountry": [ { ...
Read MoreAdd new field to every document in a MongoDB collection?
To add new field to every document in a MongoDB collection, you can use $set operator. The syntax is as follows ? Syntax db.yourCollectionName.update({}, { $set: {"yourFieldName": yourValue} }, false, true); Sample Data To understand the above syntax, let us create a collection with some documents. The query to create a collection with documents is as follows ? db.addNewFieldToEveryDocument.insertMany([ {"StudentName": "John", "StudentAddress": "US"}, {"StudentName": "David", "StudentAddress": "UK"}, {"StudentName": "Carol", "StudentAddress": "UK"}, {"StudentName": "Bob", "StudentAddress": "US"} ]); ...
Read More