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
Web Development Articles
Page 564 of 801
What is the use of CSS ruleset?
CSS stands for Cascading Style Sheets. It is used to style HTML elements and control the visual presentation of web pages. A CSS ruleset is the fundamental building block that defines how HTML elements should be styled. A CSS ruleset contains two main parts: a selector and a declaration block. The selector targets specific HTML elements, while the declaration block contains CSS properties and their values. Syntax selector { property: value; property: value; } In the above syntax, the selector identifies which HTML elements to style, ...
Read MoreWhat is the Outline Effect to Text?
The outline effect for text creates the appearance of hollow text by showing only the border/stroke while making the interior transparent or matching the background color. This effect is commonly used for headings, logos, and decorative text elements. Syntax /* Method 1: Using webkit properties */ -webkit-text-stroke: width color; -webkit-text-fill-color: transparent; /* Method 2: Using text-shadow */ text-shadow: x y blur color, x y blur color; /* Method 3: Using SVG */ stroke: color; fill: transparent; stroke-width: width; Method 1: Using Webkit Text Properties The most straightforward approach uses -webkit-text-stroke and -webkit-text-fill-color ...
Read MoreWhat is the difference between position:sticky and position:fixed in CSS?
In CSS, the position property controls how an element is positioned within the document. Two commonly confused values are fixed and sticky, which behave differently when scrolling. In this tutorial, we will learn the key differences between position: fixed and position: sticky. What is Position: Fixed in CSS? The fixed value positions an element relative to the viewport, removing it from the normal document flow. The element remains in the same position even when the page is scrolled. Syntax selector { position: fixed; top: value; ...
Read MoreWhat is the difference between “screen” and “only screen” in media queries?
In CSS, media queries play an important role in creating responsive web designs. We can write media queries using the @media CSS rule with different conditions and keywords to target various devices like mobile devices, desktops, tablets, and printers. In this tutorial, we will learn the difference between 'screen' and 'only screen' in media queries. Syntax /* Using screen */ @media screen and (condition) { /* CSS code */ } /* Using only screen */ @media only screen and (condition) { /* CSS code */ } ...
Read MoreWhat is styling text input caret ?
In HTML text inputs, you can observe a marker showing at the editing position in the text, called the text input caret. It is also known as a text input cursor. This blinking line indicates where the next character will be inserted when typing. In this tutorial, we will learn to style the text input caret using CSS. Currently, we can only change the color of the text input caret, as changing the shape is not supported by modern browsers. Syntax selector { caret-color: value; } Possible Values ...
Read MoreWave inside Text using pure CSS
CSS allows developers to create animated wave effects inside text elements. This technique creates visually appealing text animations that simulate water waves flowing through the letters, enhancing the visual impact of web content. Syntax @keyframes wavey { 0%, 100% { clip-path: polygon(/* initial wave coordinates */); } 50% { clip-path: polygon(/* peak wave coordinates */); } } Method 1: Using Clip-Path Animation This approach uses the clip-path property to create ...
Read MoreWhich characters are valid in CSS class names/selectors?
In CSS, class names and selectors are used to target specific HTML elements for styling. Understanding the rules for valid CSS class names is essential for writing clean, maintainable stylesheets. This tutorial covers all the important rules and valid characters for creating CSS class names. Rules for Valid CSS Class Names Here are the essential rules for creating CSS class names − Rule 1 − Class names should contain only alphanumeric characters (a-z, A-Z, 0-9), hyphens (-), and underscores (_). Rule 2 − Class names cannot start with digits. For example, 123test is invalid. Rule 3 ...
Read MoreTransition shorthand with multiple properties in CSS?
We can add transitions to HTML elements using CSS. Before we start with the tutorial, let's understand what transition is. Basically, the transition is an element changing from one state to another state. For example, we change the dimensions of the element when users hover over the element. In CSS, we can add transitions to elements using two ways. First is to use 'transition-property', 'transition-duration', 'transition-timing-function', and 'transition-delay' all 4 properties together. The second is using only the 'transition' CSS property. The CSS 'transition' property is shorthand for the below CSS properties. Transition-property − It specifies ...
Read MoreToggle class by adding the class name when element is clicked and remove when clicked outside
Sometimes, we need to highlight an HTML element when we click it and return it to its normal state when we click outside the element. We can achieve this by toggling CSS classes on the element − adding a class when clicked and removing it when clicked elsewhere. In this tutorial, we will learn to add a class name to an element when users click it and remove the class name when users click outside the element. Syntax element.addEventListener('click', function() { element.classList.add('className'); }); document.addEventListener('click', function(event) { if ...
Read MoreSnowfall Animation Effect using CSS
We can create an animation using HTML and CSS. When we add animation to the webpage, it improves the UX of the application. We can create various animations using the CSS keyframes property and use it using the 'animation' CSS property. In this tutorial, we will learn to create a snowfall animation effect using CSS. Syntax .snow { animation: snow 7s linear infinite; } .snow:nth-child(2) { left: 20%; animation-delay: 1s; } @keyframes snow { 0% { transform: translateY(-100vh); ...
Read More