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 Yaswanth Varma
Page 19 of 31
How to Get this Text-Wrapping Effect With HTML/CSS?
The CSS word-wrap property allows long words to be broken and wrapped onto the next line when they exceed the width of their container. This prevents text overflow and ensures content remains within the designated boundaries. Syntax selector { word-wrap: normal | break-word | initial | inherit; } Possible Values ValueDescription normalWords break only at normal break points (default) break-wordAllows unbreakable words to be broken initialSets to default value inheritInherits from parent element Example 1: Text Wrapping Around Images The following example demonstrates text wrapping around ...
Read MoreDefine colors using the Red-Green-Blue model (RGB) with CSS
In website design, color is crucial. It affects the links that users click on, the way they read information, and how comfortable they are surfing your website. While incorporating color requires practice, adding it to your website is simple when you use the CSS color and background-color properties. These properties can be defined in a number of ways. A web page's text or background color can be altered using HTML color names, hex color codes, RGB color codes, or HSL color values. In this article we are going to learn about the RGB colors. Syntax selector ...
Read MoreAvoid wrapping flex items with CSS
The CSS flexbox layout allows you to arrange elements in flexible containers. By default, flex items try to fit in a single line, but when they exceed the container width, they may wrap to new lines. To prevent this wrapping behavior, you can use the flex-wrap property with the nowrap value. Syntax .container { display: flex; flex-wrap: nowrap; } CSS flex-wrap Property The flex-wrap property controls whether flex items wrap onto multiple lines or stay on a single line. When set to nowrap, all flex items ...
Read MoreCSS Grid Lines
CSS Grid Lines are the invisible horizontal and vertical lines that form the structure of a CSS grid container. These lines define where grid items can be positioned and create the foundation for precise layout control. Each grid line is numbered, starting from 1, and can be referenced to place items exactly where you want them. Syntax /* Column positioning */ grid-column-start: line-number; grid-column-end: line-number; /* Row positioning */ grid-row-start: line-number; grid-row-end: line-number; /* Shorthand */ grid-column: start / end; grid-row: start / end; Understanding Grid Lines Grid lines are automatically created ...
Read MoreCSS Flexbox Layout Module
Even though CSS was designed to handle styling, web developers have always had a special issue when developing remarkable layouts, which nearly always requires the use of JavaScript. But Flexbox is here to make that different. The CSS Flexbox Layout Module provides an efficient way to arrange, distribute, and align items in a container, even when their size is unknown or dynamic. Syntax .container { display: flex; } CSS Flexbox Developers can design adaptable and flexible web page layouts with the help of the flexible property, which is an ...
Read MoreCSS Grid Layout
CSS Grid Layout is a two-dimensional layout system that allows you to arrange content in rows and columns. It provides a powerful way to create complex layouts with explicit control over positioning and sizing of elements. Grid Layout is perfect for creating responsive designs and offers more control than traditional layout methods. Syntax .container { display: grid; } Basic Grid Layout The following example demonstrates how to create a basic grid layout with two columns − .grid-container { ...
Read MoreAdd hoverable pagination with CSS
Pagination is used to separate content into multiple pages with navigation numbers. This makes it easier to browse through large amounts of content by dividing entries into manageable sections. Hoverable pagination enhances user experience by providing visual feedback when users hover over page numbers. Syntax .pagination a { display: inline-block; padding: value; text-decoration: none; } .pagination a:hover { background-color: color; } .pagination a.active { background-color: color; } Key CSS Properties for Pagination ...
Read MoreAdd a pressed effect on button click with CSS
Adding a pressed effect on button click with CSS makes the user feel more interactive with the web page. It provides an immediate visual effect indicating that the button press has been registered, helping to improve the user experience. In this article, we have a button on our web page. Our task is to add a pressing effect while clicking the button using different CSS techniques. Syntax button:active { transform: transformFunction(value); } Approaches to Add a Pressed Effect on Button Here are three approaches to add a pressed effect ...
Read MoreChange the padding of a button with CSS
The CSS padding property allows you to control the space between a button's content (text or icon) and its borders. This spacing is crucial for creating visually appealing and user-friendly buttons that are easy to click. Syntax button { padding: value; } Possible Values ValueDescription lengthDefines padding in px, em, rem, etc. %Percentage of the containing element's width top right bottom leftFour values for each side individually vertical horizontalTwo values for vertical and horizontal padding Example 1: Different Padding Values The following example shows buttons with ...
Read MoreHow an or should be resized to fit its container with CSS?
The CSS object-fit property is used to resize an image to fit its container while maintaining control over how the image is scaled and positioned. This property is essential for creating responsive layouts where images need to adapt to different container sizes without distorting their appearance. Syntax selector { object-fit: value; } Possible Values ValueDescription fillStretches the image to fill the container (may distort aspect ratio) containScales image to fit inside container while maintaining aspect ratio coverScales image to cover entire container while maintaining aspect ratio scale-downActs as either ...
Read More