Clearing up confusion - CSS

While I have a basic understanding of HTML/CSS and their properties, I find that there is a lot of unexpected behavior that I either forget or don’t know about. Here is a list of rules and concepts that might not be immediately obvious to someone learning or using HTML/CSS.

Cascade and Specificity

If multiple rules apply to the same element, the one defined later in the CSS file will take precedence. This can cause a lot of confusion, especially with multiple files in the HTML where the last linked file takes precedence. Same goes for <style>. There is more to be said about this, but it can get a little messy. It’s best to keep things simple, logical, and check for conflicts via developer tools.

Inheritance

Some styles applied to a parent element are passed down to descendants. However this primarily applies to font/text properties like color, font, word-spacing, etc.

Most other properties are not inherited, like box model, layout, and positioning properties. Luckily, this is somewhat intuitive as it would be silly for every descendent to have margin: 20px.

Forcing Inheritance

Properties can be set to inherit to grab the computed value from the parent. For example, background-color: inherit.

Box Model

The width and height property refer to the content portion of the box model. To include padding and border, use box-sizing: border-box.

* {
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 5px
	solid black;
	box-sizing: border-box; /* Total size remains 100px */
}

Position and Stacking

• static - Default value. It is the only position type that is not affected by left, right, top, bottom. This is considered NOT positioned, just part of the normal document flow.
• relative - Positioned relative to static position using left, right, top, bottom. Other content WILL NOT be adjusted. STAYS in document flow.
• absolute - Positioned relative to nearest POSITIONED ancestor. If no positioned ancestor, then uses document body. REMOVED from document flow.
• fixed - Completely fixes an element on the viewport. That means scrolling will not affect it. Good for some backgrounds, nav bars, popups.
• z-index - Only works on POSITIONED elements.

Flexbox

justify-content affects the main axis. align-items affects the cross-axis. How do I know what the main axis is? It’s determined by flex-direction which is set to row by default.

Note: display: flex is mandatory to use any flex attributes. This is the flex container which can be modified with flex-direction, justify-content, align-items, and flex-wrap.

Additionally: Flex is only applied to direct children (not descendants) called the flex items which can be modified with order, flex, and align-self.

The 3 Values
flex: 0 1 auto is the default when using flex generally. Here is what each value does:

1. flex-grow - 1 means the items will grow proportionally to fit available space
2. flex-shrink - 1 means the item will shrink proportionally
3. flex-basis - initial size of the item before growing/shrinking occurs, can be fixed 100px or auto
   This doesn’t necessarily need to be known, but is good for understanding.

Units

• Percentages are relative to the parent element, but the parent must have a defined size.
• 2vh is 2% of the window (viewport)

Default Styles

Browsers apply default styles to element like body and h1 which may vary. Be aware of these, and reset/style them as needed. It is generally good practice to favor resetting, this is often seen in the form of a standardized normalize.css or reset.css like here. These are often included in any CSS frameworks.

* { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
}