Separation of structure and presentation

As explained in Web Design Playground, Second Edition

Separation of structure and presentation is a design pattern in which document content and organization are defined independently from its visual appearance.

Separation of structure and presentation keeps a web page’s ingredients and appearance in different places. HTML defines the page’s structure; CSS defines its visual presentation. Keeping the layers apart makes pages easier to build, maintain, and customize. section 1.2

Think of HTML as the page’s contents and CSS as its wardrobe:

• HTML supplies the document’s organization and elements. section 1.2
• CSS supplies formatting such as colors, fonts, spacing, shadows, positioning, and rotation. section 1.2
• An external style sheet places HTML files in a structural layer and CSS files in a presentation layer. section 7.4

One style sheet, many pages

Attach the same CSS file to several HTML pages: <link href="styles.css" rel="stylesheet">. A change to the stylesheet can update every linked page, while shared headings keep a consistent appearance. The visual design moves together without rearranging the HTML. section 7.4

Figure 1.3 The example web page with a few styles applied

See the example page after a few CSS styles are applied. section 1.2

How Web Design Playground, Second Edition covers it

How deep it goes

Defines the distinction and demonstrates external stylesheets, while deferring CSS cascade complexity and allowing inline or internal styles when useful.

Examples

Uses formatted links, headings, paragraphs, photos, lists, positioned text, rotated drawings, and a shared external stylesheet.

What it assumes

Assumes familiarity with HTML and CSS roles while introducing their structural-versus-visual distinction from the ground up.

What you can do after

Apply it via an external stylesheet to keep multiple HTML pages visually consistent and easier to update.

How it connects

Connects HTML, CSS, external style sheets, the cascade, inline styles, internal style sheets, and responsive page presentation.

liveBookmanning.com

Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Related concepts

• external styleimplemented by · An external style is a stylesheet stored as a separate resource and linked to one or more documents.
• HTMLimplemented by · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
• frontend developmentimplemented by · Frontend development is the practice of building the user-facing, client-side interfaces and behavior through which people interact with software.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.