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
Front End Technology Articles
Page 455 of 652
Prime CSS Marketing Link Colors
The Primer CSS is a framework that allows users to add pre-defined styles to HTML elements. We can use Primer CSS to style various HTML elements such as buttons, links, forms, etc. In this tutorial, we will learn to style HTML links with various colors using Primer CSS marketing link classes. To use Primer CSS, include the CDN link in your HTML head section: Syntax Primary Link Available Link Color Classes Class NameDescription Link--primaryApplies primary color (blue) styling Link--secondaryApplies secondary color styling Link--onHoverShows link styling only on ...
Read MorePrime CSS Marketing Buttons Animated Arrow Symbol
Marketing buttons are crucial for attracting users to your product or service. They serve as call-to-action elements that guide users toward desired actions like signing up, purchasing, or learning more. Adding animated arrow symbols to these buttons can significantly improve user engagement and conversion rates. In this tutorial, we will use the Primer CSS framework to create professional marketing buttons with animated arrow symbols that respond to user interactions. Installation: To use Primer CSS, include the CDN link in your HTML head section: Syntax Button Text ...
Read MorePagination using Datatables
We can use the pagination technique to show large amounts of data in smaller chunks. For example, online stores like Amazon and Flipkart list millions of products. So, if they don't use the pagination technique to show data, users need to scroll through the end of the web page to check the last product. In the Pagination technique, we show a particular amount of data on a single page. For example, if we set the 100 as a page length, users can see the first 100 products on the first page, another 100 on the second page, and so ...
Read MoreOffsetWidth, clientWidth, scrollWidth and Height, respectively in CSS
In this article, we will be understanding the difference between CSS offsetWidth, clientWidth, scrollWidth and difference between offsetHeight, clientHeight, scrollHeight since they return width and height of HTML element respectively. Visual Representation margin (not included) border padding ...
Read MoreMinification of CSS files
If your app takes more than 3 seconds to load, you lose 50% of visitors. So, a slow-loading website can be frustrating for users, and they can navigate away from your site. However, there can be many causes for the slow website, but one of them is larger CSS files. In real applications, we need to write lots of CSS to style different web pages. So, we can minify the CSS files to reduce the size of CSS files. When we minify the CSS files, it removes the whitespaces, comments, etc., from the file, decreasing the size of the ...
Read MoreLiquid Layout in CSS
As the name suggests, a liquid layout is a flexible web design approach that adapts HTML element dimensions according to screen size. Unlike fixed layouts that use hardcoded pixel values, liquid layouts use percentage-based widths to create fluid, responsive designs. Liquid layouts prevent content overflow issues and ensure compatibility across different devices and screen sizes. They are essential for modern responsive web design. Syntax selector { width: percentage%; max-width: value; /* optional */ min-width: value; /* optional */ } Example 1: Pure ...
Read MoreModern CSS Cards
Modern CSS cards are essential components for displaying information in an organized, visually appealing format. They're commonly used on e-commerce sites to showcase products, on educational platforms for courses, and across various websites to present content in digestible chunks. Syntax .card { display: flex; flex-direction: column; border-radius: value; box-shadow: value; width: value; background-color: value; } Example 1: Basic CSS Card This example creates a simple card with an image, title, ...
Read MoreNeon Text Display Using HTML & CSS
Creating neon text effects on web pages is a popular trend that adds visual appeal and draws user attention to important content. Neon text effects can be used for logos, headings, advertisements, and other elements to make them stand out. In this tutorial, we will use the text-shadow CSS property to create various neon text effects. Syntax text-shadow: horizontal-offset vertical-offset blur-radius color; The text-shadow property creates the glow effect by accepting horizontal offset, vertical offset, blur radius, and color values. For neon effects, we typically set both offsets to 0 and use multiple shadow values ...
Read MoreHow to define word-break property to allow words to be continued to the next line in CSS?
The CSS word-break property controls how words should break when they reach the edge of their container. This property is essential for maintaining readable text layouts, especially when dealing with long words or narrow containers that might cause text overflow. Syntax selector { word-break: value; } Possible Values ValueDescription normalDefault behavior - words break at natural break points break-allWords can break at any character to prevent overflow keep-allPrevents word breaks for CJK (Chinese, Japanese, Korean) text Example: Using break-all Value The following example demonstrates how word-break: ...
Read MoreHow to define two column layout using flexbox?
To create a two column layout using flexbox can be so easy if you have the knowledge of CSS display property. Flexbox is a layout model in CSS that provides an efficient and flexible way to arrange and distribute space between items within a container. It arranges elements in a single dimension, either horizontally or vertically, within a container. To know more about the CSS Flexbox Layout visit the attached link. Imagine we have parent div and inside that div we have two child div all we have to do is place those child div side by horizontally. ...
Read More