Fill out the how the web works learn content (#38109)

* Fill out the how the web works learn content * Update files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/the_web_standards_model/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_browsers_load_websites/index.md Co-authored-by: Brian Smith <[email protected]> * Update files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md Co-authored-by: Brian Smith <[email protected]> * Fixes for bsmth review comments --------- Co-authored-by: Brian Smith <[email protected]>
mdn · Feb 13, 2025 · 90e419a · 90e419a
1 parent a29769d
commit 90e419a
Show file tree

Hide file tree

Showing 7 changed files with 328 additions and 146 deletions.
diff --git a/...en-us/learn_web_development/core/structuring_content/basic_html_syntax/index.md b/...en-us/learn_web_development/core/structuring_content/basic_html_syntax/index.md
@@ -47,6 +47,10 @@ If we wanted the text to stand by itself, we could specify that it is a paragrap
 <p>My cat is very grumpy</p>
 ```
 
+HTML lives inside text files called **HTML documents**, or just **documents**, with a `.html` file extension. Where previously we've talked about web pages, an HTML document contains the web page's content and specifies its structure.
+
+The most common HTML file you'll encounter is `index.html`, which is generally used to contain a website's home page content. It's also common to see subfolders with their own `index.html`, so a website can have multiple index files in different places.
+
 > [!NOTE]
 > Tags in HTML are not case-sensitive. This means they can be written in uppercase or lowercase. For example, a {{htmlelement("title")}} tag could be written as `<title>`, `<TITLE>`, `<Title>`, `<TiTlE>`, etc., and it will work. However, it is best practice to write all tags in lowercase for consistency and readability.
 

diff --git a/files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md b/files/en-us/learn_web_development/core/styling_basics/what_is_css/index.md
@@ -57,31 +57,34 @@ The web would be a boring place if all websites looked like that. This is why yo
 
 Using CSS, you can control exactly how HTML elements look in the browser, presenting your documents to your users with whatever design and layout you like.
 
-A **document** is usually a text file structured using a markup language — {{Glossary("HTML")}} is the most common markup language, but you may also come across other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}.
-
-**Presenting** a document to a user means converting it into a form usable by your audience. {{Glossary("browser","Browsers")}}, like {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, or {{Glossary("Microsoft Edge","Edge")}}, are designed to present documents visually, for example, on a computer screen, projector, or printer.
+- A **document** is usually a text file structured using a markup language, most commonly {{Glossary("HTML")}} (these are termed _HTML documents_). You may also come across documents written in other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}. Where previously we've talked about web pages, an HTML document contains the web page's content and specifies its structure.
+- **Presenting** a document to a user means converting it into a form usable by your audience. {{Glossary("browser","Browsers")}} like {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Apple_Safari","Safari")}}, and {{Glossary("Microsoft Edge","Edge")}} are designed to present documents visually, for example, on a computer screen, projector, mobile device, or printer. In a web context, this is generally referred to as _rendering_; we provided a simplified description of the process by which a web page is rendered in [How browsers load websites](/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites).
 
 > [!NOTE]
 > A browser is sometimes called a {{Glossary("User agent","user agent")}}, which basically means a computer program that represents a person inside a computer system.
 
-CSS can be used for text styling — for example, for changing the [color](/en-US/docs/Web/CSS/color_value) and [size](/en-US/docs/Web/CSS/font-size) of headings and links. It can be used to create a layout — for example, [turning a single column of text into a layout](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts) with a main content area and a sidebar for related information. It can even be used for effects such as [animation](/en-US/docs/Web/CSS/CSS_animations). Have a look at the links in this paragraph for specific examples.
+CSS can be used for many purposes related to the look and feel of your web page. The most important are:
+
+- Text styling, for example, for changing the [color](/en-US/docs/Web/CSS/color_value) and [size](/en-US/docs/Web/CSS/font-size) of headings and links.
+- Creating layouts, for example, [turning a single column of text into a multiple-column layout](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts).
+- Special effects such as [animation](/en-US/docs/Web/CSS/CSS_animations).
 
 The CSS language is organized into _modules_ that contain related functionality. For example, take a look at the MDN reference pages for the [Backgrounds and Borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module to find out what its purpose is and the properties and features it contains. In that module, you will also find a link to _Specifications_ that defines the technology.
 
 ## CSS syntax basics
 
-CSS is a rule-based language — you define rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.
+CSS is a rule-based language — you define rules by specifying groups of styles that should be applied to particular element or groups of elements on your web page.
 
-For example, you can decide to style the main heading on your page as large red text. The following code shows a very simple CSS rule that would achieve this:
+For example, you might decide to style the main heading on your page as large red text. The following code shows a very simple CSS rule that would achieve this:
 
 ```css
 h1 {
   color: red;
-  font-size: 5em;
+  font-size: 2.5em;
 }
 ```
 
-- In the above example, the CSS rule opens with a {{Glossary("CSS Selector", "selector")}}. This _selects_ the HTML element that we are going to style. In this case, we are styling level one headings (`{{htmlelement("Heading_Elements", "&lt;h1>")}}`).
+- In the above example, the CSS rule opens with a {{Glossary("CSS Selector", "selector")}}. This _selects_ the HTML elements that we are going to style. In this case, we are styling level one headings (`{{htmlelement("Heading_Elements", "&lt;h1>")}}`).
 - We then have a set of curly braces — `{ }`.
 - The braces contain one or more **declarations**, which take the form of **property** and **value** pairs. We specify the property (for example, `color` in the above example) before the colon, and we specify the value of the property after the colon (`red` is the value being set for the `color` property).
 - This example contains two declarations, one for `color` and another for `font-size`.
@@ -93,11 +96,13 @@ A CSS stylesheet contains many such rules, written one after the other.
 ```css
 h1 {
   color: red;
-  font-size: 5em;
+  font-size: 2.5em;
 }
 
 p {
-  color: black;
+  color: aqua;
+  padding: 5px;
+  background: midnightblue;
 }
 ```
 
@@ -108,89 +113,56 @@ You will find that you quickly learn some values, whereas others you will need t
 
 ## How is CSS applied to HTML?
 
-When a browser displays a document, it must combine the document's content with its style information. It processes the document in a number of stages, which we've listed below. Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways.
-
-1. The browser loads the HTML.
-2. It converts the HTML into a tree-like structure called a {{Glossary("DOM")}} (_Document Object Model_) tree. The DOM represents the document in the computer's memory.
-3. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images, videos, and CSS! JavaScript is handled a bit later on in the process, and we won't talk about it here to keep things simpler.
-4. The browser parses the fetched CSS, and sorts the different rules into different "buckets" based on which HTML elements (represented in the DOM as **nodes**) they will be applied to. The browser then attaches styles to different elements as required (this intermediate step is called a **render tree**).
-5. The render tree is laid out in the structure it should appear in after the rules have been applied.
-6. The visual display of the page is shown on the screen (this stage is called painting).
-
-The following diagram also offers a simple view of the process.
-
-![Rendering process overview](rendering.svg)
+As explained in [How browsers load websites](/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites), when you navigate to a web page, the browser first receives the HTML document containing the web page content and converts it to a **DOM tree**.
 
-### More on the DOM
+After that, any CSS rules found in the web page (either inserted directly in the HTML, or in referenced external `.css` files) are sorted into different "buckets", based on the different elements they will be applied to (as specified by their selectors). The CSS rules are then applied to the DOM tree, resulting in a **render tree**, which is then painted to the browser window.
 
-As mentioned above, the DOM has a tree-like structure. Each element, attribute, and piece of text in the markup language becomes a {{Glossary("Node/DOM","DOM node")}} in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.
-
-Understanding the DOM will help you design, debug, and maintain your CSS because the DOM is where your CSS and the document's content meet up. When you use browser DevTools you navigate the DOM as you select items in order to see which rules apply.
-
-Let's look at an example to see how a real HTML snippet is converted into a DOM.
-
-Take the following HTML code:
+Let's look at an example. First of all, we'll define an HTML snippet that the CSS could be applied to:
 
 ```html
-<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
-```
+<h1>CSS is great</h1>
+
+<p>You can style text.</p>
 
-The browser parses the HTML and creates a DOM from it, which looks like this:
-
-```plain
-P
-├─ "Let's use:"
-├─ SPAN
-|  └─ "Cascading"
-├─ SPAN
-|  └─ "Style"
-└─ SPAN
-    └─ "Sheets"
+<p>And create layouts and special effects.</p>
 ```
 
-In the DOM, the node corresponding to our `<p>` element is a parent. Its children are a text node and the three nodes corresponding to our `<span>` elements. The `SPAN` nodes are also parents, with text nodes as their children. When the browser renders the above DOM tree, it will look like so:
+Now, our CSS, repeated from the previous section:
 
-{{EmbedLiveSample('More on the DOM', '100%', 55)}}
+```css
+h1 {
+  color: red;
+  font-size: 2.5em;
+}
 
-```css hidden
 p {
-  margin: 0;
+  color: aqua;
+  padding: 5px;
+  background: midnightblue;
 }
 ```
 
-### Applying CSS to the DOM
-
-Let's say we modify our code to apply the following CSS to our document, to style it:
+This CSS:
 
-```html hidden
-<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
-```
-
-```css
-span {
-  border: 1px solid black;
-  background-color: lime;
-}
-```
+- Selects all `<h1>` elements on the page, coloring their text red and making them bigger than their default size. Since there is only one `<h1>` in our example HTML, only that element will get the styling.
+- Selects all `<p>` elements on the page, giving them a custom text and background color and some spacing around the text. There are two `<p>` elements in our example HTML, and they both get the styling.
 
-In this case, the browser will first create a DOM tree, as in the previous section. Next, it parses the CSS. Since the only rule available in the CSS has a `span` selector, the browser sorts the CSS very quickly! It applies that rule to each one of the three `<span>`s, then paints the final visual representation to the screen.
+When the CSS is applied to the HTML, the rendered output is as follows:
 
-The updated output is as follows:
+{{EmbedLiveSample('How is CSS applied to HTML?', '100%', 200)}}
 
-{{EmbedLiveSample('Applying CSS to the DOM', '100%', 90)}}
+> [!CALLOUT]
+>
+> **Try it out**
+>
+> Try playing with the above example. To do so, press the "Play" button in the top-right corner to load it in our Playground editor. Try the following:
+>
+> 1. Add another paragraph of text below the two existing ones, and note how the second CSS rule is automatically applied to the new paragraph.
+> 2. Add an `<h2>` subheading somewhere below the `<h1>`, maybe after one of the paragraphs. Try giving it a different color by adding a new rule to the CSS. Make a copy of the `h1` rule, change the selector to `h2`, and change the `color` value from `red` to `purple`, for example.
+> 3. If you are feeling adventurous, try looking up some new CSS properties and values in the MDN [CSS reference](/en-US/docs/Web/CSS/Reference) to add to your rules!
 
 ## Summary
 
-Now that you have some understanding of what CSS is and how it works, let's move on to getting you started with writing some CSS yourself.
+Now that you have some understanding of what CSS is and how it works, let's move on to giving you some practice with writing CSS yourself and explaining the syntax in more detail.
 
 {{NextMenu("Learn_web_development/Core/Styling_basics/Getting_started", "Learn_web_development/Core/Styling_basics")}}