Intro to HTML & CSS

HTML makes up the structure and content on a website, while CSS styles the content. Webflow generates this code while you design.

getting-started
 
This video features an old UI. Updated version coming soon!

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.

A google chrome window includes the inspect interface displaying the live website on the left and the code on the right. An h1 element is selected to be inspected. The code that belongs to the h1 element is highlighted in the elements inspector window.

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.

Step one on the left, highlight the text element and right click on it to pull up the drop down menu where you can select the Inspect button. Step two on the right, Edit the text element copy in the code.
Step three, preview the temporary change to the live website on your browser.

Understanding HTML and CSS

HTML creates content on a website and CSS is responsible for the content's design and style.

HTML: the content

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

An example of a set of content that has been created with HTML code. Included in the example is a heading, paragraph text, a linked text block and an image of an astronaut in space zoomed into its helmets reflection.

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.

An example of a snippet of HTML code for the heading, paragraph text, text link block and image from the previous HTML content example.

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 it into a separate style document with classes.

27 inline terms are surrounding the term CSS with a Webflow blue rectangle in its background. This visual displays all these terms being included in a Cascading style sheet.

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.

An element with the class name "awesome" is repeated four times. The CSS snippet of this element is highlighting the word .awesome. The rendered live visual is displayed under these two examples of code.

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.

A lot of different logos for different web tools are surrounding the words HTML and CSS. This graphic is displaying the variety of tools that are available to manage a website 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.

Designing while Webflow generates clean code for you

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.

An example of the Webflow designer interface with an element selected displaying the style panel on the right side for customization.

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.