How to Link an External CSS File to HTML
A step-by-step guide on how to correctly and semantically link an external CSS document.
Introduction: The importance of styling to developers cannot be overlooked, so this topic remains crucial because a developer must adopt either inline styling or external CSS styling while writing CSS code. It is of utmost importance to identify the better method of styling.
Prerequisite: To fully comprehend this article, it is necessary to possess a basic understanding of HTML and CSS. Visit www.w3schools.com for an introductory lesson.
Table of contents
Why external styling is important.
How to link your external CSS.*
Body:
Inline Styling - Pros and Cons:
Inline styling in HTML entails writing the style attributes of a page inside the HTML tags of the document.
Pros of inline styling
It is simple and easy to use.
It works perfectly on small projects.
Cons of inline styling
It appears cumbersome and confusing on large projects.
It is difficult to group HTML selectors.
It is impossible to write media queries.
Why external styling is important:
External styling involves writing CSS code on a separate document from the HTML. It is important because:
It makes for a cleaner code.
It makes group styling easier.
Media queries are possible and vivid, therefore allowing mobile responsiveness.
How to link your external CSS:
First step: Create a File with '.css' extension in the same folder as the HTML file. eg. Styles.css
Second step: Create a 'link' tag in the HEAD section of the HTML page.
<link rel="stylesheet" type="text/css" href="">
Third step: In the href attribute, input the CSS file name;
<link rel="stylesheet" type="text/css" href="styles.css">
Conclusion: You have successfully linked your external CSS file. Check out other features of CSS styling.