Watch the video and follow along with the written guide
After you structure your project with html you'll want to switch over to adding css. There are 4 ways to add css to your project. Let's go over each one.
To add inline styles you'll want to use the style attribute within an element.
You also can add css styles to your html file with style tags in the head.
Generally it is best practice to add your styles in a separate sheet and then link to it in the head of your html file.
As you build out your project and your css rulesets grows you'll want to separate rulesets using imports which creates modularity in your project. You'll also could use the link tag to link to multiple css files which should have better performance, but if you do import with a preprocessor like Sass (combines all these files into one final CSS file during build) then use @import.
You noticed previously that the link tag was added to the html file. When using @import you'll want to apply it directly to your css file. Keep in mind that the css is read top down so be sure to add your reset.css first in the order for instance.
When using Sass you'll need to compile your files for production with a Sass compiler and then you can use PostCSS for even further improvement such as minification.
You can use javascript to dynamically style your page after it loads in the browser.
This can be helpful when looking to add interactivity to your website.
Write, run, and test your code in real-time