Skip to content

10 ‐ Output box styling

Sanjay Viswanathan edited this page May 15, 2025 · 1 revision

01 Printing HTML code the below output browser

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Definition List Example</title>
</head>
<body>
  <h1>Glossary of Terms</h1>
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dt>JS</dt>
    <dd>JavaScript</dd>
  </dl>
</body>
</html>

code for Browser Screen

<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
<>
  <h1>Glossary of Terms</h1>
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dt>JS</dt>
    <dd>JavaScript</dd>
  </dl>
</>
</BrowserWindow>

image

output

image

02 - Printing CODE and Browser Side to Side

image

  <div className="flex flex-wrap items-center my-4 gap-4">
  ```html
  <ol type="1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
  <BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
    <ol type="1">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  </BrowserWindow>

  </div>

image