Simulic
English

HTML and CSS playground – content, structure and style

Computer ScienceDigital ApplicationsAges 17–18

Loading…

Use with my class ✨ Customize with AI Report a problem

Edit the content, the HTML markup and a CSS stylesheet in separate panes and watch the rendered page and the DOM tree update as you type. Swap stylesheets to see the same content presented in a completely different way; click any element to see which CSS rules apply, their specificity and the box model. A validator reports unclosed and misnested tags and invalid CSS properties and values. Two more tabs cover a form with browser validation and the GET/POST request it sends, and click and input events that change the page.

Lesson: Building web pages with HTML and CSS: elements, attributes, selectors, the box model, forms and events

What it shows

A web page has three layers. HTML marks up the content with elements such as h1, p, ul and table, and the browser turns the markup into a DOM tree. CSS rules choose elements with selectors (tag, .class, #id) and set properties such as color, margin and padding; when rules conflict, importance, specificity and source order decide, and some properties are inherited. Every element is a box made of content, padding, border and margin. Forms send name=value pairs to a server with GET or POST, and JavaScript event handlers change the DOM after the page has loaded.

How to use

In Page and style, choose an Example page and a Stylesheet, then edit the Content, HTML or CSS pane and watch the page and the DOM tree. Click an element in the page or a DOM tree row to inspect its rules and box model; click a message to jump to its line. In Form, fill in the fields and submit to see the HTTP request. In Events, edit the handlers in the Events (JS) pane and click the buttons.

Parameters you can change

  • Tab Page and style, Form, Events
  • Example page Article, Profile cards, Table
  • Stylesheet Classic, Modern, Dark, No CSS
  • Form method GET, POST
  • Show the DOM tree
  • Show the box model

Questions to explore

  1. Why does swapping the stylesheet leave the DOM tree exactly the same?
  2. Which rule wins, #lamp or #lamp.on, and what are their specificities?
  3. Where does a GET form put its data, and why is that a bad choice for passwords?

Related simulations