css selectors

• Select a tag of object by writing just its name ie h1{color: red;}.
• Select multiple tags using a selector list, for instance h1, p {color red} selects all headers and all paragraphs.
• Attribute selectors allow you to select elements by their attributes, for example selecting all the links to a specific website with `a[href="specialsite.com"]. MDN has a full list of selector operators.
• Combinators allow you to select by hierarchy, for example all links that follow an image with img + a{}. MDN has a full list of combinators. The most useful combinator is a space which lets you select children for example .content-container img selects all images in the .content-container.

pseudo-classes and pseudo-elements

Pseudoclasses select elements by state such as being hovered over. They are represented with a oreceding colon ie :hover and can be combined with other selectors like a:hover. Pseudo-elements are preceded with two colons (::). They are used to select based on things that can only be determined at run-time, for example ::first-line which is dependant on screen width. There's also the ::before and ::after pseudo-elements which when paired with the content attribute allow us to insert text and visuals before or after our target element.

at rules

At rules are meta statements used for defining custom variables, importing other style sheets, declaring resources, and more.

variables/custom properties

-- syntax

Within a ruleset we can use -- to declare a variable, for instance .article{ --primary-color:red;} but then its scoped in to only be referenceable within the article class. We can put the declaration under the :root pseudoclass to give it global scope. Our variable is then dereferenced using the var() function.

:root{
    --primary-color: red;
}
h1{
color: var(--primary-color);
}

@property syntax

The @property rule is the more powerful older sister of --custom-properties. It allows us to define bahavior such as inheritance and default values, and it comes with type checking. It's still dereferenced with the var()function.

@property primary-color{
    syntax: "<color>"; /*this is a type annotation so css can error if given a non-color type */
    inherits: false; /*always true for `--` declared variables*/
    initial-value: red; /*value before inheriting*/
}

you may have noticed some mention of inheritance. We can override variable definitions within a ruleset and any children will inherit that value unless inherits is set to false.

functions

CSS also comes with lots of functions which mostly fall into the category of geometric functions like sin() and responsive functions that allow us to set attributes in response to the user settings, for example light-dark() which allows us to give one of two values depending on if the user prefers light or dark mode. Theres also a bunch of visual effect functions lkike the family of gradient functions.

precedence

CSS precedence order:

1. most specific relevant selector
2. last written rule

Rules properties also usually inherit from their parents unless over ridden. Not all properties inherit, for example width does not inherit since that would be less useable.

box model

The three display types:

1. block: starts on a new line and width and height properties are respected
2. inline: height and width properties ignored
3. flex: stretches to fill the space