Latest CSS Tutorials and How-To's


How to Change Link Underline Color using text-decoration-color CSS

By default, the color of the underline in a link is the same as its text color. However with the newly introduced text-decoration-color CSS property, the underline and the text can have different colors.
January 6, 2020

CSS Updates - New Properties for Styling Text Decorations & Underlines (VIDEO)

The new CSS properties such as text-decoration-thickness, text-decoration-color etc can help in creating attractive text decorations and underlines, which were not possible before.
January 1, 2020

How to Create a Dark / Light Mode for Websites

Giving user the preference of choosing a dark or light mode has become a very popular feature of operating systems. Webpages can also be shown in dark or light theme depending on the mode chosen in the device settings.
December 28, 2019

Disabling Pull-to-Refresh Feature on Mobile Browsers using CSS

Pull-to-refresh feature on mobile browsers that refreshes the page, can be disabled using the overscroll-behaviour CSS property.
December 13, 2019

Latest CSS Properties and APIs for Web Design in 2020 (VIDEO)

Many next generation CSS properties and APIs have been introduced in browsers lately. These can help in creation of user interfaces that were previously not possible or were difficult to achieve.
December 9, 2019

CSS Selector to Select Elements Not Having Certain Class / Attribute / Type

Many times it may be required to select elements that are not having a specific class, attribute, id etc. This can be achieved using the CSS :not pseudo-class selector.
November 26, 2019

HTML Tables with Fixed Header on Scroll using position: sticky CSS

Making table header row fixed on page scrolling was once quite a complicated problem that was somehow achieved with Javascript. But now it can be achieved easily using CSS with position: sticky.
November 22, 2019

Difference Between Pseudo-Class and Pseudo-Element in CSS

Pseudo-class and pseudo-element are both CSS selectors, however pseudo-class represents a virtual CSS class, whereas pseudo-element represents a virtual HTML element.
November 14, 2019

How to Change Placeholder Color for Textboxes

Color of the text specified by the placeholder attribute in input fields can be changed using the ::placeholder CSS selector.
November 12, 2019

How to Create a Checkmark / Tick with CSS

A checkmark or a tick icon can be created with pure CSS by drawing two straight lines and rotating them.
October 11, 2019

Using CSS :placeholder-shown to Customize Styles for Empty Text Input

:placeholder-shown is a selector for 〈input〉and〈textarea〉 elements who are currently showing placeholder text. This can be be used in forms to highlight empty text input.
September 27, 2019

How to Get Current Value of a CSS Property in Javascript

The window.getComputedStyle() method can be used to get current values of CSS properties of an element.
September 15, 2019

CSS Grid Video Course

This video offers an introduction to CSS Grid. It can be used to create responsive user interfaces by dividing the web page into a grid of rows and columns.
August 12, 2019

Get and Set CSS Variables with Javascript

In some case we may need to change the value of the CSS variable dynamically, or get the value of the variable in Javascript. This can be done using the native browser APIs.
July 25, 2019

CSS Variables (VIDEO)

CSS variables makes many UI problems easy, which were not straightforward before. This video will show you many interesting details about CSS variables.
June 6, 2019

Using Data-Attributes (data-*) in CSS

A special thing about HTML data-attributes is that its values can be directly rendered through CSS also. Whenever value of data-attribute changes, new value can be rendered in the page automatically.
May 26, 2019

Disabling Scroll Anchoring with CSS

Scroll anchoring is a new technique implemented in browsers that prevents content jumping. This behavior can be controlled with the CSS overflow-anchor property.
May 9, 2019

Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property

The CSS pointer-events property can control whether an element can be a target for pointer (mouse & touch) events.
April 19, 2019

Change Cursor Color with CSS caret-color

The CSS caret-color property changes the color of the caret, or the blinking cursor for text inputs fields. Changing the color of the cursor when the user focuses on the text field makes it more noticeable.
April 16, 2019

Setting Tab Sizes in HTML with CSS tab-size Property

Setting width for the Tab key can change the look for textboxes and 〈pre〉 element. This can be done with the tab-size CSS property.
April 9, 2019