Learn
Setup and Syntax
External Stylesheet
CSS in HTML file may be good for smaller projects, however, for larger projects, it's easier to use an external stylesheet.
By creating separate CSS files, you can easily manage style changes throughout your project and make changes to the styling without having to go through every single HTML file.
To create an external stylesheet, follow these steps:
- Create a new file with a .css extension.
- Add your CSS code into this file.
- Link the stylesheet to your HTML document using the
<link>tag in the<head>section of your HTML document.
With this method, you can separate concerns related to markup (HTML) and presentation (CSS) and keep the clean and organized code.
Instructions
Take a look at index.html. Cut the CSS code ruleset in between the opening and closing <style> tags and paste it directly into the file called style.css.
Delete the remaining <style> element (now empty) from index.html and press the Run button.
Hmm, the font changes didn’t take effect? Click the Next button to find out why.
Sign up to start coding
Already have an account?
Sign In