`—into an object called a **node**. These nodes are connected in a hierarchical, parent-child relationship, forming a tree structure known as the **DOM (Document Object Model)**. The DOM acts as an in-memory representation of the web page. It tells the browser **what elements exist, how they are nested, and what content they contain**. This structure allows the browser to apply CSS styles, execute JavaScript, and update the page dynamically. Without DOM creation, the browser would not be able to render or interact with a web page. ## CSS parsing and CSSOM creation After the browser receives the CSS files, it begins parsing the CSS to understand how the web page should look. The browser reads each CSS rule, selector, and property, and converts them into objects that it can work with internally. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769607820298/a4ff2138-1e5e-4825-8481-52235754b6d4.png align="center") These objects are organized into a structure called the **CSSOM (CSS Object Model)**. The CSSOM represents all the styles defined for the page, including rules from external stylesheets, internal styles, and inline styles. It also resolves conflicts using rules like specificity and inheritance. The browser then combines the **DOM** (page structure) and the **CSSOM** (styles) to determine the final appearance of each element. Without the CSSOM, the browser would know what content exists, but not how it should be visually displayed. --- ## How the DOM and CSSOM come together Once the browser builds the two separate models—the **DOM** from the HTML and the **CSSOM** from the CSS—the DOM outlines the page's structure, detailing what elements exist and how they are nested. Meanwhile, the CSSOM specifies how these elements should appear, including colors, fonts, sizes, and positioning. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769608169681/ecd43794-10db-4f48-8cf5-46e67b2c0d88.webp align="center") Once both models are ready, the browser combines them to create the **Render Tree**. This tree includes **only visible elements** (elements like `
` or those with `display: none` are excluded) and attaches the final, computed styles to each element. Using the render tree, the browser calculates the **layout**, determining the size and position of every element on the page. Finally, it **paints** the pixels to the screen, producing the fully rendered webpage you see. > In short, the **DOM provides structure**, the **CSSOM provides styling rules**, and together they enable the browser to correctly layout and display the page. --- ## **Layout (Reflow), Painting, and Display** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769609328690/a95bd1c9-d988-4fde-9586-448a89ba2437.png align="center") After the browser creates the render tree, it goes through the final steps to display the webpage: * **Layout (Reflow):** The browser determines the **size and position** of each element in the render tree using the viewport, and CSS rules, with any layout changes (such as window resizing or font size adjustments) potentially triggering a reflow. * **Painting:** Once layout is complete, the browser **paints pixels** by filling in colors, text, images, borders, and shadows for each element. * **Display (Compositing):** The painted elements are combined into layers and **composited** together to display the final visual result on the screen. Together, these steps turn the render tree into the **fully visible webpage** we interact with. --- ## Conclusion Browsers may look simple, but each page load involves a fast, coordinated system. From fetching resources to parsing HTML and CSS, building the DOM and CSSOM, executing JavaScript, and finally laying out and painting pixels, each part plays a crucial role. The browser engine oversees this process, the rendering engine brings pages to life, and systems like networking, storage, and JavaScript engines enable modern web experiences. Understanding how a browser works takes you beyond just *using* the web to truly understanding it. Whether you’re learning web development, debugging performance issues, or exploring system design, browser internals provide a strong foundation for grasping how the modern web operates from URL to rendered page. --- > If you enjoyed this article, check out my other blogs on this profile. > > 🔗 **Connect with me:** > [**LinkedIn**](https://linkedin.com/in/rajharsh4618) | [**GitHub**](https://github.com/Harsh-Raj4618) | [**X (Twitter)**](https://x.com/Harsh_Raj4618)