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

CSS values and units - Learn web development | MDNMDN Web Docs

• 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

@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

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

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;
}