Intro to HTML & CSS

Learn about HTML, CSS, and how Webflow generates this code while you design.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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:

  1. How browsers render code
  2. How to inspect website code
  3. HTML and CSS
  4. 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.

The Google homepage and the inspector are displayed side-by-side, and the Google logo is highlighted on the webpage.
As you mouse over the code in the inspector, sections of the webpage that correspond to that line of code are highlighted.

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.

HTML code is displayed next to its webpage.

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.

3 H2 headings are highlighted on the Slack marketing site and the CSS styles for the H2 selector are displayed to the right.
Changing the H2 CSS selector will change the styling on all H2 headings.

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.

Various coding language logos and frontend, backend, and logic tool logos are displayed on a timeline from 2002 to 2018.

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.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top