1. Child combinator (>):

   Targets elements that are a direct descendant of another element.

2. Adjacent sibling combinator (+):

   Targets elements that immediately follow another.

3. General sibling combinator (~):

   Targets all sibling elements following a specified element. Note this doesn't target siblings that appear before the indicated element.

1. :first-child

   Targets elements that are the first element within their parent element.

2. :last-child

   Targets elements that are the last element within their parent element.

3. :only-child

   Targets elements that are the only element within their parent element (no siblings).

4. :nth-child(an+b)

   Targets elements based upon their position among their siblings.

5. :nth-last-child(an+b)

   Similar to :nth-child(), but instead of counting from the first element, it counts from the last element.

6. :first-of-type

   It considers an element's numerical position only among other children with the same tag name.

7. :last-of-type

   Targets the last child element of each type.

8. :only-of-type

   Targets elements that are the only child of their type.

9. :nth-of-type(an+b)

   Targets elements of their type based on their numerical order and the specified formula.

10. :nth-last-of-type(an+b)

    Targets elements of their type based on a specified formula, counting from the last of those elements backward.

11. :not(selector)

    Targets elements that don't match the selector within the parentheses.

12. :empty

    Targets elements that have no children. Beware that this doesn't target an element that contains whitespace.

13. :focus

    Targets elements that have received focus, whether from a mouse click, screen tap, or Tab key navigation.

14. :hover

    Targets elements while the mouse cursor hovers over them.

15. :root

    Targets the root element of the document. In HTML, this is the < html > element. But CSS can be applied to other XML or XML-like documents, such as SVG; in which case, this selector works more generically.

Pseudo-elements are similar to pseudo-classes, but instead of selecting elements with a special state, they target a certain part of the document that doesn't directly correspond to a particular element in the HTML. They may target only portions of an element or even inject content into the page where the markup defines none.

These selectors begin with a double-colon (::), though most browsers also support a single-colon syntax for backward-compatibility reasons.

Each operating system has its own set of fonts that come pre-installed.

You may use some fonts that are not available on the user's device.

Subsequently, developers used to writing font stacks, which enable them to write a font “wish list” for the browser.

The browser reads this declaration and goes from left to right until it finds a font it has available, choosing that to render the associated text.

Some font names contain whitespace, so it is necessary to surround those strings with single or double quotes.

The terms typeface and font are often conflated. Traditionally, typeface refers to an entire family of fonts (Roboto), usually created by the same designer. Within a typeface there may be multiple variants or weights (light, bold, italic, condensed, and so on). Each of these variants is a font.

Web fonts use the @font-face at-rule to tell the browser where it can find and download custom fonts for use on a page;

To make a web font available for use in our CSS, we use the @font-face at-rule. This lets us provide a name for the font that we can then reference, and also tells the browser where to go to fetch this file from.

There's usually a moment when the content and layout of the page are ready to render, but the fonts are still downloading. It's important to consider what'll happen for that brief moment. Originally, most browser vendors decided to render the page as soon as possible, using available system fonts. Then, a moment later, the web font would finish loading, and the page would re-render with the web fonts.
This is known as FOUT, or Flash of Unstyled Text.

However, most browser vendors changed the behavior of their browsers. Instead of rendering the fallback font, they rendered everything on the page except the text. More precisely, they rendered the text as invisible, so it still takes up space on the page.
This is known as FOIT, for Flash of Invisible Text

A new CSS property, font-display, is in the works to provide better control over font loading.
This property goes inside a @font-face rule. It specifies how the browser should treat web font loading.
The possible values are:

• auto: The default behavior (a FOIT in most browsers).
• swap: Displays the fallback font, then swaps in the web font when it's ready (a FOUT).
• fallback: A compromise between auto and swap. For a brief time (100 ms), the text will be invisible. If the web font isn't available at this point, the fallback font is displayed. Then, once the web font is loaded, it'll be displayed.
• block: Get a white screen for up to 3 seconds and then the actual font can replace any system displayed font at any future point.
• optional: Similar to fallback, but allows the browser to decide whether to display the web font based on the connection speed.

RGB (Red, Green, and Blue).

A color might be defined in CSS as a hex (hexadecimal) value, where The first two digits are the red value in hexadecimal, the next two are the green, and the last two are the blue.

Or RGB functional notation, where each value can be specified in a range from 0 to 255.

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white

Colors can be partially transparent to allow some of what's beneath to show through. For that need, with hex, RGB, and HSL, it is possible to define an alpha channel.

With hex, you can define an alpha channel with a four-digit or eight-digit syntax.

It used to be necessary to define RGB or HSL colors with an alpha channel using the functional rgba() or hsla() formats. However, that's no longer needed unless you need to support a very old browser.

P3 is a superset of sRGB and makes up to 50% more colors possible.

It uses the color() function to pass the red, green, and blue values.

It differs only in that rather than using 0-255 to set each color channel, it uses a decimal between 0 and 1, where 0 is none of that channel and 1 is all of it.

Lab/LCH are designed to be able to express all of human vision, even if currently our monitors are not capable of it.

LCH is an abbreviation of Lightness, Chroma, Hue.

The syntax is Lightness as a percentage, then two numerical values: one for the Chroma, and the third value for the Hue angle.

Like the other functional color notations, you can add a forward slash (/) and then add an alpha channel as a value between 0 and 1 or a percentage.

Practically, when working with LCH, lower the lightness value for a darker variant of a color, and increase it for a lighter one.

CSS supports several absolute length units: pixel (px), mm (millimeter), cm (centimeter), in. (inch), pt (point—typographic term for 1/72nd of an inch), and pc (pica—typographic term for 12 points).

In CSS, 1 em means the font size of the current element; its exact value varies depending on the element you're applying it to.

Values declared using relative units are evaluated by the browser to an absolute value, called the computed value.

Using ems can be convenient when setting properties like padding, height, width, or border-radius because these will scale evenly with the element if it inherits different font sizes,

If we em unit to specify font-size itself, the ems will be derived from the inherited font size.

It's helpful to know that, for most browsers, the default font size is 16 px. Technically, it's the keyword value medium that calculates to 16 px.

What makes ems tricky is when you use them for both font size and any other properties on the same element. When you do this, the browser must calculate the font size first, and then it uses that value to calculate the other values.

When the browser parses an HTML document, it creates a representation in memory of all the elements on the page. This representation is called the DOM (Document Object Model). It's a tree structure, where each element is represented by a node. The < html > element is the top-level (or root) node. Beneath it are its child nodes, < head > and < body >. And beneath those are their children, then their children, and so on. The root node is the ancestor of all other elements in the document. It has a special pseudo-class selector (:root) that you can use to target it.

Rem is short for root em. Instead of being relative to the current element, rems are relative to the root element. No matter where you apply it in the document, 1.2 rem has the same computed value: 1.2 times the font size of the root element.

viewport: The framed area in the browser window where the web page is visible. This excludes the browser's address bar, toolbars, and status bar, if present.

• vh: 1/100th of the viewport height.
• vw: 1/100th of the viewport width.
• vmin: 1/100th of the smaller dimension, height or width.
• vmax: 1/100th of the larger dimension, height or width.