January 14, 2026

CSS Selector Types

• Type Selector: p { } - targets all elements of that type
• Class Selector: .alert { } - targets elements with that class
• ID Selector: #navbar { } - avoid using (too specific)
• Grouping: h2, .alert, #navbar { } - same styles to multiple selectors
• Compound: p.alert { } or .alert.success { } - must match both
• Descendant: header p { } - any p inside header
• Child: header > p { } - direct children only
• Pseudo-class: li:hover { }, li:focus { } - interactive states

CSS Specificity & Cascade

Rule: If two rules apply, the more specific rule wins.

Best Practice: Be as general as you can, but as specific as you need to be.

• Inline styles > ID selectors > Class selectors > Type selectors
• More specific selectors override less specific ones
• Later rules override earlier rules (if same specificity)

Font Sizing Units

• px: Absolute (avoid for fonts)
• em: Relative to parent element - 2em = 2x parent size
• rem: Relative to root element - 2rem = 2x root size (usually 32px)
• %: Percentage of parent - 50% = half of parent

Best Practice: Use rem or em instead of px for accessibility.

Box Model & Display

• All HTML elements take up space based on their box size
• display: inline - flows with text, can't set width/height
• display: block - takes full width, starts new line
• display: inline-block - inline flow but can set dimensions

Flexbox Layout

Ideal for centering elements and creating column layouts.

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.child {
    flex-grow: 1;
}

Note: Don't use Flexbox for simple stacking or spacing that browsers handle by default.

CSS Class Naming

Semantic Naming

Name classes by their purpose:

• .forum-post, .side-nav, .avatar-icon, .breaking-news

Modular Naming

Name classes by function, combine multiple:

• .font-large, .bg-secondary, .small, .rounded

BEM Schema

Pattern: block__element--modifier

<form class="form form--theme-xmas form--simple">
    <input class="form__input" type="text">
    <input class="form__submit form__submit--disabled" type="submit">
</form>