CSS Layout and Formatting

This document explains CSS layout and formatting, contrasting it with older table-based methods. It uses a simplified explanation of the Document Object Model (DOM) and the CSS box model to illustrate how a browser renders a webpage. The article then provides answers to frequently asked questions (FAQs) about CSS layout and formatting.

While CSS1 offered limited graphical layout capabilities, CSS2 and CSS3 significantly expanded these features, providing a more powerful alternative to layout tables and presentational markup. Browsers render HTML documents in two stages: parsing and rendering. Parsing involves creating a DOM tree from the HTML markup.

Consider this HTML example:

<code class="language-html"><title>Widgets</title>
<h1>Widgets</h1>
<p>Welcome to Widgets, the number one company in the world for selling widgets!</p></code>

This translates to a DOM tree (text nodes omitted for brevity):

The DOM tree consists of nodes (element nodes and text nodes). The root node (always the html element) branches into head and body, further branching into child nodes. Relationships between nodes include parent-child, ancestor-descendant, and sibling.

After DOM construction and CSS parsing, the rendering phase begins. Each DOM node is rendered as one or more rectangular CSS boxes (block boxes or inline boxes, with subtypes). The user agent stylesheet typically assigns block boxes to block-level elements and inline boxes to inline elements, though the display property can override this. Importantly, CSS doesn't alter the HTML markup; the block/inline distinction is defined by the HTML DTD.

Frequently Asked Questions:

Q: What's the difference between CSS layout and formatting?

A: Layout concerns element arrangement (position, size, alignment) on a page (headers, footers, sidebars). Formatting focuses on visual appearance (color, font, background, borders, spacing).

Q: How to create a responsive CSS layout?

A: Use media queries (styles for different devices), flexible grid-based layouts (percentages instead of fixed units), and flexible images/media (relative units).

Q: What are the different CSS layout models?

A: Block model (block-level elements), inline model (text), table model (tabular data), positioned model (explicit positioning), and flex model (flexible box layouts).

Q: How to use CSS for text formatting?

A: Use font-family, font-size, font-weight, text-align, text-decoration, text-transform, and color properties.

Q: What is the CSS box model?

A: A fundamental concept describing space distribution around elements. Each element is a rectangular box comprising content, padding, border, and margin layers.

Q: How to format lists with CSS?

A: Use list-style-type, list-style-position, list-style-image, padding, and margin properties.

Q: What are CSS Grid and Flexbox?

A: Modern layout systems. Grid is two-dimensional (rows and columns), while Flexbox is one-dimensional (rows or columns). Both are responsive.

Q: How to format tables with CSS?

A: Use border, padding, background, text-align, and vertical-align properties.

Q: Difference between inline and block elements?

A: Inline elements don't start new lines and only take up needed width (e.g., <span></span>, <a></a>). Block elements start new lines and span full width (e.g., <div>, <code><h1></h1>).

Q: How to format links with CSS?

A: Use color, text-decoration, background-color, and pseudo-classes (hover, active, visited).