# Css

## Selectors

* CSS will read the file top-down, and later definitions will overwrite definitions defined earlier.
* Priority of overwriting also respect `#id > .class > rawElement`.



## Units

{% embed url="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages" %}

* Usually browser will have a default font-size of `16px`.



**Percentages (%)**

* Are relative to it's parent element.



**`rem` (Relative to the root element)**

* Mostly used for `font-size`.
* `1rem` will be the equivalent of the default value.
  * So for `16px`, `1rem` will be `16px`.
  * `0.5rem` will be `8px`.
* It always calculate looking at the root font-size defined, or it will get from the user's browser definition.



**`em` (Relative to the nearest ancestor element)**

* Mostly used for anything BUT `font-size`.
  * Don't use for it, since it will add up size the more you go down the ancestor's tree.
* `1em` will be equivalent of the default value.
  * So for `16px`, `1em` will be `16px`.
  * `0.5em` will be `8px`.
* Will calculate based on it's ancestor's definied font-size.
* But, when the element have a set font-size, `em` will not look to the ancestor BUT to himself to calculate.



**`ch` (Relative to the character `0` of the element's Font)**

* This calculates the size based on the pixels it takes to draw a `0` in the element's Font.



**`vh` or `vw` (1% of the viewport's height or width)**

*   Ranges from `0 - 100`.

    > _Will not account for the scroll-bar's size, so if you set a width of `100vw`, and the vertical scroll shows up, you will have a horizontal overflow and then a horizontal scroll will also show up._

> _When you want the `body` to take the height of the entire viewport event if you don't have enought content to, it's better to set the `min-height: 100vh` instead of just setting the `height: 100vh`, this way it is not limited to `100vh`._

\


## Fonts

* Fonts with space in their names must be inside `''` or `""`.
* When setting multiple fonts with `,` their are fallback fonts, for when the browser cannot resolve the font.



## Position

**Absolute**

* Will look for the closest ancestor that is `relative`, or will default to the `root browser container`, to anchor it's position.



**Relative**

* Will anchor it's position by default to the `parent` element.
* OR it can be used as anchor for a `absolute` child.



**Fixed**

* It will be fixed in the viewport, meaning that even if you scroll the page, it will remain in the same position on the screen.



**Sticky**

* Will scroll along with the page until it reaches the place it must stick, then will work like `fixed`, until it reaches the end of it's parent container.



## Images

* By default images are `display: inline`, that is why it may appear some spaces under them. Change them to `display: block`.



## Media Queries

```css
@media screen and (...);
```



**`min(max)-height` or `min(max)-width`**

* Will query over `width` or `height` in pixels.



**Orientation**

* Will query over screen orientation `landscape` or `portrait`.



**`min-aspect-ratio`**

* Will query over the screen aspect ratio.



**`prefers-color-scheme`: light | dark**

* Will change based on system preferences.



## Pseudo

### Pseudo Class

Selects elements that are in a specific `state`.

* Like `:visited`, `:hover`, ...



**`:is()` or `:where()`**

* Like a `IF` for css.



**`:not()`**

**`:ntn-child()`**

**`:root()`**

* Everything inherits from the `:root` class.



### Pseudo Element

Act like you added a new HTML element into the document.

They use `::` instead of `:`.



**`::after` & `::before`**

**`::first-letter` & `::first-line`**



## Variables

* You can put variables inside the `:root` pseudo-class.
* Use variables with `--` and upper case names.
* To call the variables use the function `var()`.
* It is possible to redeclare them bu just assigning a new value after already defined. (For changing it based on `@media` queries)



## Functions

**`attr()`**

* Get values from HTML attributes.



**Making a Tooltip**

```html
<span data-tooltip="Show this data">Hover</span>
```

```css
span[data-tooltip] {
	position: relative;
}

span[data-tooltip]:hover::before {
	content: attr(data-tooltip);
	position: absolute;
	top: -20px;
	white-space: nowrap;
	background-color: black;
	padding: 5px;
	border-radius: 15px;
}
```
