HTML and CSS Fundamentals
Now that we understand what the DOM is, let’s take a quick look at the basics of HTML and CSS. This is important because the DOM is essentially a tree representation of your web page’s HTML structure.
HTML – The Basic Structure
HTML, or HyperText Markup Language, is like the glue that holds the web together. It structures the content of your page. Let’s see a simple example:
<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Hello World!</h1> <p>This is a paragraph.</p> </body> </html>
Here, <html>, <head>, <title>, <body>, <h1>, and <p> are HTML tags. Each plays a specific role in the page structure.
CSS – Style and Appearance
Now, imagine that HTML is like the bricks in your house and CSS is the paint on the walls. CSS, or Cascading Style Sheets, is used to style and position elements on the page. Let’s take a look:
h1 {
color: blue;
}
P {
font-size: 16px;
}
Here, we define that titles (<h1>) must be blue, and paragraphs (<p>) must have a font size of 16 pixels.
We went through some basics of HTML and CSS very quickly, but for those who don’t know or forgot, I’ll leave the links to the courses that explain it in detail:
Check it out, but then come back!
Connecting with the DOM
The magic happens when we connect these fundamentals to the DOM. The DOM reflects the HTML structure, and CSS defines what it should look like. Manipulating the DOM with JavaScript allows us to dynamically change the content and style of our page.
Now, with this solid foundation, you’re ready to explore how to access the DOM and start making changes. Let’s dive into this in the next topic! Get excited because the real fun is about to begin.
