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

  • HTML makes up the structure and content on a website
  • CSS styles the content 

In this lesson we'll cover how browsers render this code, how to look at a website's code, how HTML and CSS work, and how Webflow generates clean HTML and CSS (as well as JavaScript) for you, while you design.

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 the code

Most browsers will let you inspect the code for yourself. If you’re in Chrome, use Ctrl+Shift+i (on Windows) or Cmd+Opt+i (on Mac) to open Chrome DevTools. When you change that code in the inspector, the content in your browser changes as well. It can be fun to test that relationship between the code and the rendered content.

 

Keep in mind though, that when you refresh, the updates you made go away because you're only making the change locally, in your browser.

HTML: the content

HTML is generally used for content: it tells the browser what’s on the page. This includes everything you see — headings, paragraphs, links, images — you name it.

 

In HTML, we used to style all the content with inline styles, line-by-line. Simple things like changing our font family or 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.

 

CSS: the styling

CSS (cascading style sheet) takes all that styling information that used to be written inline — colors, borders, size, positioning, typography, and more — and moves all that info into a separate style document with classes.

 

That way, any of those elements in our HTML can be given a class name to take on the styles associated with that class.

Make a change to that class in the CSS file and it affects any element that’s using that class.

 

The big problem: code is getting harder

Back in the early days of the web, we only had to know the most basic tags and attributes. Time went by and the internet really started growing up. 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 as designers and developers, so did the complexity of everything we had to manage behind the scenes.

 

Today, to become a successful web developer you have to get the hang of HTML, CSS, JS, databases, Sass, JavaScript libraries, CSS libraries, browser-specific quirks, browser versions, responsive design, GitHub, jQuery, Java, image compression, load speeds, optimization, SEO — this list is ever-growing and pretty soon web development feels impossible to get into.

The solution: Webflow

HTML and CSS serve as the primary foundation of web design, providing both structure and style. It’s useful to understand these concepts, but we’ve reached a point where we no longer have to hand-code HTML and CSS — because of Webflow.

 

What we're providing with Webflow is a way to move a lot faster and more efficiently when building websites. By visually creating and manipulating content on a canvas, we can directly interact with our HTML, CSS, and everything else on the screen. With Webflow, you get a direct connection to the medium you’re manipulating.

Instead of sketching and outputting prototypes, and going through the painful design iteration to development handoff process, we’re outputting production-ready code. So you can take even the craziest design ideas and make them a reality — without having to write code.