<html lang='en'>
<head>
<meta charset='utf-8'>
<title>My Page</title>
</head>
<body>
<p>
Lorem ipsum...
</p>
<p>
Lorem ipsum...
</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</body>
</html>
The Document Object Model (DOM) is a very important concept in Web Development
When a web page is received from the server by a browser, the browser divides (or 'parses') the elements into a tree of objects
If you're not familiar with the concept of 'objects' in computing, you can think of them as containers that have data stored within them, including properties and methods. Properties are data about the object (e.g., 'width'); methods define how the object behaves, including accessing and/or modifying its properties
This gives us the ability to manipulate each object to suite our needs. CSS is one of the ways in which we can modify an object's appearance. For example,
p {
color: blue;
}
would tell the browser to make the text in all of the paragraph elements (objects) display blue in color
Below is a representation of a DOM that would be generated by a very simple web page, whose code is to the right (or top, depending on your display). As you can see, the DOM gets real complicated, real quick. But understanding how a browser interprets a page will help in learning CSS and, later, JavaScript