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.
HTML Tables with Fixed Header on Scroll using position: sticky
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.
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.
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.
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.
Using :placeholder-shown to Customize CSS 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.
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.
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.
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.
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.
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.
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.
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.
Changing Cursor Color for Textboxes with CSS caret-color Property
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.
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.
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.
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.
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.
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.
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.