Latest CSS Tutorials and How-To's


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

How to Justify Text using text-align & text-justify CSS Properties

In a webpage, justification of text can be done with the text-align property. Spaces can further be adjusted with text-justify property.
April 4, 2019

Adding Hyphens to Text with the CSS hyphens Property

It is a common practice to break lines by introducing a hyphen character between a word. In web pages this is done with the CSS hyphens property.
April 3, 2019

Indent Text with CSS text-indent Property

Many times you would like to leave empty spaces before the starting line of a paragraph. This can be done with the text-indent CSS property which defines the length of the white space appearing before the first line.
April 1, 2019

Golden Rules for Typography on the Web (VIDEO)

Good typography does not improve speed or understanding, but leads to greater engagement in reading. This video presented at CSS Day brings out some general guidelines for typography on websites.
March 29, 2019

Maintaining Aspect Ratios for HTML Videos with CSS

When rendering an image browers maintains its aspect ratio. But this does not happen in this case of video element. This can be done with a bit of CSS.
March 26, 2019

Setting Spaces between Letters with CSS letter-spacing Property

The letter-spacing CSS property can be used to set spacing between individual characters or letters in words.
March 23, 2019

Smooth Scrolling with Pure CSS

For modern browsers it is now possible to set smooth scrolling for a webpage with the CSS "scroll-behavior" property. No Javascript is required for smooth scrolling.
March 19, 2019

Managing Spacing Between Words with CSS word-spacing Property

The CSS word-spacing property defines the width of white space between words in a block of text.
March 5, 2019

Styling First-Letters with CSS ::first-letter

Styling first letter in a block of text is a good way of increasing user attention span. It can be done with the ::first-letter CSS pseudo-element.
March 2, 2019