Now, you are going to create the base styles and variables that we will use throughout our project.
How to do the content positioning
As part of the best practices we have an order in which it is advisable to write the code inside CSS. It will help you to have all the sections organized and know where to go back when you need to make a change or solve a problem.
- Positioning --> static, absolute, relative, fixed.
- Box model--> margin, border, padding, content.
- Typography --> fonts, font sizes, etc.
- Visual styles --> box-shadow, border-radius, gradient, etc.
- Others --> miscellaneous, CSS rules and more.
How to create variables
In the Branding section of the design in Figma we can see all the colors that are used. For now, the variables that we are going to create are going to be of these colors.

By clicking on the setting icon of each color, we open the information about it. There we have the hexadecimal code we need.

Remember that to declare a variable in CSS we must use the :root function and add a name to the variable that will contain the value that we are going to use repeatedly in our code. Selecting all the colors, we would have:
:root {--bitcoin-orange: #f7931a;--soft-orange: #ffe9d5;--secondary-blue: #1a9af7;--soft-blue: #e7f5ff;--warm-black: #282623;--black: #201e1c;--grey: #bababa;--off-white: #faf8f7;--just-white: #fff; }
How to do the style reset
Once the variable section above has been declared, it's time to reset the styles that the browser brings by default with the practices we already know.
* { box-sizing: border-box; margin: 0; padding: 0; }
We'll also change the font size to 62.5% to make it easy to use with REM measures. And we'll change the font style we've embedded from Google Fonts.
html { font-size: 62.5; font-family: 'DM Sans', sans-serif; }
You've just applied the first styles by resetting the defaults, applying the font style and creating the first project variables. We're moving fast and sure!
Check out the beginnings of the project in: Initial Architecture
Contribution created by: José Miguel Veintimilla (Platzi Contributor).
Want to see more contributions, questions and answers from the community?