External style

As explained in Web Design Playground, Second Edition

An external style sheet is a separate CSS resource containing style rules that can be linked to one or more HTML documents.

An external style sheet is a separate CSS file containing style rules. Traditionally, its filename ends in .css, such as styles.css. Attach it to a page with a link element in the head. section 7.4 section 7.7

Attach the stylesheet

For a CSS file beside the HTML page, write: <link href="styles.css" rel="stylesheet">. For a file in a css subdirectory, use <link href="css/styles.css" rel="stylesheet">. You can also reference a root-relative path or a remote URL. The older type="text/css" attribute is unnecessary in HTML5. section 7.4

External styles make a consistent look easier across multiple pages. Change one CSS file and every linked page receives the update, keeping structure and presentation more separate. section 7.4

Figure 7.3 The <link> tag syntax for attaching an external style sheet to a web page

Use the link-element syntax figure to see how a page connects to an external CSS resource. section 7.4

External and internal author style sheets sit below inline styles in the cascade, so an inline declaration wins when both sources style the same element. section 19.13

How Web Design Playground, Second Edition covers it

How deep it goes

Explains file creation, link placement, four path choices, maintenance benefits, and cascade weight, but not advanced selector mechanics.

Examples

Uses styles.css, css/styles.css, /css/styles.css, and a remote Google Fonts stylesheet as link-path examples.

What it assumes

Assumes basic HTML page structure and introduces external styling alongside inline and internal methods.

What you can do after

Build it from scratch by creating a .css file and linking it from an HTML head.

How it connects

Connects CSS with HTML, the link element, internal style sheets, inline styles, and the cascade.

liveBookmanning.com

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

Also explained in

• 

  liveBookmanning.com
  Web Design PlaygroundA style sheet stored in a separate CSS file and linked to an HTML document instead of being written inline or in a style element.

Compare how 2 books explain external style →

Related concepts

• link elementuses · The HTML link element declares a relationship between a document and an external resource or resource metadata.
• style attributealternative to · The style attribute is an HTML or SVG attribute whose value contains CSS declarations applied directly to that element.
• CSSkind of · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
• internal stylealternative to · An internal style sheet is a collection of CSS rules embedded within an HTML document, typically in a style element.

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.