First of you can access the figma design we’ll be building with here to follow along.
Websites are made up of sections and containers which we refer to as boxes which we first established from our introduction. Sections are where we apply background images or
background colors and they cover the full width of the screen we have a container inside each section that stays centered within the section and keeps our content from becoming too wide so on wider screens our sections grow but the containers stay a fixed size right there in the middle.
To start this project in Webflow we can head to the add elements on the left panel and we can drag a section onto our page inside that section we just added we can add a container now inside the container is where our content goes so we can add a
heading element into the container and to see all this we can click the Navigator and here we have a section container inside that container.
A faster way to add elements is command e on Mac and ctl e on Windows and we can search for the element we want to add so in this case a paragraph and it's right there under the heading and while we're at it let's also add a button.
Now to style our text instead of selecting each text itself it's best to style the whole page or the body first so if we click this blue icon under the style tab on the right panel we can style the Body (All Pages) and any changes we make here will affect the body on every page of our web website.
If scroll down to typography still on the right panel and we go ahead and change the font here it would affect all text in the body, headings, paragraphs, buttons are all being changed we'll select General Sands at a medium weight since that's what we're using for our design and most of the text throughout our design on figma we use a 20-pixel font size so this paragraph and also this button text that's our main font size for the site so if we apply a font size here on the body notice how it would pretty much affect all text inside the body unless that element like the heading has an overridden font size.
The only problem with using pixels is the website visitor can't adjust that size if they're having a hard time reading the text they can't change it so we like to use a unit called Rim instead of pixels RM the default font size in browsers is 16 pixels so if we apply a font size of one Rim that's 1*16 so that'll look just like 16 pixels if we wanted a font size that looks like 32 pixels we can type two Rim that's 2*16 so that looks the same as 32 pixels in our case we want this to look like 20 pixels so we can do 20 / 16 and that will give us looks like 1.25 Rim and that'll look the same as 20 pixels but the website visitor can adjust that so anywhere that we would usually use pixels we want to use RM instead so the entire design sign can be scaled up and down.
