# Module 1: Rendering Logic I

## Built-in Declarations and Inheritance

• user-agent stylesheet
• Styles included with the browser
• Most browsers come up with their own implementation

### Inheritance

• Certain CSS properties inherit
• Most of these properties are typography-related (eg. color, font-size, text-shadow)
• List of inherited properties
• Similar to JavaScript's proptypal inheritance
• Walks up the tree and gets properties from it's parent
• You can force an element to inherit a property by using inherit

a {
/* Inherit color from the parent  */
color: inherit;
}


• Browser uses specificity to determine what CSS rules apply to an element
• JS equivalent --> spreading a bunch of objects into a new one
• Specificity is not usually a problem in modern development due to the CSS tooling used by most companies

## Directions

• Based on the print world
• Vertically-oriented blocks (eg. paragraphs)
• Horizontally-oriented words
• CSS has logical properties which have context of the directions
• margin-block --> vertical axis
• margin-inline --> horizontal axis

## The Box Model

• Content
• Border
• Margin

### Box Sizing

• content-box
• Width/height includes only the content
• border-box
• Width/height includes content, padding, and border

• "Inner space"
• If you use percentages in padding, it always refers to the width of the element, even when using top/bottom padding

### Border

• Comprised of a width, style, and color
• The only required field is border-style
• If you don't specify border-color, it uses the font's color by default
• The currentColor keyword can be used to explicitly set this behaviour

• Should've been called corner-radius because it rounds the corners of an element with or without a border

#### Border vs. Outline

• Both add a visual edge to an element
• outline doesn't affect layout
• More like a box-shadow
• Cosmetic effect that doesn't move an element or change its size
• Allow you to add a gap between the outline and the element with outline-offset
• Never remove an outline (outline: none;) from a button (unless providing an alternative)

### Margin

• Space around an element
• It's about changing the gap between elements
• margin: auto; will fill the maximum available space with margin
• Only works for horizontal margin in the default "flow" layout
• margin-top: auto; is equivalent to 0px
• Only works with elements that have a explicit width (block elements grow to fill the available horizontal space)

## Flow Layout

• Elements have their layout calculated by a layout algorithm
• Know as layout modes
• There are 7 distinct ones
• Flow layout is the default layout mode
• Every element uses a display of inline, block, or inline-block

### Inline Elements

• Can't change width or height
• Don't impact the flow of a document
• Inline elements are usually treated as if they're typography; this means they'll have line height on them
• Inline elements can line-wrap

### Block Elements

• Expands to fill all available horizontal space

### Inline Block Elements

• Drop a block element into an inline context
• Internally acts as a block element, externally acts as an inline element
• Doesn't line-wrap

### Width Algorithms

• Percentage-based widths are based on the parent element's content space
• Eg. if the body tag has width: 400px;, any child width width: 100%; will be 400px wide
• min-content
• Our content should be as small as it can based on child contents
• Sizing based on an element's children instead of its parent
• max-content
• Element's width will be the smallest value that fits all of the content without breaking it up
• fit-content
• If the width can fit within the parent container, it'll behave like max-content (no line-breaks)
• If the content is too wide to fit in the parent, adds line-breaks as-needed (like width: auto;)