Intro to HTML & CSS

If you're new to web design, it's vital that you understand the differences between HTML and CSS and how they work together to present web...

If you're new to web design, it's vital that you understand the differences between HTML and CSS and how they work together to present web content (HTML) and control how it's displayed in browsers (CSS). In this video, you'll gain that understanding, plus learn to use native browser tools to inspect and make changes to websites, and learn how Webflow can help you produce professional websites without mastering code.

When you visit a webpage, when you’re looking at the actual content? What you see on the screen is your browser making decisions based on what's in your code. And what happens to all this code? Well, the browser uses it to render the webpage. It uses this information to display what everyone ends up seeing when they load up the page.
And sometimes the best way to get a feel for this type of interaction is to start from a website you already know. Most browsers will let you go in and inspect the code for yourself. And when you change that code? When you go in and make a change? The content in your browser changes as well. It’s enormously fun to test that relationship between the code and the rendered content, but of course, when you refresh, all your hard work goes away, because you're only making the change locally. You’re only changing it in your browser.
A MacBook Pro, a Surface Studio, an iPhone, an Atari 2600, an iPad.....What do four of these have in common? They use this type of code to render web content. And so does every modern computing device.
And with this type of code, there are two primary components that we're going to start with: HTML & CSS.
HTML is generally used for content: it tells the browser what’s on the page. Headings, paragraphs, links, images — you name it. And back in the day, we used to style all this content by hand — all sorts of simple things, like if we wanted to change our font family, or color, or size — we used to style it inline — inside the HTML.
And if we wanted other elements to look like that—if we wanted something else to have those same properties, we'd have to copy that code again. And again. And again. And you want to make a change or add something else? Well now you have to go through each inline style by hand...not very efficient.
Enter CSS: the greatest invention in the history of the world, except for any invention that might be better. Like the wheel. CSS takes all that styling information — colors and borders and size, positioning, typography, so much more — it moves all that info into a separate style sheet. That way, any of those elements in our HTML? They can call that information — elements can reference those styles…any time. Make a change to that style? It affects any element that’s using that style.
So you have your HTML: everything dealing with content…and, you have CSS, which we can use to style that content.
And the relationship between HTML & CSS is that simple.
And back in the early days of the web, we only had to know the most basic tags and attributes, because that’s all the web was back then. Time went by, and the internet really started growing up. Devices changed, and the way we interacted with the web became more personal.
And 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.
Now what does this have to do with Webflow? And why all this talk about…HTML & CSS? And why are we covering them? Well, because HTML & CSS serve as the primary foundation. This is the starting point from which we can build anything.
What we're covering is a way to move a lot faster and more efficiently. By visually creating and manipulating this content, we can directly interact with our HTML and CSS and everything else. And even if we’re proficient in all these areas, we’re not having to spend so much of our time. Instead of sketching and outputting prototypes, and going through step, after step, after step in the development process, we’re outputting production-ready code. So you can take even the craziest ideas and make them a reality.

Up next

The Box Model

The box model describes how layout works on the web.

Series episodes

Intro

Intro to the designer

Intro to HTML & CSS

Web Structure

The Box Model

Element Hierarchy

Navigator

Element Basics

Element Panel

Intro to HTML & CSS

If you're new to web design, it's vital that you understand the differences between HTML and CSS and how they work together to present web...

Up next

The Box Model

Series episodes

Latest Posts

Learn More

Follow Us