OneBite.Dev - Coding blog in a bite size

link external css to html

Code snippet for how to link external css to html with sample and detail explanation

Learning to link external CSS to HTML is essential when designing a webpage in order to apply styles across several HTML pages. This ensures consistency, enhances user experience and simplifies the maintenance of your website.

Code Snippet: Linking External CSS to HTML

The code snippet below demonstrates how to link an external CSS file, named ‘styleSheet.css’ for instance, with an HTML file.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="styleSheet.css">
</head>
<body>
	<h1>Welcome to My Web Page</h1>
	<p>This is an example of linking an external CSS file to an HTML document.</p>
</body>
</html>

Code Explanation for Linking External CSS to HTML

Let us break down how the shown code links the CSS file to your HTML file.

The element responsible for linking the HTML to the CSS is the <link> element. This is placed within the <head> element of your HTML file.

The rel attribute specifies the relationship between the HTML and linked file. In this case, “stylesheet” indicates that the linked file is a stylesheet.

The type attribute defines the type of content linked. Here, “text/css” signifies that the linked content is a CSS file.

Finally, href specifies the path to the CSS file relative to the HTML file. In our case, “styleSheet.css” implies that the CSS file is in the same directory with the HTML file. If it were in a different directory, the path would reflect this accordingly.

That’s it — you’ve successfully linked your HTML and CSS files. Now, every style you define in your CSS file will be applied to your HTML content. This is a fundamental and essential skill in mastering both HTML and CSS. Keep practicing!

css