Understanding the relationship between HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) is crucial when you're building for the web. HTML makes up the structure and content of a website, while CSS styles the content. Webflow generates this code while you design/build on the Designer canvas.
In this lesson, you’ll learn about:
- How browsers render code
- How to inspect website code
- HTML and CSS
- Designing while Webflow generates clean code for you
How browsers render code
When you visit a website, the content on your screen is the result of your browser rendering the site’s code. Your browser uses the information in the code to display the website’s content and structure.
How to inspect website code
You can explore how a website’s code works behind-the-scenes by inspecting it. You can inspect and temporarily edit source code on most browsers.
You can inspect a website’s code on Chrome in 2 ways:
- Right-click and choose Inspect from the popup menu
- Press Control + Shift + I (on Windows) or Command + Option + I (on Mac)
Then, you can edit code in the inspector to temporarily change the rendered content in your browser. Since you’re only making changes locally (i.e., the changes are limited to your browser), your edits will disappear as soon as you refresh the page, and won’t be visible to other site visitors.
HTML and CSS
HTML determines a website’s content and structure while CSS determines the content’s styling. Imagine a website like a house: HTML is the house’s walls and foundation while CSS is the house’s paint color.
HTML
HTML controls the website’s content and tells the browser what’s on the page. This includes content like headings, paragraphs, links, and images.
In the past, web designers had to style HTML content with inline styles, line-by-line. This was tedious and made it difficult to update a site-wide style, like a font family or font size, because the web designer would have to individually update each element that uses the original font family or font size. But now, we use CSS.
CSS
CSS controls the styling of website content (e.g., colors, borders, size, positioning, typography, etc.). It takes all the styling information that used to be written inline, line-by-line, and moves it into a separate style document. There, you can use classes to group HTML elements together for more efficient styling. Any HTML elements with the same class will take on the styles associated with that class. You can also use HTML tags (i.e., selectors) to style certain groups of elements, like all H1 headings or all links.
You can test this in the inspector. When you make a change to a class or HTML tag in the CSS file, you’ll notice that change affects any element using that class or associated with that HTML tag.
The big problem: code is getting more complex
Back in the early days of the web, designers only had to know the most basic tags and attributes. But time passed and the internet became more complex, devices changed, and the way we interacted with the web became more personal.
As all that happened, it became necessary to retool. As the possibilities increased for what we could build and design, so did the complexity of everything behind-the-scenes.
Today, web developers use many languages and tools for building websites (e.g., HTML, CSS, JS, Java, code libraries, version control like GitHub, etc.) and there are many specific considerations to account for, like browser-specific quirks, browser versions, device sizes, image compression, load speeds, performance optimization, SEO, and more. This list is ever-growing and, sometimes, web development feels unattainable. But that’s where Webflow comes in.
Designing while Webflow generates clean code for you
It’s useful to understand the concepts of HTML and CSS because they’re the primary foundation of web design. But we’ve reached a point where we no longer have to hand-code HTML and CSS — because of Webflow.
Webflow lets web designers and developers build websites more efficiently. By creating and manipulating content on the Webflow canvas, you’re also directly manipulating the website’s production-ready code — the HTML and CSS. Learn more about designing in the Webflow Designer.
