Extras

• @import is used to link another CSS file from the same CSS file

• CSS variables are defined for repeating values

/* defined under this */
:root {
	--color-red: #545452;
}

body {
	color: var(--color-red); /* to use */
}

Browser Compatibility

• Every major browser uses a rendering engine to render or paint a website. Like Safari uses Webkit, Chrome uses Blink & Firefox uses Gecko. These browser vendors includes

• Ensuring browser compatibility involves using vendor prefixes or tools like Autoprefixer. For example:

.box {
  -webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

Specificity

• Specificity determines which CSS rule is applied when multiple rules could apply to the same element.

• The order of specificity from highest to lowest is: inline styles, IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.

• !important always has the highest specificity

/* Specificity Table */
!important
# selector
inline
internal
external

class selector
element selector

Inheritance

• Inheritance is the mechanism by which certain CSS properties are passed down from parent elements to child elements.

• Not all properties are inherited (e.g., color and font-family are inherited, while margin and padding are not). The properties given to the universal selector (*) are inherited to all the elements

Cascade

• The cascade is the process by which the browser determines the order in which CSS rules are applied. (Cascade means flow, like a waterfall)

• It considers three main factors: importance (e.g., !important rules), specificity, and source order (the order in which rules appear in the stylesheet).

• We can always inspect websites to check which styles are getting applied