Rendering Logic

Built-in Declarations and Inheritance

A user-agent stylesheet is essentially css that browsers use as default styles for certain html elements.

Inheritance

Not all CSS properties are inheritable.
If a CSS property is inheritable, the element that this CSS property is assigned to, will also be assigned to its children and grandchildren.
a nice example example is color and border box, color is inherited where as border box is not.

<p>I know <em>you</em> are, but what am I?</p>

p {
  border: 1px solid blue;
  color: red;
}

In this example:
- color will be applied to everything in the p tag, including what is in the em tag.
- border will be applied to the entire p tag, but not around the em contents as well.
Most properties that inherit are typography related (color, font-size, text-shadow, etc.)_
Complete list of Inheritable Properties

Inheritance in CSS is very similar to that of JavaScript prototypes:

class Main {
color = 'black'
}

class Paragraph extends Main {
backgroundColor = 'red'
}

class Span extends Paragraph {
}

const s = new Span();

console.log(s.color);

CSS:

<main style="color: black;">
  <p style="color: red;">Hello <span>World</span></p>
</main>

Forcing Inheritance

Using the built in anchor tag styles to demonstrate this.
Anchor tags are set to a blue color with an underline by default.
We can override this easily be doing the following style: css a { color: inherit; } - This will set the color of the anchor tag to match what's surrounding it.

The Cascade

If an element has multiple styles of the same property being applied to it, the browser selects on based off of the specificity of the selector.

Levels of specificity

Here is a list going from highest level of precedence to lowest: 1. id 2. class 3. tag

Cascading isn't covered as much, simply because it can be avoided with modern technologies and styling by components

Block and Inline Directions

Block direction (vertical) - think of lego blocks stacking on top each other
Inline direction (horizontal) - think of people standing in line

There are alternatives to CSS properties known as logical properties:

margin-top == margin-block-start
margin-bottom == margin-block-end
margin-left == margin-inline-start
margin-right == margin-inline-end These alternatives exist because not all languages are read write to left, so using these alternatives may make more sense in different contexts.
Logical properties will most likely overcome their old counterparts at some stage.

The Box Model

Has 4 key aspects - descriptions relate to a person wearing a coat in winter (good analogy): 1. Contents - is the person themselves in the coat. 2. Padding - is the polyester inside the coat, the more in there, the more puffed up the coat will be. 3. Border - Is the outer material of the coat, it has a thickness and a color. It affects the persons appearance. 4. Margin - The person's personal space.

We want to use box-sizing: border-box; property, the default content-box isn't as intuitive.
- The content-box property adds padding and border on top of the set width whereas border-box renders the padding and border within the set width.
- This ultimately results in the element actually being how wide you set it to be.

When using padding, margin, border, and boarder radius (there are others), you can set the values different like so:

border: 10px 20px; /* top:10 right:20 bottom:10 left:20 */
margin: 10px; /* top:right:bottom:left:10 */
padding: 10px 5px 10px; /* top:10 right:5 bottom:10 left:5 */
margin: 3px 2px 1px 3px; /* top:3 right:2 bottom:1 left:3 */

Padding

The inner space.
Pixels (usually frowned upon for accessability) are quite good for setting padding.

Border

outline of the element
- border: 2px solid blue;
Border radius (should of been called corner radius) essentially rounds off the corners. -border-radius: 25px or border-radius: 50% are some common ways of setting it. - can set different corners to get different shapes: border-radius: 10px 10px 40px 40px; Some cool borders that I like: - Double - Inset - Ridge Border VS Outline

Outline doesn't affect layout, it's like a box shadow.
It's a cosmetic affect draped over an element.
Outlines are often used in conjunctions with borders to get cool multi-colored effects.
You can add a gap between border and outline with outline-offset property

Margin

You can use negative values with margins to pull the element outside of its parent.
Negative margins can also pull an elements sibling closer.
Negative margins can affect the position of all siblings.
auto are used to center items.
- margin-left: auto; margin-right: auto; - centers the element horizontally by placing equal amount of margin to left and right.
- margin: auto - does the same as above and sets top and bottom margin to 0.
- Only works on elements with a set width

Flow Layout

There are different types such as: Flexible Box, Grid Layout, and Flow Layout (default)
Block Elements: contents that make up a page; headings, paragraphs, footers, asides.
Inline Elements: Highlight bits of text within a block container; links, bold text, spans.
- Kind of just go with the flow, its only really easy to shift them in the inline direction.
Replaced Element: Is one that embeds a foreign object; images, videos, canvas.
Inline images will have whitespace between them if you space out your html tags. If you condense the tags, there will be no whitespace.
- By spacing out it means having each attribute on a new line and the closing part of the tag on a new line
inline-block: is like a block in inline clothing. It acts as a block but can be placed inline.
- Unlike inline, inline-block doesn't wrap.

Width Algorithms

Block elements have a default width of auto and width: auto; works similarly to margin: auto;.
- It's a hungry value and will grow as much as its able to.
- As an example, take a h1 tag that will grow to consume (100% - 32px), since there is 16px of margin on either side.
Keyword Values:
- Measurements (200px, 5rem ,50%) can either be absolute (px) or relative to the parent (50%).
- Keywords (auto, fit-content) specify different sorts of behavior depending on context.
Some more keywords:
- min-content: make it as narrow as it can be based on its children.
- max-content: makes it as small as possible without breaking it up onto any new lines.
  - unlike auto this doesn't take up available space, making this a nice way to do background effects only around the contents of an element.
- fit-content: Essentially only breaks the text on to a new line if it exceeds the width of the parent. It tries to keep as much of it on the same line as possible, aligning with that rule.

Figures and Captions

Allows you to display images nicely with captions.
A good way to style this is to give the figure element a width of min-width.
This styles the caption to the width of the image, since the image is the largest parent of the div (unless you have a monstrously long word)

<figure>
  <img
    src="/graph.jpg"
    alt="A bar graph showing the number of cats per capita"
  />
  <figcaption>Source: Cat Scientists Ltd.</figcaption>
</figure>

Height Algorithms

Generally speaking, avoid having fixed heights.
You can set viewport height with the small viewport height measurement (svh), this ensures (mainly for mobile devices) that the height of the viewport behaves as expected.
We can use it like so

height: 100vh; /* Fallback for older browsers */
height: 100svh;

Margin Collapse

Margins can overlap, if two objects have 6px margin, these margins can overlap and the rule is still met. 12px distance between the 2 elements isn't required.
Margin collapse is unique to Flow Layout.
Types:
- Only vertical margins collapse:
  - This results in the margins simply overlapping.
  - For example take paragraphs with each p tag having 24px of top and bottom margin. The gap between the paragraphs will be 24px not 48px.
  - br tags ruins this functionality, making the margins not collapse anymore.
  - if the margins are different sizes, the bigger margin wins.
  - they can collapse in the same direction, if 2 margins are top and on different elements they can collapse.
  - Margins must be touching to collapse.
  - Nesting doesn't stop this collapsing by itself.
  - It can be stopped with padding or a border, these act kind of like walls which will stop the margin collapse.
  - If we explicitly set a height and there is a gap between elements, then margin collapse will be avoided also.
- Only horizontal margins collapse:
  - This results in the margins not overlapping.
  - Take 2 spans next to each other with left and right margin of 10px on each. The margin between the 2 will be 20px.
- Generally speaking it is more accurate to say, block elements collapse and inline elements don't.
- Negative margins collapse similarly to positive ones, the larger negative value will take precedence in pulling the siblings.
- Mixture of negative and positive will result in the difference between the largest positive and largest negative.
The Margin Algorithm can be simplified into this:
- All positive margins collapse together.
- All negative margins collapse together.
- Add those two numbers together.
A key distinction between width and height is that width looks up the tree and height looks down the tree.
In other words, width will base its width percentage off of its parent. Whereas height will base its percentage off its child.

Margin Collapse Cheatsheet

If its vertical and only margins collapse positives and negatives and take difference.
- Because there is no padding or borders the children aren't getting their own margins, it will collapse into the parent's margin
If there is padding or borders, the children will get their own relative margins
Vertically margins collapse
Horizontally margins don't collapse

Random Takeaways

You can set colors with the currentColor keyword. It will grab the color that is currently active in the element (via inheritance)
In order to stretch an image outside of some padding, wrap the image in a div that is stretched (via negative margins)
Avoid margin where possible
Converting pixels to rem... divide the pixel number by 16.

Return