1. HTML Core Concepts

1.1 Element Classifications

HTML elements are categorized by their default display behavior.

• Inline Elements: Do not start on a new line and only take up necessary width (e.g., span, a, img, input).
• Block-Level Elements: Start on a new line and stretch to the full width available (e.g., div, p, h1 through h6, section, footer).
• Void (Self-Closing) Elements: Tags that do not require a closing tag (e.g., br, hr, img).

The display property modifies this behavior:

• display: inline: Forces block elements to behave like inline elements (no width/height).
• display: block: Forces inline elements to behave like block elements.
• display: inline-block: Combines properties; flows with content but respects width and height.

1.2 External Stylesheet Inclusion

Differences between <link> and @import:

• Compatibility: <link> is an HTML tag (XHTML compatible), whereas @import is a CSS mechanism.
• Loading Order: Browsers load <link> files in parallel, improving performance. @import waits for the parent CSS file to load and parse before fetching the imported file, potentially causing a Flash of Unstyled Content (FOUC).

1.3 Semantic vs. Visual Tags

• title vs h1: title defines the browser tab text and SEO metadata. h1 represents the primary heading visible on the page.
• b vs strong: b is purely visual (bold text). strong indicates semantic importance (usually rendered bold).
• i vs em: i is visual (italic text). em indicates emphasized stress (usually rendered italic).

1.4 Image Formats and Use Cases

• PNG: Lossless compression; supports transparency. Best for icons, logos, and graphics requiring sharp edges.
• JPG (JPEG): Lossy compression; smaller file sizes. Best for photographs and complex images with gradients.
• GIF: Supports simple animations; limited to 256 colors. Best for simple moving graphics.
• WebP: Modern format supporting both lossy and lossless compression. Provides superior compression ratios but check for legacy browser support.

1.5 Accessibility Attributes

• alt: Provides alternative text for screen readers and displays if the image fails to load. Critical for accessibility.
• title: Displays tooltip text when the user hovers over the image.

2. CSS Styling and Layout

2.1 The Box Model

There are two primary box models:

• Standard Box Model (content-box): Width/height applies only to the content. Border and padding are added to the outside.
• IE Box Model (border-box): Width/height includes content, padding, and border. This is often preferred for easier layout sizing.

Switch models using: box-sizing: border-box; or box-sizing: content-box;.

2.2 Typography Metrics

height defines the fixed height of the element container. line-height specifies the vertical space allocated for a line of text. If a text block wraps, the element's total height becomes the sum of its line-height multiplied by the number of lines.

2.3 Selectors and Inheritance

Selectors: Universal (*), Type (div), Class (.class), ID (#id), Adjacent Sibling (+), Descendant ( ), Child (>), Attribute ([type="text"]).

Inheritance:

• Inherited: Font properties (font-size, font-family), text properties (color, line-height, text-align).
• Not Inherited: Box model properties (width, height, margin, border, padding).

2.4 Specificity Hierarchy

Priority order (highest to lowest):

1. !important (Avoid using)
2. Inline styles (style="...")
3. ID selectors
4. Class selectors, pseudo-classes, attribute selectors
5. Element (tag) selectors
6. Universal selector

2.5 Horizontal and Vertical Centering

Method 1: Flexbox

<div class="wrapper">
  <div class="center-box">Content</div>
</div>

<style>
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 2px solid #333;
}
.center-box {
  background-color: #007bff;
  color: white;
}
</style>

Method 2: Absolute Positioning with Transform

<div class="parent">
  <div class="child">Content</div>
</div>

<style>
.parent {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid #333;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #28a745;
  color: white;
}
</style>

2.6 Block Formatting Context (BFC)

A BFC is a self-contained rendering area that isolates the content inside from the outside layout (e.g., preventing margin collapse).

Triggers:

• float is not none
• overflow is not visible
• display is inline-block, table-cell, or flex
• position is absolute or fixed

2.7 Clearing Floats

To fix layout collapse when child elements are floated:

1. Trigger a BFC on the parent (e.g., overflow: hidden).
2. Add an empty div with clear: both after the floated elements (less elegant).
3. Use the ::after pseudo-element (Standard "clearfix"):

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

2.8 Positioning Schemes

• static: Default; follows normal document flow.
• relative: Positioned relative to its normal position; retains space in flow.
• absolute: Removed from normal flow; positioned relative to the nearest positioned ancestor.
• fixed: Removed from flow; positioned relative to the browser viewport.

2.9 CSS Reset vs. Normalize

Reset.css: Strips all default browser styles to provide a consistent blank slate.

Normalize.css: Preserves useful default styles while fixing cross-browser inconsistencies, making elements render consistently.

2.10 CSS Sprites

Concept: Combining multiple small images into a single large image.

• Pros: Reduces HTTP requests, improving load time.
• Cons: Difficult to maintain; changing one icon's size or position requires editing the whole sprite sheet and updating CSS coordinates.

2.11 Element Hiding

display: none: The element is removed from the render tree completely. It does not occupy layout space (triggers Reflow).

visibility: hidden: The element is not visible, but it retains its position in the layout (triggers Repaint only).