It’s helpful to understand the relationship between HTML and CSS when you’re building for the web.

In this lesson:

1. Understanding how browsers render code
2. Inspecting website code
3. Understanding HTML and CSS
4. Designing while Webflow generates clean code for you
   ‍

Understanding how browsers render code

When you visit a website, what you see on your screen is the result of your browser making decisions about how to render the website's underlying code. It uses the information in the code to display what everyone sees when they load the page.

Inspecting website code

You can inspect and temporarily edit source code on most browsers.

To open Chrome DevTools: and manipulate

1. Right click and choose Inspect from the popup menu, or press Control + Shift + I (on Windows) or Command + Option + I (on Mac)
2. Edit code in the inspector to temporarily change the content in your browser

It can be fun to test the relationship between code and rendered content. Since you're only making changes locally in your browser, your updates will disappear as soon as you refresh the page.

In HTML, we used to style all the content with inline styles, line-by-line. Simple things like changing font family, color or size would require an item-by-item update inside the HTML. Updating a site element by element was extremely redundant and made it difficult to update a single site-wide style, like a font family or font size for your basic paragraph element.