Using the CSS letter-spacing property, we can specify the amount of space between letters of text. The letter spacing can be set in px, em, etc. length units. Let us see the syntax. Syntax The following is the syntax of the letter-spacing property − letter-spacing: value; The value can be − Normal − Normal space between characters. Length − A length for the space between the characters The following examples illustrate CSS letter-spacing property − Set letter spacing in em In this example, we have set the spacing between letters using the . An em is ... Read More

By specifying padding of an element in percentage, we can maintain its Aspect Ratio. The aspect ratio is the ratio of image’s width to its height. The aspect ratio can also be maintained using the aspect-ratio property. Aspect ratio for videos with the padding-top property Use the padding-top property to set the aspect ratio of an element on a web page. Here is the CSS padding property − The padding-bottom specifies the bottom padding of an element. The padding-top specifies the top padding of an element. The padding-left specifies the left padding of an element. The padding-right specifies the ... Read More

Using the CSS hyphens property, we can specify how hyphens are added in text. The hyphens property values can be − none − The words not hyphenated manual − The words are hyphenated at ‐ or ­ The default. auto − The words are hyphenated where the deciding factor is the algorithm The hyphen can be set like this − It can also be set like this. Totally depends on the text form − Let us see some examples − Words are Hyphenated Manually The following example illustrate CSS hyphens property where the word are hyphenated ... Read More

CSS tab-size property allows us to set the amount of whitespace used in tabs. The width of the tab character can be customized easily. The value set for the tab size is in spaces. Let us see the syntax. Syntax tab-size: value; The value above is the number value set for tab space. The following examples illustrate the CSS tab-size property. Example Here, we have set the tab size to 32 using the tab-size property − tab-size: 32; The tab size for the firefox is also set − -moz-tab-size: 32; Let us see ... Read More

The cursor can be easily changed in CSS. For that, use the caret-color property. This will allow you to change the color in textarea, input, etc. The following examples illustrate the CSS caret-color property to change the cursor color on a web page. Change the Cursor Color of the Input Element The input is the field where data is entered by the user. To change the cursor color, the is set with the caret-color property − input { font-size: 3em; caret-color: chartreuse; margin: 2%; } Here is ... Read More

Using the CSS pointer-events property we can control whether a mouse and touch are allowed on an element.The syntax of CSS pointer-events property is as follows −pointer-events: auto|none;Above, auto is default. Element reacts to pointer events, whereasnone: Element does not react to pointer eventsExampleThe following examples illustrate CSS pointer-events property. Live Demo a {    margin: 10vh;    pointer-events: none; } a:last-of-type {    pointer-events: auto; } No pointer event here Automatic pointer event here OutputThis will produce the following result −Example Live Demo select {    margin: 10vh;    pointer-events: none; ... Read More

To disable the default scroll anchoring provided by web browsers, we can use the overflow-anchor property. To disable scroll anchoring, set the overflow-anchor property to none − body { overflow-anchor: none; } To enable the scroll anchoring, set the value to auto that is also the default value. However, scroll anchoring behavior is enabled by default in any web browser. Disable Scroll Anchoring Let us see the example to disable scroll anchoring − Example body { ... Read More

We can store extra information about elements using data-* attribute. The following examples illustrate CSS data-* attribute.Example Live Demo dl {    margin: 2%; } p {    width: 60%;    background-color: lightgreen;    padding: 2%;    color: white;    text-align: center; } dt {    font-weight: bold; } dt:hover {    cursor: pointer; } dd {    font-style: italic; } Tea Hot Spicy Tea or Ice Lemon Tea Toast Hot Garlic Butter Toast (hover over food item) function showDescription(food) {    let foodType = food.getAttribute("data-food-type");    document.querySelector('p').textContent = ("We ... Read More

To get and set CSS variables with JavaScript, we can use various methods. The getComputedStyle() method gives an object which includes all the styles applied to the target element. The getPropertyValue() method is used to obtain the desired property from the computed styles. The setProperty() method is used to change the value of CSS variable. In this article we are having a div and a button, our task is to get and set CSS variables with JavaScript. By getting and setting the CSS variable, we will change the background color of div upon clicking the button. Steps to Get ... Read More

To customize the style for the input textbox having a placeholder, we use the :placeholder-shown pseudo-class of CSS. Placeholder text is a hint for the user to understand what is to be typed in the input text field. The following examples illustrate CSS :placeholder-shown pseudo-class. Set the border for the text field The border for the text field is set using the border-color property. Place it inside the placeholder-shown pseudo-class as shown below − input:placeholder-shown { border-color: dodgerblue; } Example Let us see the example − ... Read More