Intro to HTML & CSS

When you visit a web page, when you're looking at the actual content, what you see on the screen is your browser making decisions based on what's in the code of the page.

The browser uses this code – i.e. the HTML, CSS, and Javascript information – to render the web page. When the browser finally loads up the page, it displays what you see on the screen.

You can see this code in your browser when you open the inspector 🕵️

In fact, you can even change the code on the page. When you change the code, the browser will instantly update what you see on the page.

But of course, when you refresh the page, the changes go away because you only made the changes locally in the browser, not in the actual code base hosted on the internet.

In the example below, you can see us open the browser’s inspector and update:

• The HTML text in the button
• The CSS color and size of the text in the button

HTML is generally used for content. It tells the browser what's on the page. For example, headings, paragraph links, images, etc.

CSS, on the other hand, is used to style the content. For example, to change the font color or size.

In the past, you would have one HTML file where you would write the content and style it.

Nowadays, you write and structure the content in an HTML file. Then, you style the content in a CSS file.

In the HTML file, you include a link to your CSS file – also called stylesheet – and structure the content with classes and ids that make it easy to style similar elements and components in your CSS file.

For example, you might have several HTML files containing the content of several pages on your web app but you would like the buttons to look the same on all the pages.

In that case, you could add classes in your HTML files. For example, button-primary and button-secondary could refer to the main CTA button and the secondary CTA button on your pages.

Then, in your CSS file, you could style each button class only once.

Elements in your HTML file can reference the styles in your CSS file at any time. If you make a change to that style in the CSS file, it affects any element that's using that style in your HTML file.

Why do we need to know this?

Well, WeWeb is a frontend builder. As a frontend builder, we help you visually design what will appear in the user’s browser.

As you have seen in the Intro to the Editor, WeWeb allows you to:

• Add HTML elements in the Navigator
• Edit the content of these HTML elements in the Canvas
• Change the CSS style of these HTML elements in the Right Panel