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 Sreemaha
Page 2 of 6
Usage of font-variant property in CSS
The CSS font-variant property controls typographic variations of text, primarily creating small-caps effects where lowercase letters appear as smaller uppercase letters. Syntax font-variant: normal | small-caps | initial | inherit; Values normal - Default value, displays text normally small-caps - Converts lowercase letters to smaller uppercase letters initial - Sets to default value inherit - Inherits from parent element Example: Small Caps Effect .normal-text { ...
Read MoreHow to set a cookie and get a cookie with JavaScript?
JavaScript cookies allow you to store small pieces of data in the user's browser. You can set cookies using document.cookie and retrieve them by parsing the same property. Setting Cookies The simplest way to create a cookie is to assign a string value to the document.cookie object: document.cookie = "key1=value1;key2=value2;expires=date"; The "expires" attribute is optional. If you provide this attribute with a valid date or time, the cookie will expire on that date and the cookie's value will no longer be accessible. Example: Setting a Cookie This example sets a customer name ...
Read MoreHow to call a JavaScript Function from Chrome Console?
You can call JavaScript functions directly from the Chrome Developer Console. This is useful for testing, debugging, and interacting with functions defined in your web page or application. Opening Chrome Developer Console To access the console, press F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac), then click the Console tab. Calling Functions from Console Once a function is defined in your page's JavaScript, you can call it directly from the console by typing the function name followed by parentheses. ...
Read MoreWhat is lexical this in JavaScript?
In JavaScript, "lexical this" refers to how arrow functions inherit the this context from their enclosing scope, unlike regular functions that define their own this. This solves common issues with this binding in callbacks and nested functions. The Problem with Regular Functions Regular functions create their own this context, which can lead to unexpected behavior in callbacks: Click Me document.getElementById('myButton').addEventListener('click', function() { console.log('Outer this:', this); // Points to the button setTimeout(function() { console.log('Inner ...
Read MoreCSS voice-stress Speech Media property
The CSS voice-stress property controls the level of stress or emphasis applied to spoken text in speech synthesis. This property adjusts characteristics like pitch variation and intensity to convey different levels of emphasis when content is read aloud by screen readers or text-to-speech software. Syntax selector { voice-stress: value; } Possible Values ValueDescription normalDefault stress level with natural emphasis strongHigh stress with increased pitch variation and intensity moderateMedium stress level between normal and strong reducedLower stress with minimal pitch variation noneNo stress applied, monotone speech Example: Strong ...
Read MoreChange CSS columns property with Animation
The CSS columns property can be animated to create dynamic multi-column layouts. This property is a shorthand for column-width and column-count, allowing you to animate column changes smoothly. Syntax selector { columns: column-width column-count; animation: animation-name duration timing-function; } Example: Animating Column Properties The following example demonstrates how to animate the columns property along with related column styling − .container { width: 600px; ...
Read MoreSet the name to Grid Items with CSS
To set names to grid items in CSS, use the grid-area property in combination with the grid-template-areas property. This allows you to assign meaningful names to grid items and position them within named grid areas. Syntax /* Define named areas in the grid container */ .container { display: grid; grid-template-areas: "area-name1 area-name2" "area-name3 area-name4"; } /* Assign grid items to named areas */ .item ...
Read MoreCSS animation-play-state property
The CSS animation-play-state property controls whether an animation is currently running or paused. This property is particularly useful for creating interactive animations that can be controlled dynamically. Syntax selector { animation-play-state: running | paused; } Possible Values ValueDescription runningThe animation is currently running (default value) pausedThe animation is paused Example: Paused Animation The following example shows an animation that is set to paused state − .box { width: ...
Read MoreWhat are Inline List Items in CSS
Inline list items in CSS are created by setting the display property to inline for list elements (). This transforms vertically stacked list items into horizontally arranged elements, making them perfect for creating navigation bars and horizontal menus. Syntax li { display: inline; } Example: Creating a Horizontal Navigation Bar The following example demonstrates how to create a horizontal navigation bar using inline list items − ul { list-style-type: none; ...
Read MoreRole of CSS :required Selector
The CSS :required pseudo-class selector is used to target form elements that have the required attribute. This selector allows you to apply specific styles to required form fields, helping users identify which fields are mandatory to fill out. Syntax :required { /* CSS properties */ } input:required { /* Styles for required input elements */ } Example: Styling Required Input Fields The following example demonstrates how to style required input fields with a distinctive background color − ...
Read More