CSS Tricks Almanac

Selectors and Properties

Selectors provide the syntax that is used to select any element on the page. Properties are the key-value pairs that style the selected element in a particular fashion.

Two CSS Selectors

:empty selects elements that have no children. In this case, "children" refers to other elements OR text and even whitespace within its HTML code. Elements that contain any of these things are considered non-empty and won't be selected.

If you don't like the default list styling, you can use ::marker to style list items to your liking. The typical bullet points for ULs, and the numbers on OLs can be changed with different properties. If you would like to get rid of those bullet points or numbers entirely, you can use the content property to replace them with any character of your choice.

Two CSS Properties

scroll-behavior determines how the viewport travels from one element to another element on the page. By default, there is an instantaneous, abrupt movement between elements. Setting this property to smooth creates a smoother transition.

speak can be used to tell a browser to speak aloud the selected elemen't content when using a screen reader.

Summary

This almanac can be a particularly useful tool for more rare properties and selectors that aren't used quite as often. Most if not all pages include useful examples of code snippets and illustrations to showcase how they work.