liveBook · Manning

Style attribute

As explained in Build a Website with ChatGPT

An inline style is CSS presentation code embedded directly in an HTML element or tag rather than stored in a separate stylesheet.

A style attribute holds CSS presentation code directly inside an HTML tag. This is called an inline style rather than styling supplied by a separate stylesheet. section 6.5

When building multipage websites, handle inline styles deliberately:

  • Use the shared styles.css file for the styling that applies across pages. section 6.2
  • Tell ChatGPT not to add inline styles when generating additional HTML pages. section 7.5
  • Add the instruction because generated inline formatting can conflict with or override the stylesheet’s rules. section 6.2
I want to build a website page. I don't know how to code, so I need you to provide the code for me.
  
Write the HTML code for a web page that includes the following:
 * A header element that includes the title "[page title]" and the tagline "[page tagline]".
 * The header should also include the following links in the upper-right corner:
[Copy your home page links here]
* A main element that includes the text between triple quotation marks.
 """
[page content goes here]
 """
 * A footer element that includes the Copyright symbol, followed by the current year, followed by "[your name]".
 * In the page head section, include the tag <meta charset="utf-8">.
 * In the page head section, include a reference to a stylesheet file named "styles.css".
 * In the page head section, include a reference to the Google fonts X and Y.
 * Do not add any inline styles.

Use the supplied page-generation prompt as a practical template; its final instruction explicitly excludes inline styles while linking styles.css. section 7.5

How Build a Website with ChatGPT covers it

How deep it goes
Defines inline styles and explains their risk, but stops short of showing syntax or examining CSS precedence.
Examples
Uses multipage information and hobby websites plus reusable ChatGPT prompts that reference styles.css and exclude inline styles.
What it assumes
Assumes basic awareness of HTML pages, CSS styling, and a stylesheet file named styles.css.
What you can do after
Operate/configure ChatGPT prompts to generate pages that reuse styles.css without adding inline styles.
How it connects
Connects HTML tags, CSS, stylesheets, multipage websites, and generated code.

Also explained in

Compare how 7 books explain style attribute →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build a Website with ChatGPT. The section links point to the parts of the book it draws on.